From cc969c39128bf3bdff5e8f45b283da1bb7a2b300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Thu, 6 Aug 2020 18:46:51 +0200
Subject: Fix most of event creation problems in week.

---
 module/output/html.scm | 78 ++++++++++++++++++++++----------------------------
 static/script.js       | 25 +++++++++++-----
 2 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/module/output/html.scm b/module/output/html.scm
index b70b5f56..4fc08d3b 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -74,6 +74,7 @@
   (date->string date "~Y-~m-~d"))
 
 ;; Generate an html id for an event.
+;; TODO? same event placed multiple times, when spanning multiple cells
 (define (html-id ev)
   (or (prop ev '-HTML-ID)
       (set/r! (prop ev '-HTML-ID)
@@ -152,22 +153,11 @@
                             (ul (li (a (@ (href "/calendar/" ,(prop ev 'UID) ".ics"))
                                        "som iCal"))
                                 (li (a (@ (href "/calendar/" ,(prop ev 'UID) ".xcs"))
-                                       "som xCal"))))))
-                ;; Only display sxml when in debug mode. See below for other case
-                (when (debug)
-                  `(("</>"
-                     ,((@ (output xcal) ns-wrap)
-                       ((@ (output xcal) vcomponent->sxcal)
-                        ev)))))))
+                                       "som xCal"))))))))
              (div (@ (style "display:none !important;"))
-                  ;; NOTE This can be limited to only when edit-mode is enabled but debug
-                  ;; mode is not. That would however require a few more cases for the
-                  ;; javascript to work.
-                  ,(when (and (not (debug)) ; (edit-mode)
-                              )
-                     ((@ (output xcal) ns-wrap)
-                      ((@ (output xcal) vcomponent->sxcal)
-                       ev)))))))
+                  ,((@ (output xcal) ns-wrap)
+                    ((@ (output xcal) vcomponent->sxcal)
+                     ev))))))
 
 
 
@@ -199,9 +189,7 @@
         (inner (+ x w) (left-subtree tree))
         (inner x (right-subtree tree))))))
 
-(define* (make-block ev optional: (extra-attributes '())
-                     key:
-                     (popup-id (symbol->string (gensym "popup"))))
+(define* (make-block ev optional: (extra-attributes '()))
 
   `((a (@ (href "#" ,(html-id ev))
           (class "hidelink"))
@@ -214,12 +202,12 @@
                                   (eq? 'TENTATIVE (prop ev 'PARTSTAT)))
                          " tentative"))
                     ; (onclick "toggle_child_popup(this)")
-                    (onclick ,(format #f "toggle_popup(document.getElementById('~a'))"
+                    (onclick ,(format #f "toggle_popup('~a')"
                                       (string-append "popup" (html-id ev))))
                     )))
             ;; Inner div to prevent overflow. Previously "overflow: none"
             ;; was set on the surounding div, but the popup /needs/ to
-            ;; overflow.
+            ;; overflow (for the tabs?).
             (div (@ (class "event-body"))
              ,(when (prop ev 'RRULE)
                 `(span (@ (class "repeating")) "↺"))
@@ -229,9 +217,10 @@
                 `(span (@ (class "location"))
                        ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
                                     (prop ev 'LOCATION)))))
-            #;
-            ,(popup ev (string-append "popup" (html-id ev)) #; popup-id
-                    )))))
+            (div (@ (style "display:none !important;"))
+                 ,((@ (output xcal) ns-wrap)
+                   ((@ (output xcal) vcomponent->sxcal)
+                    ev)))))))
 
 ;; Format single event for graphical display
 (define (create-block date ev)
@@ -540,7 +529,7 @@
                (define day-date (car group))
                (define events (cdr group))
                `(div (@ (style "grid-area:short " ,i)
-                        (class "cal-cell cal-cell-short -event-container")
+                        (class "cal-cell cal-cell-short event-container")
                         (data-start ,(date->string day-date))
                         (data-end ,(date->string (add-day day-date))))
                      (div (@ (style "overflow-y:auto;"))
@@ -731,10 +720,10 @@
                                      next-start: next-start
                                      prev-start: prev-start
                                      )
+
                   ,@(for event in (stream->list
                                    (events-between pre-start post-end events))
-                         (popup event (string-append "popup" (html-id event)) #; popup-id
-                                )))
+                         (popup event (string-append "popup" (html-id event)))))
 
                  ;; Page footer
                  (footer
@@ -860,24 +849,25 @@
             ;; This would idealy be a <template> element, but there is some
             ;; form of special case with those in xhtml, but I can't find
             ;; the documentation for it.
-            (div (@ (class "template event-container") (id "event-template")
-                    ;; Only needed to create a duration. So actual dates
-                    ;; dosen't matter
-                    (data-start "2020-01-01")
-                    (data-end "2020-01-02"))
-                      ,(let ((cal (vcalendar
-                                   name: "Generated"
-                                   children: (list (vevent
-                                                    ;; The event template SHOULD lack
-                                                    ;; a UID, to stop potential problems
-                                                    ;; with conflicts when multiple it's
-                                                    ;; cloned mulitple times.
-                                                    dtstart: (datetime)
-                                                    dtend: (datetime)
-                                                    summary: "New Event")))))
-                         (caddar ; strip <a> tag
-                          (make-block (car (children cal))
-                                      `((class " generated ")))))))))))
+            ,@(let* ((cal (vcalendar
+                           name: "Generated"
+                           children: (list (vevent
+                                            ;; The event template SHOULD lack
+                                            ;; a UID, to stop potential problems
+                                            ;; with conflicts when multiple it's
+                                            ;; cloned mulitple times.
+                                            dtstart: (datetime)
+                                            dtend: (datetime)
+                                            summary: "New Event"))))
+                     (event (car (children cal))))
+                `((div (@ (class "template event-container") (id "event-template")
+                          ;; Only needed to create a duration. So actual dates
+                          ;; dosen't matter
+                          (data-start "2020-01-01")
+                          (data-end "2020-01-02"))
+                       ,(caddar          ; strip <a> tag
+                         (make-block event `((class " generated ")))))
+                  ,(popup event (string-append "popup" (html-id event))))))))))
 
 
 
