FreakU
/
pronounsfu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: allow user to pick timezone manually

This commit is contained in:
sam 2023-08-14 02:32:58 +02:00
parent 9ee6f318c7
commit 49eb964ed8
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/routes/@[username]/edit/other/+page.svelte
View File

@ -42,6 +42,8 @@
let displayTimezone = ""; let displayTimezone = "";
$: setTime($user.timezone); $: setTime($user.timezone);
const validTimezones = Intl.supportedValuesOf("timeZone");
const detectTimezone = () => { const detectTimezone = () => {
$user.timezone = DateTime.local().zoneName; $user.timezone = DateTime.local().zoneName;
}; };
@ -147,14 +149,21 @@
</p> </p>
<InputGroup> <InputGroup>
<Button on:click={detectTimezone}>Detect timezone</Button> <Button on:click={detectTimezone}>Detect timezone</Button>
<Input disabled value={$user.timezone !== null ? $user.timezone : "Unset"} /> <Input list="timezones" bind:value={$user.timezone} />
<datalist id="timezones">
{#each validTimezones as timezone}<option value={timezone} />{/each}
</datalist>
<Button on:click={() => ($user.timezone = null)}>Reset</Button> <Button on:click={() => ($user.timezone = null)}>Reset</Button>
</InputGroup> </InputGroup>
<p class="mt-2"> <p class="mt-2">
{#if $user.timezone} {#if $user.timezone}
This will show up on your profile like this: This will show up on your profile like this:
<Icon name="clock" aria-hidden /> {#if validTimezones.some((zone) => zone === $user.timezone)}
{currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span> <Icon name="clock" aria-hidden />
{currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
{:else}
<i>not a valid timezone</i>
{/if}
<br /> <br />
{/if} {/if}
<span class="text-muted"> <span class="text-muted">