Add birthday calendar creation to frontend

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

@@ -0,0 +1,102 @@
+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("create-birthday-calendar-form")
+export class CreateCalendarForm extends LitElement {
+  protected override createRenderRoot() {
+    return this
+  }
+
+  @property()
+  principal: string = ''
+  @property()
+  addr_id: string = ''
+  @property()
+  displayname: string = ''
+  @property()
+  description: string = ''
+  @property()
+  color: string = ''
+
+  dialog: Ref<HTMLDialogElement> = createRef()
+  form: Ref<HTMLFormElement> = createRef()
+  @property()
+  timezones: Array<String> = []
+
+  override render() {
+    return html`
+      <button @click=${() => this.dialog.value.showModal()}>Create birthday calendar</button>
+      <dialog ${ref(this.dialog)}>
+        <h3>Create calendar</h3>
+        <form @submit=${this.submit} ${ref(this.form)}>
+          <label>
+            Displayname
+            <input type="text" name="displayname" value=${this.displayname} @change=${e => this.displayname = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Description
+            <input type="text" name="description" @change=${e => this.description = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Color
+            <input type="color" name="color"  @change=${e => this.color = e.target.value} />
+          </label>
+          <br>
+          <button type="submit">Create</button>
+          <button type="submit" @click=${event => { event.preventDefault(); this.dialog.value.close(); this.form.value.reset() }} class="cancel">Cancel</button>
+      </form>
+      </dialog>
+        `
+  }
+
+  async submit(e: SubmitEvent) {
+    e.preventDefault()
+    if (!this.addr_id) {
+      alert("Empty id")
+      return
+    }
+    if (!this.displayname) {
+      alert("Empty displayname")
+      return
+    }
+
+    let response = await fetch(`/caldav/principal/${this.principal}/_birthdays_${this.addr_id}`, {
+      method: 'MKCOL',
+      headers: {
+        'Content-Type': 'application/xml'
+      },
+      body: `
+      <mkcol xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
+        <set>
+          <prop>
+            <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ''}
+            ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ''}
+            <CAL:supported-calendar-component-set>
+              <CAL:comp name="VEVENT" />
+            </CAL:supported-calendar-component-set>
+          </prop>
+        </set>
+      </mkcol>
+      `
+    })
+
+    if (response.status >= 400) {
+      alert(`Error ${response.status}: ${await response.text()}`)
+      return null
+    }
+    window.location.reload()
+    return null
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'create-calendar-form': CreateCalendarForm
+  }
+}

crates/frontend/js-components/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
 
     rollupOptions: {
       input: [
+        "lib/create-birthday-calendar-form.ts",
         "lib/create-calendar-form.ts",
         "lib/edit-calendar-form.ts",
         "lib/import-calendar-form.ts",