diff --git a/static/script.js b/static/script.js
index f7f46c99..1bd0bb95 100644
--- a/static/script.js
+++ b/static/script.js
@@ -364,8 +364,9 @@ async function create_event (event) {
 }
 
 function place_in_edit_mode (event) {
+    let popup = document.getElementById("popup" + event.id)
     function replace_with_time_input(fieldname, event) {
-        let field = event.getElementsByClassName(fieldname)[0];
+        let field = popup.getElementsByClassName(fieldname)[0];
 
         let input = makeElement ('input', {
             type: "time",
@@ -385,6 +386,7 @@ function place_in_edit_mode (event) {
         let slot = event.properties["_slot_" + fieldname]
         let idx = slot.findIndex(e => e[0] === field);
         slot.splice(idx, 1, [input, (s, v) => s.value = v.format("%H:%M")])
+
         field.replaceWith(input);
 
     }
@@ -395,7 +397,7 @@ function place_in_edit_mode (event) {
 
     /* ---------------------------------------- */
 
-    let summary = event.getElementsByClassName("summary")[1];
+    let summary = popup.getElementsByClassName("summary")[0];
     let input = makeElement('input', {
         name: "dtstart",
         placeholder: summary.innerText,
@@ -419,7 +421,7 @@ function place_in_edit_mode (event) {
         value: 'Skapa event',
     });
 
-    let article = event.getElementsByTagName("article")[0];
+    let article = popup.getElementsByTagName("article")[0];
     article.appendChild(submit);
 
 
@@ -453,7 +455,7 @@ window.onload = function () {
             );
             c.onmouseup = eventCreator.create_event_finisher(
                 function (event) {
-                    let popupElement = event.querySelector(".popup-container");
+                    let popupElement = document.getElementById("popup" + event.id);
                     open_popup(popupElement);
 
                     popupElement.querySelector("input[name='dtstart']").focus();
@@ -573,17 +575,16 @@ function open_popup(popup) {
     let root = document.body;
     let offsetX = 0, offsetY = 0;
     while (element !== root) {
-        console.log(element);
         offsetX += element.offsetLeft;
         offsetY += element.offsetTop;
         element = element.offsetParent;
     }
-    console.table({offsetX, offsetY})
     popup.style.left = offsetX + "px";
     popup.style.top = offsetY + "px";
 }
 
-function toggle_popup(popup) {
+function toggle_popup(popup_id) {
+    let popup = document.getElementById(popup_id);
     // popup.classList.toggle("visible");
     if (popup.classList.contains("visible")) {
         close_popup(popup);
@@ -643,6 +644,7 @@ Date.prototype.format = function (str) { return format_date (this, str); }
  */
 function bind_properties (el, wide_event=false) {
     el.properties = {}
+    let popup = document.getElementById("popup" + el.id);
     let children = el.getElementsByTagName("properties")[0].children;
 
     for (let child of children) {
@@ -654,6 +656,11 @@ function bind_properties (el, wide_event=false) {
             let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt));
             lst.push([s, f]);
         }
+        for (let s of popup.getElementsByClassName(field)) {
+            let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt));
+            lst.push([s, f]);
+        }
+
         for (let s of el.querySelectorAll(field + " > :not(parameters)")) {
             switch (s.tagName) {
             case 'date':
@@ -682,6 +689,10 @@ function bind_properties (el, wide_event=false) {
     }
 
     let container = el.closest(".event-container");
+    if (container === null) {
+        console.log("No enclosing event container for", el);
+        return;
+    }
     let start = parseDate(container.dataset.start);
     let end = parseDate(container.dataset.end);
 
-- 
cgit v1.2.3