Drive popup tabs through javascript.

2 files changed, 76 insertions, 9 deletions

diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 09d0038b..d1cd4886 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -316,6 +316,40 @@
              (input (@ (type "submit")))
              )))
 
+;; (define-public (property-input-template)
+;;   (div (@ (class ""))
+;;        (input (@ (type "text")
+;;                  (name "name")
+;;                  (list "known-fields")
+;;                  (placeholder "Nytt fält")))
+;;        (select (@ (name "type"))
+;;          (option (@ (value "TEXT")) "Text"))
+;;        (span
+;;         (input (@ (type "text")
+;;                   (name "value")
+;;                   (placeholder "Värde"))))))
+
+;; (define (list-input-template)
+;;  ;; It would be better if these input-list's worked on the same
+;;  ;; class=bind system as the fields above. The problem with that
+;;  ;; is however that each input-list requires different search
+;;  ;; and join procedures. Currently this is bound in the JS, see
+;;  ;; [CATEGORIES_BIND].
+;;  ;; It matches on ".input-list[data-property='categories']".
+;;  `(div (@ (class "input-list")
+;;           (data-property "categories"))
+;;        #;
+;;        ,@(awhen (prop ev 'CATEGORIES) ;
+;;        (map (lambda (c)              ;
+;;        `(input (@ (size 2)           ;
+;;        (class "unit")                ;
+;;        (value ,c))))                 ;
+;;        it))
+
+;;        (input (@ (class "unit final")
+;;                  (size 2)
+;;                  (type "text")
+;;                  ))))
 
 ;; Single event in side bar (text objects)
 (define-public (fmt-day day)
diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm
index 17bb3b2d..388c2f07 100644
--- a/module/calp/html/view/calendar/week.scm
+++ b/module/calp/html/view/calendar/week.scm
@@ -99,18 +99,51 @@
                             ;; onclick: "close_popup(document.getElementById(this.closest('.popup-container').id))"
                             class: '("close-tooltip")))
 
-                 ,(tabset
-                   `(("📅" title: "Översikt"
-                      (vevent-description
-                       (@ (class "vevent populate-with-uid")))
-                      )
+                 (div (@ (class "tabgroup"))
+                      (tab-element
+                       (@ (title "Översikt"))
+                       (span (@ (slot "label")) "📅")
+                       (vevent-description
+                        (@ (slot "content")
+                           (class "vevent populate-with-uid"))))
+                      (tab-element
+                       (@ (title "Redigera"))
+                       (span (@ (slot "label")) "📅")
+                       (vevent-edit (@ (slot "content")
+                                       (class "populate-with-uid")))
+                       ))
 
-                     ,@(when (edit-mode)
-                         `(("📅" title: "Redigera"
-                            (vevent-edit (@ (class "populate-with-uid"))))))
+                 ;; ,(tabset
+                 ;;   `(("📅" title: "Översikt"
+                 ;;      (vevent-description
+                 ;;       (@ (class "vevent populate-with-uid")))
+                 ;;      )
 
-                     )))))
+                 ;;     ,@(when (edit-mode)
+                 ;;         `(("📅" title: "Redigera"
+                 ;;            (vevent-edit (@ (class "populate-with-uid"))))))
 
+                 ;;     ))
+                 )))
+
+      (template
+       (@ (id "tab-template"))
+       ;; ,((@ (calp html components) include-css) "/static/tab.css")
+       (div (@ (class "tab"))
+            (input (@ (type "radio")
+                      ;; id
+                      ;; (name ,tabgroup)
+                      ))
+            (label (@ ; for id
+                    ;; style= top: calc(var(--tab-size) * i)
+                    (title ; title
+                     ))
+                   (slot (@ (name "label")) "??")
+                   )
+            (div (@ (class "content"))
+                 (slot (@ (name "content"))
+                       (span (@ (class "error"))
+                             "CONTENT MISSING")))))
       )))
 
 ;; based on the output of fmt-single-event