Fix frontend for calendar choosing.

4 files changed, 49 insertions, 3 deletions

diff --git a/module/html/vcomponent.scm b/module/html/vcomponent.scm
index 5123af09..3fac17bb 100644
--- a/module/html/vcomponent.scm
+++ b/module/html/vcomponent.scm
@@ -168,10 +168,13 @@
 
 
 (define-public (popup ev id)
-  `(div (@ (class "popup-container") (id ,id)
+  `(div (@ (id ,id) (class "popup-container CAL_" 
+                           ,(html-attr (or (prop (parent ev) 'NAME)
+                                           "unknown"))) 
            (onclick "event.stopPropagation()"))
-        (div (@ (class "popup CAL_" ,(html-attr (or (prop (parent ev) 'NAME)
-                                                    "unknown"))) )
+        ;; TODO all (?) code uses .popup-container as the popup, while .popup sits and does nothing.
+        ;; Do something about this?
+        (div (@ (class "popup"))
              (nav (@ (class "popup-control"))
                   ,(btn "×"
                         title: "Stäng"
diff --git a/module/html/view/calendar.scm b/module/html/view/calendar.scm
index 3c239bc6..72fcccbd 100644
--- a/module/html/view/calendar.scm
+++ b/module/html/view/calendar.scm
@@ -290,6 +290,7 @@
                                calendars))
                         (div (@ (id "calendar-dropdown-template") (class "template"))
                              (select
+                               (option "- Choose a Calendar -")
                                ,@(map (lambda (calendar)
                                         `(option (@ (value ,(html-attr (prop calendar 'NAME))))
                                                  ,(prop calendar 'NAME)))
diff --git a/static/script.js b/static/script.js
index 0385ac5a..ed133a2d 100644
--- a/static/script.js
+++ b/static/script.js
@@ -122,6 +122,21 @@ function bind_popup_control (nav) {
     });
 }
 
+/*
+ * Finds the first element of the DOMTokenList whichs value matches
+ * the supplied regexp. Returns a pair of the index and the value.
+ */
+DOMTokenList.prototype.find = function (regexp) {
+    console.log(this);
+    let entries = this.entries();
+    let entry;
+    while (! (entry = entries.next()).done) {
+        if (entry.value[1].match(regexp)) {
+            return entry.value;
+        }
+    }
+}
+
 class EventCreator {
 
     /* dynamicly created event when dragging */
@@ -505,6 +520,29 @@ function place_in_edit_mode (event) {
 
     let evtext = popup.getElementsByClassName('eventtext')[0]
     let calendar_dropdown = document.getElementById('calendar-dropdown-template').firstChild.cloneNode(true);
+
+    let [_, calclass] = popup.classList.find(/^CAL_/);
+    for (let [i, option] of calendar_dropdown.childNodes.entries()) {
+        if (option.value === calclass.substr(4)) {
+            calendar_dropdown.selectedIndex = i;
+            break;
+        }
+    }
+
+    /* Instant change while user is stepping through would be
+     * preferable. But I believe that <option> first gives us the
+     * input once selected */
+    calendar_dropdown.onchange = function () {
+        let popup = this.closest('.popup-container')
+        let event = document.getElementById(popup.id.substr(5))
+
+        let [_, calclass] = popup.classList.find(/^CAL_/);
+
+        popup.classList.replace(calclass, "CAL_" + this.value)
+        event.classList.replace(calclass, "CAL_" + this.value)
+
+
+    }
     evtext.prepend(calendar_dropdown);
 
     /* ---------------------------------------- */
diff --git a/static/style.css b/static/style.css
index 719cca1c..21543388 100644
--- a/static/style.css
+++ b/static/style.css
@@ -742,6 +742,10 @@ along with their colors.
 
     cursor: grab;
     background-color: var(--color);
+    /* Transition for background color 
+     * Matches that of '.event'.
+     * TODO break out to common place */
+    transition: 0.3s;
 }
 
 .popup-control .btn {