Input cleaned up.

3 files changed, 116 insertions, 40 deletions

diff --git a/module/calp/html/components.scm b/module/calp/html/components.scm
index ebc359b8..03e1cef1 100644
--- a/module/calp/html/components.scm
+++ b/module/calp/html/components.scm
@@ -1,6 +1,8 @@
 (define-module (calp html components)
   :use-module (calp util)
   :use-module (calp util exceptions)
+  :use-module (ice-9 curried-definitions)
+  :use-module (ice-9 match)
   :export (xhtml-doc)
   )
 
@@ -112,6 +114,54 @@
                             ,key)
                      (div (@ (class "content")) ,body)))))
 
+(define ((set-attribute attr) el)
+  (match el
+    [(tagname ('@ params ...) inner-body ...)
+     `(,tagname (@ ,@(assq-merge params attr))
+                ,@inner-body)]
+    [(tagname inner-body ...)
+     `(,tagname (@ ,attr)
+                ,@inner-body)]))
+
+
+(define-public (with-label lbl . forms)
+
+  (define id (gensym "label"))
+
+  (cons `(label (@ (for ,id)) ,lbl)
+   (let recurse ((forms forms))
+     (map (lambda (form)
+            (cond [(not (list? form)) form]
+                  [(null? form) '()]
+                  [(eq? 'input (car form))
+                   ((set-attribute `((id ,id))) form)]
+                  [(list? (car form))
+                   (cons (recurse (car form))
+                         (recurse (cdr form)))]
+                  [else
+                   (cons (car form)
+                         (recurse (cdr form)))]))
+          forms))))
+
+
+(define-public (form elements)
+  `(form
+    ,@(map (label self
+                  (lambda (el)
+                    (match el
+                      ((name ('@ tags ...) body ...)
+                       (let ((id (gensym "formelement")))
+                         (cons
+                          `(label (@ (for ,id)) ,name)
+                          (map
+                           (set-attribute `((name ,name)))
+                           (cons
+                            ((set-attribute `((id ,id))) (car body))
+                            (cdr body))))))
+                      ((name body ...)
+                       (self `(,name (@) ,@body))))))
+           elements)))
+
 
 (define-public (include-css path . extra-attributes)
   `(link (@ (type "text/css")
diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 8e52ed7c..89020bd8 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -7,7 +7,7 @@
   :use-module ((text util) :select (add-enumeration-punctuation))
   :use-module (calp html util)
   :use-module ((calp html config) :select (edit-mode))
-  :use-module ((calp html components) :select (btn tabset))
+  :use-module ((calp html components) :select (btn tabset form with-label))
   :use-module ((calp util color) :select (calculate-fg-color))
   :use-module ((vcomponent datetime output)
                :select (fmt-time-span
@@ -125,46 +125,59 @@
                               optional: (attributes '())
                               key: (fmt-header list))
   `(div (@ (class " eventtext "))
-        (h3 (input (@ (type "text") (class "summary")
-                      (placeholder "Sammanfattning")
-                      (name "summary") (required)
-                      (value ,(prop ev 'SUMMARY)))))
-        (div
-         ,(let ((start (prop ev 'DTSTART))
-                 (end (prop ev 'DTEND)))
-            `(table
-              (tr (td "Heldag?")
-                  (td (input (@ (type "checkbox")
-                                ,@(when (date? start) '((checked)))))))
-              (tr (td "Start")
-                  (td (input (@ (type "date") (value ,(date->string (as-date start))))))
-                  (td
-                   (input (@ ,@(when (date? start)
-                                 '((style "display:none")))
-                             (type "time")
-                             (value ,(time->string (as-time start)))))))
-              (tr (td "Slut")
-                  (td (input (@ (type "date")
-                                ,@(when end `((value ,(date->string (as-date end))))))))
-                  (td (input (@ ,@(when (date? start)
-                                    '((style "display:none")))
-                                (type "time")
-                                ,@(when end `((value ,(time->string (as-time end)))))
-                                )))))))
+        (div (@ (class "edit-form"))
+             (h3 (input (@ (type "text") (class "summary")
+                           (placeholder "Sammanfattning")
+                           (name "summary") (required)
+                           (value ,(prop ev 'SUMMARY)))))
+
+             ,@(with-label "Heldag" `(input (@ (name "wholeday") (type "checkbox"))))
+
+             ,@(let ((start (prop ev 'DTSTART)))
+                 (with-label "Start"
+                             `(div (input (@ (type "date")
+                                             (name "dtstart-date")
+                                             (value ,(date->string (as-date start)))))
+                                   (input (@ ,@(when (date? start)
+                                                 '((style "display:none")))
+                                             (type "time")
+                                             (name "dtstart-end")
+                                             (value ,(time->string (as-time start))))))))
+             ,@(let ((end (prop ev 'DTEND)))
+                 (with-label "Slut"
+                             `(div (input (@ (type "date")
+                                             (name "dtend-date")
+                                             ,@(when end `((value ,(date->string (as-date end)))))))
+                                   (input (@ ,@(when (date? end)
+                                                 '((style "display:none")))
+                                             (type "time")
+                                             (name "dtend-time")
+                                             ,@(when end `((value ,(time->string (as-time end)))))
+                                             )))))
 
-        (div (b "Plats: ")
-             (input (@ (name "location")
-                       (value ,(or (prop ev 'LOCATION) "")))))
+             ,@(with-label
+                "Plats"
+                `(input (@ (placeholder "Plats")
+                           (name "location")
+                           (type "text")
+                           (value ,(or (prop ev 'LOCATION) "")))))
 
-        (div (@ (class "description"))
-             (textarea ,(prop ev 'DESCRIPTION)))
+             ,@(with-label
+                "Beskrivning"
+                `(textarea (@ (placeholder "Beskrivning")
+                              (name "description"))
+                           ,(prop ev 'DESCRIPTION)))
 
-        (div (@ (class "categories"))
-             ,@(awhen (prop ev 'CATEGORIES)
-                      (map (lambda (c) `(button (@ (class "category")) ,c))
-                           it))
+             ,@(with-label
+                "Kategorier"
+                (awhen (prop ev 'CATEGORIES)
+                       (map (lambda (c) `(button (@ (class "category")) ,c))
+                            it))
 
-             (input (@ (class "category") (type "text") (placeholder "category"))))))
+                `(input (@ (class "category")
+                           (type "text")
+                           (placeholder "category"))))
+             )))
 
 
 ;; Single event in side bar (text objects)
diff --git a/static/style.scss b/static/style.scss
index 3a2e5ba6..24f88f48 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -698,8 +698,8 @@ along with their colors.
     /* overflow-y: auto; */
     max-width: 60ch;
     max-height: 60ch;
-    min-width: 40ch;
-    min-height: 20ch;
+    min-width: 60ch;
+    min-height: 30ch;
 
     &-container {
         display: none;
@@ -790,7 +790,7 @@ along with their colors.
 }
 
 .tab {
-    label {
+    > label {
         position: absolute;
 
         left: 100%;
@@ -837,6 +837,19 @@ along with their colors.
         min-width: 100%;
         min-height: 100%;
     }
+
+
+    .edit-form {
+        label {
+            display: block;
+        }
+
+        input[type='text'], textarea {
+            width: 100%;
+        }
+    }
+
+
 }
 
 /* Other