Stop using with-label.

2 files changed, 44 insertions, 46 deletions

diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 9e70f910..85c3829c 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -13,7 +13,6 @@
   :use-module ((web uri-query) :select (encode-query-parameters))
   :use-module ((calp html util) :select (html-id calculate-fg-color))
   :use-module ((calp html config) :select (edit-mode debug))
-  :use-module ((calp html components) :select (with-label))
   :use-module ((crypto) :select (sha256 checksum->string))
   :use-module ((xdg basedir) :prefix xdg-)
   :use-module ((vcomponent recurrence) :select (repeating?))
@@ -399,64 +398,55 @@
                                             '((selected))))
                                      ,name))
                           calendars)))
-               (h3 (input (@ (type "text")
-                             (placeholder ,(_ "Summary"))
-                             (name "summary") (required)
-                             (data-property "summary")
+               (input (@ (type "text")
+                         (placeholder ,(_ "Summary"))
+                         (name "summary") (required)
+                         (data-property "summary")
                                         ; (value ,(prop ev 'SUMMARY))
-                             )))
+                         ))
 
                (div (@ (class "timeinput"))
 
-                    ,@(with-label
-                       (_ "Start time")
-                       '(date-time-input (@ (name "dtstart")
-                                            (data-property "dtstart")
-                                            )))
+                    (date-time-input (@ (name "dtstart")
+                                         (data-property "dtstart")
+                                         ))
 
-                    ,@(with-label
-                       (_ "End time")
-                       '(date-time-input (@ (name "dtend")
-                                            (data-property "dtend"))))
+                    (date-time-input (@ (name "dtend")
+                                         (data-property "dtend")))
 
                     (div (@ (class "checkboxes"))
-                         ,@(with-label
-                            (_ "Whole day?")
-                            `(input (@ (type "checkbox")
-                                       (name "wholeday")
-                                       )))
-                         ,@(with-label
-                            (_ "Recurring?")
-                            `(input (@ (type "checkbox")
-                                       (name "has_repeats")
-                                       ))))
+                         (input (@ (type "checkbox")
+                                   (name "wholeday")
+                                   (data-label ,(_ "Whole day?"))
+                                   ))
+                         (input (@ (type "checkbox")
+                                   (name "has_repeats")
+                                   (data-label ,(_ "Recurring?"))
+                                   )))
 
                     )
 
-               ,@(with-label
-                  (_ "Location")
-                  `(input (@ (placeholder ,(_ "Location"))
-                             (name "location")
-                             (type "text")
-                             (data-property "location")
+               (input (@ (placeholder ,(_ "Location"))
+                         (data-label ,(_ "Location"))
+                         (name "location")
+                         (type "text")
+                         (data-property "location")
                                         ; (value ,(or (prop ev 'LOCATION) ""))
-                             )))
+                         ))
 
-               ,@(with-label
-                  (_ "Description")
-                  `(textarea (@ (placeholder ,(_ "Description"))
-                                (data-property "description")
-                                (name "description"))
+               (textarea (@ (placeholder ,(_ "Description"))
+                            (data-label ,(_ "Description"))
+                            (data-property "description")
+                            (name "description"))
                                         ; ,(prop ev 'DESCRIPTION)
-                             ))
+                         )
 
-               ,@(with-label
-                  (_ "Categories")
-                  `(input-list
-                    (@ (name "categories")
-                       (data-property "categories"))
-                    (input (@ (type "text")
-                              (placeholder ,(_ "Category"))))))
+               (input-list
+                (@ (name "categories")
+                   (data-property "categories")
+                   (data-label ,(_ "Categories")))
+                (input (@ (type "text")
+                          (placeholder ,(_ "Category")))))
 
                ;; TODO This should be a "list" where any field can be edited
                ;; directly. Major thing holding us back currently is that
diff --git a/static/components/vevent-edit.ts b/static/components/vevent-edit.ts
index ee368296..bf72678c 100644
--- a/static/components/vevent-edit.ts
+++ b/static/components/vevent-edit.ts
@@ -7,7 +7,7 @@ import { DateTimeInput } from './date-time-input'
 import { vcal_objects } from '../globals'
 import { VEvent, RecurrenceRule } from '../vevent'
 import { create_event } from '../server_connect'
-import { to_boolean } from '../lib'
+import { to_boolean, gensym } from '../lib'
 
 /* <vevent-edit />
    Edit form for a given VEvent. Used as the edit tab of popups.
@@ -24,6 +24,14 @@ class ComponentEdit extends ComponentVEvent {
         let frag = this.template.content.cloneNode(true) as DocumentFragment
         let body = frag.firstElementChild!
         this.replaceChildren(body);
+
+        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!;
+        }
     }
 
     connectedCallback() {