From 55803c4dc76c08eea490c1f46b863b4921f080b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Sat, 11 Jul 2020 17:39:27 +0200
Subject: HTML Change template code for new events.

---
 module/output/html.scm | 36 +++++++++++++++----------------
 static/script.js       | 57 ++++++++++++--------------------------------------
 static/style.css       | 13 ++++++++++++
 3 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/module/output/html.scm b/module/output/html.scm
index fcf69888..feb68795 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -6,6 +6,7 @@
   #:use-module (vcomponent)
   #:use-module (vcomponent group)
   #:use-module (vcomponent datetime)
+  #:use-module (vcomponent build)
   #:use-module (util)
   #:use-module (util app)
   #:use-module (util exceptions)
@@ -804,25 +805,22 @@
                                              (extract 'DTSTART))
                                     (cdr (stream-car evs))))))
                       ,@(stream->list (stream-map fmt-day evs))))
-            (template (@ (id "popup-template"))
-                      (div (@ (class "popup-container"))
-                           (div (@ (class "popup"))
-                                ;; TODO have dummy calendar for events under creation
-                                (nav (@ (class "popup-control CAL_Calendar"))
-                                     ;; TODO why isn't this using the @var{btn} procedure.
-                                     (button (@ (title "Stäng") (onclick "") (class "btn close-tooltip")) (div "×")))
-                                (form
-                                 (article (@ (class "eventtext CAL_bg_Calendar"))
-                                          (h3 (input (@ (type "text")
-                                                        (name "summary")
-                                                        (placeholder "Summary")
-                                                        (required))))
-                                          (div (div (input (@ (type "time") (name "dtstart") (required)))
-                                                    " — "
-                                                    (input (@ (type "time") (name "dtend") (required))))
-                                               (textarea (@ (name "description")
-                                                            (placeholder "Description")))
-                                               (input (@ (type "submit"))))))))))))))
+
+            ;; 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") (id "event-template"))
+                      ,(let ((cal (vcalendar
+                                   name: "Generated"
+                                   children: (list (vevent
+                                                    uid: (uuidgen)
+                                                    dtstart: (datetime)
+                                                    dtend: (datetime)
+                                                    summary: "New Event")))))
+                         (caddar ; strip <a> tag
+                          (make-block (car (children cal))
+                                      `((class " generated ")
+                                        (style " width: calc(100% * var(--editmode)) ")))))))))))
 
 
 ;; file existing but is of wrong type,
diff --git a/static/script.js b/static/script.js
index e2fe5dc7..19c2d44b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -85,15 +85,15 @@ function create_event_move (e) {
         time = round_time(24 * (e.offsetY / this.clientHeight),
                           .25)
 
-        event = document.createElement("div");
+
+        event = document.getElementById("event-template").firstChild.cloneNode(true);
+        bind_properties(event);
+
         event.style.top = time * 100/24 + "%";
         event.dataset.time1 = time;
         event.dataset.time2 = time;
 
-        event.className = "event generated";
         event.style.pointerEvents = "none";
-        event.style.width = "calc(100% * var(--editmode))";
-        event.innerText = "New Event";
 
         event.dataset.date = this.id;
 
@@ -111,21 +111,17 @@ function create_event_move (e) {
         round_time(24 * (e.offsetY / event.parentElement.clientHeight),
                    .25);
     time1 = event.dataset.time1;
-    if (time2 > time1) {
-        event.style.bottom = (24 - time2) * 100/24 + "%";
-        event.style.top = time1 * 100/24 + "%";
-    } else {
-        event.style.top = time2 * 100/24 + "%";
-        event.style.bottom = (24 - time1) * 100/24 + "%";
-    }
+
+    event.properties.dtstart =
+        decimal_time_to_date(min(Number(time1), Number(time2)));
+    event.properties.dtend =
+        decimal_time_to_date(max(Number(time1), Number(time2)));
 }
 
 function create_event_finisher (callback) {
     down_on_event = false; // reset
     return function create_event_up (e) {
         if (! event) return;
-        let start = min(Number(event.dataset.time1), Number(event.dataset.time2));
-        let end = max(Number(event.dataset.time1), Number(event.dataset.time2));
 
         /* Restore pointer events for all existing events.
            Allow pointer events on our new event
@@ -137,7 +133,7 @@ function create_event_finisher (callback) {
         let localevent = event;
         event = null;
 
-        callback (localevent, start, end);
+        callback (localevent);
 
     }
 }
@@ -296,37 +292,10 @@ window.onload = function () {
             c.onmousedown = create_event_down;
             c.onmousemove = create_event_move;
             c.onmouseup = create_event_finisher(
-                function (event, start, end) {
-                    let startstr = decimal_time_to_string(start);
-                    let endstr = decimal_time_to_string(end);
-
-                    let popupElement = document
-                        .getElementById("popup-template")
-                        .content
-                        .cloneNode(true)
-                        .firstChild ;
-                    let id = gensym("popup-generated-");
-                    popupElement.id = id
-                    document.getElementsByClassName("root")[0].appendChild(popupElement);
-
-                    popupElement.querySelector('input[name="dtstart"]').value = startstr;
-                    popupElement.querySelector('input[name="dtend"]').value = endstr;
-
-                    let form = popupElement.querySelector("form")
-                    form.addEventListener("submit", function (ev) {
-                        ev.preventDefault();
-                        create_event(event.dataset.date, new FormData(form));
-                    });
-
+                function (event) {
+                    let popupElement = event.querySelector(".popup-container");
+                    /* TODO ensure input elements */
                     open_popup(popupElement);
-
-
-                    /*
-                    console.log(event);
-
-                    alert("Creating event " + startstr + " - " + endstr);
-                    */
-                    popupElement.querySelector('input[name="summary"]').focus();
                 });
         }
     }
diff --git a/static/style.css b/static/style.css
index 86444fc3..56e3763b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -745,6 +745,19 @@ along with their colors.
 	z-index: 1;
 }
 
+/* Other
+----------------------------------------
+*/
+
+.template {
+    display: none;
+}
+
+
+/* Icalendar
+----------------------------------------
+*/
+
 /* Below is for styling embedded xcalendar components in the xhtml
    document. I can't find anything about if this is allowed
    according to any standard, but it seems to work.
-- 
cgit v1.2.3