1 files changed, 25 insertions, 21 deletions

diff --git a/static/components/vevent-edit.ts b/static/components/vevent-edit.ts
index bf72678c..e3b5d105 100644
--- a/static/components/vevent-edit.ts
+++ b/static/components/vevent-edit.ts
@@ -25,31 +25,22 @@ class ComponentEdit extends ComponentVEvent {
         let body = frag.firstElementChild!
         this.replaceChildren(body);
 
+        let data = vcal_objects.get(this.uid)
+        if (!data) {
+            throw `Data missing for uid ${this.dataset.uid}.`
+        }
+
         for (let el of this.querySelectorAll('[data-label]')) {
             let label = document.createElement('label');
             let id = el.id || gensym('input');
             el.id = id;
             label.htmlFor = id;
             label.textContent = (el as HTMLElement).dataset.label!;
+            el.parentElement!.insertBefore(label, el);
         }
-    }
-
-    connectedCallback() {
-
-        /* Edit tab is rendered here. It's left blank server-side, since
-           it only makes sense to have something here if we have javascript */
-
-        let data = vcal_objects.get(this.uid)
-
-        if (!data) {
-            throw `Data missing for uid ${this.dataset.uid}.`
-        }
-
-
-        // return;
 
         /* Handle calendar dropdown */
-        for (let el of this.getElementsByClassName('calendar-selection')) {
+        for (let el of this.querySelectorAll('select.calendar-selection')) {
             for (let opt of el.getElementsByTagName('option')) {
                 opt.selected = false;
             }
@@ -57,21 +48,19 @@ class ComponentEdit extends ComponentVEvent {
                 (el as HTMLSelectElement).value = data.calendar;
             }
 
-            el.addEventListener('change', (e) => {
+            el.addEventListener('change', e => {
                 let v = (e.target as HTMLSelectElement).selectedOptions[0].value
                 let obj = vcal_objects.get(this.uid)!
                 obj.calendar = v;
             });
         }
 
-        this.redraw(data);
 
         // for (let el of this.getElementsByClassName("interactive")) {
         for (let el of this.querySelectorAll("[data-property]")) {
             // console.log(el);
-            el.addEventListener('input', (e) => {
+            el.addEventListener('input', () => {
                 let obj = vcal_objects.get(this.uid)
-                // console.log(el, e);
                 if (obj === undefined) {
                     throw 'No object with uid ' + this.uid
                 }
@@ -83,7 +72,6 @@ class ComponentEdit extends ComponentVEvent {
                     console.log(el, 'not an HTMLInputElement');
                     return;
                 }
-                // console.log(`obj[${el.dataset.property!}] = `, el.value);
                 obj.setProperty(
                     el.dataset.property!,
                     el.value)
@@ -135,6 +123,22 @@ class ComponentEdit extends ComponentVEvent {
         });
     }
 
+    connectedCallback() {
+
+        /* Edit tab is rendered here. It's left blank server-side, since
+           it only makes sense to have something here if we have javascript */
+
+        let data = vcal_objects.get(this.uid)
+
+        if (!data) {
+            throw `Data missing for uid ${this.dataset.uid}.`
+        }
+
+        this.redraw(data);
+
+        // return;
+    }
+
     redraw(data: VEvent) {
         /* We only update our fields, instead of reinstansiating
            ourselves from the template, in hope that it's faster */