HTML add description on existing events.

3 files changed, 58 insertions, 19 deletions

diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 3a2bd3cc..49b24fbc 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -90,20 +90,21 @@
                                                      "~1T~3")))
                                       ,(datetime->string (as-datetime (prop ev 'DTEND))
                                                          end)))]))
-         ,(when (and=> (prop ev 'LOCATION) (negate string-null?))
-            `(div (b "Plats: ")
-                  (div (@ (class "location"))
-                       ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
-                                    (prop ev 'LOCATION)))))
-         ,(awhen (prop ev 'DESCRIPTION)
-                 `(span (@ (class "description"))
-                        ,(format-description ev it)))
-         ,(awhen (prop ev 'RRULE)
-                 `(span (@ (class "rrule"))
-                        ,@(format-recurrence-rule ev)))
-         ,(when (prop ev 'LAST-MODIFIED)
-            `(span (@ (class "last-modified")) "Senast ändrad "
-                   ,(datetime->string (prop ev 'LAST-MODIFIED) "~1 ~H:~M")))
+         (div (@ (class "fields"))
+          ,(when (and=> (prop ev 'LOCATION) (negate string-null?))
+             `(div (b "Plats: ")
+                   (div (@ (class "location"))
+                        ,(string-map (lambda (c) (if (char=? c #\,) #\newline c))
+                                     (prop ev 'LOCATION)))))
+          ,(awhen (prop ev 'DESCRIPTION)
+                  `(span (@ (class "description"))
+                         ,(format-description ev it)))
+          ,(awhen (prop ev 'RRULE)
+                  `(span (@ (class "rrule"))
+                         ,@(format-recurrence-rule ev)))
+          ,(when (prop ev 'LAST-MODIFIED)
+             `(span (@ (class "last-modified")) "Senast ändrad "
+                    ,(datetime->string (prop ev 'LAST-MODIFIED) "~1 ~H:~M"))))
 
          )))
 
diff --git a/static/lib.js b/static/lib.js
index a6f1892b..3c11e23f 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -130,3 +130,5 @@ function format_date(date, str) {
 }
 Object.prototype.format = function () { return this; } /* any number of arguments */
 Date.prototype.format = function (str) { return format_date (this, str); }
+
+const xcal = "urn:ietf:params:xml:ns:icalendar-2.0";
diff --git a/static/script.js b/static/script.js
index fbab5b72..ce57e5e1 100644
--- a/static/script.js
+++ b/static/script.js
@@ -429,9 +429,21 @@ function place_in_edit_mode (event) {
          * '.eventtext'?).
      * Biggest problem is generated fields relative order.
      */
-    let descs = popup.getElementsByClassName("description");
-    if (descs.length === 1) {
-        let description = descs[0];
+    {
+        let descs = popup.getElementsByClassName("description");
+        let description;
+        if (descs.length === 1) {
+            description = descs[0];
+        } else {
+            let fields = popup.getElementsByClassName("fields")[0]
+            description = makeElement('span', {
+                class: 'description',
+            });
+            fields.appendChild(description);
+            let slot = get_property(event, "description");
+            slot.push([description, (s, v) => s.innerHTML = v]);
+        }
+
         let textarea = makeElement('textarea', {
             name: "description",
             placeholder: "Description (optional)",
@@ -655,7 +667,14 @@ function toggle_popup(popup_id) {
 
 
 
-function get_property(el, field, default_value) {
+/*
+  Returns the _value_ slot of given field in event, creating it if needed .
+  el - the event to work on
+  field - name of the field
+  default_value - default value when creating
+  bind_to_ical - should this property be added to the icalendar subtree?
+*/
+function get_property(el, field, default_value, bind_to_ical=true) {
     if (! el.properties) {
         el.properties = {};
     }
@@ -679,6 +698,20 @@ function get_property(el, field, default_value) {
             });
     }
 
+    if (bind_to_ical) {
+        let ical_properties = el.querySelector("icalendar vevent properties");
+        if (! ical_properties.querySelector(field)) {
+            let text = document.createElementNS(xcal, 'text');
+            let element = document.createElementNS(xcal, field);
+            element.appendChild(text);
+            if (default_value) {text.innerHTML = default_value;}
+
+            ical_properties.appendChild(element);
+            el.properties["_slot_" + field].push(
+                [text, (s, v) => s.innerHTML = v]);
+        }
+    }
+
     return el.properties["_slot_" + field];
 }
 
@@ -703,6 +736,8 @@ function bind_properties (el, wide_event=false) {
         let field = child.tagName;
 
         let lst = get_property(el, field);
+
+        /* Bind HTML fields for this event */
         for (let s of el.getElementsByClassName(field)) {
             let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt));
             lst.push([s, f]);
@@ -712,6 +747,7 @@ function bind_properties (el, wide_event=false) {
             lst.push([s, f]);
         }
 
+        /* Bind vcomponent fields for this event */
         for (let s of el.querySelectorAll(field + " > :not(parameters)")) {
             switch (s.tagName) {
             case 'date':
@@ -757,7 +793,7 @@ function bind_properties (el, wide_event=false) {
         el.dataset.calendar = "Unknown";
     }
 
-    let calprop = get_property(el, 'calendar', el.dataset.calendar);
+    let calprop = get_property(el, 'calendar', el.dataset.calendar, false);
 
     const rplcs = (s, v) => {
         let [_, calclass] = s.classList.find(/^CAL_/);