frontend: Add dropdown for timezone selection

crates/frontend/js-components/lib/create-calendar-form.ts

@@ -7,6 +7,11 @@ import { escapeXml } from ".";
 export class CreateCalendarForm extends LitElement {
   constructor() {
     super()
+    this.fetchTimezones()
+  }
+
+  async fetchTimezones() {
+    this.timezones = await getTimezones()
   }
 
   protected override createRenderRoot() {
@@ -36,6 +41,8 @@ export class CreateCalendarForm extends LitElement {
 
   dialog: Ref<HTMLDialogElement> = createRef()
   form: Ref<HTMLFormElement> = createRef()
+  @property()
+  timezones: Array<String> = []
 
   override render() {
     return html`
@@ -65,7 +72,12 @@ export class CreateCalendarForm extends LitElement {
           <br>
           <label>
             Timezone (optional)
-            <input type="text" name="timezone" .value=${this.timezone_id} @change=${e => this.timezone_id = e.target.value} />
+            <select name="timezone" .value=${this.timezone_id} @change=${e => this.timezone_id = e.target.value}>
+              <option value="">No timezone</option>
+              ${this.timezones.map(timezone => html`
+                <option value=${timezone} ?selected=${timezone === this.timezone_id}>${timezone}</option>
+              `)}
+            </select>
           </label>
           <br>
           <label>

crates/frontend/js-components/lib/edit-calendar-form.ts

@@ -2,11 +2,17 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { escapeXml } from ".";
+import { getTimezones } from "./timezones.ts";
 
 @customElement("edit-calendar-form")
 export class EditCalendarForm extends LitElement {
   constructor() {
     super()
+    this.fetchTimezones()
+  }
+
+  async fetchTimezones() {
+    this.timezones = await getTimezones()
   }
 
   protected override createRenderRoot() {
@@ -36,7 +42,8 @@ export class EditCalendarForm extends LitElement {
 
   dialog: Ref<HTMLDialogElement> = createRef()
   form: Ref<HTMLFormElement> = createRef()
-
+  @property()
+  timezones: Array<String> = []
 
   override render() {
     return html`
@@ -51,7 +58,12 @@ export class EditCalendarForm extends LitElement {
           <br>
           <label>
             Timezone (optional)
-            <input type="text" name="timezone" .value=${this.timezone_id} @change=${e => this.timezone_id = e.target.value} />
+            <select name="timezone" .value=${this.timezone_id} @change=${e => this.timezone_id = e.target.value}>
+              <option value="">No timezone</option>
+              ${this.timezones.map(timezone => html`
+                <option value=${timezone} ?selected=${timezone === this.timezone_id}>${timezone}</option>
+              `)}
+            </select>
           </label>
           <br>
           <label>

crates/frontend/js-components/lib/timezones.ts

@@ -0,0 +1,12 @@
+let timezonesPromise = null
+export async function getTimezones() {
+  timezonesPromise ||= new Promise(async (resolve, reject) => {
+    try {
+      let response = await fetch('/frontend/_timezones.json')
+      resolve(await response.json())
+    } catch (e) {
+      reject(e)
+    }
+  })
+  return await timezonesPromise
+}