4 files changed, 66 insertions, 27 deletions

diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 63b3df3b..b32bc0c4 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -235,6 +235,7 @@
                       "Heldag?"
                       `(input (@ (type "checkbox")
                                  (name "wholeday")
+                                 (onclick "wholeday_checkbox(this)")
                                  ))))
 
                   )
diff --git a/static/binders.js b/static/binders.js
index ac83b284..a3742aec 100644
--- a/static/binders.js
+++ b/static/binders.js
@@ -90,27 +90,3 @@ function bind_view(el, e) {
     let f = (s, v) => s.innerText = v.format(s.dataset && s.dataset.fmt);
     el.properties.get_callback_list(e.dataset.property).push([e, f]);
 }
-
-
-function bind_wholeday(el, e) {
-    let popup = popup_from_event(el);
-    let wholeday = popup.querySelector("input[name='wholeday']");
-    wholeday.addEventListener('click', function (event) {
-        for (let f of popup.querySelectorAll("input[type='time']")) {
-            f.disabled = wholeday.checked;
-        }
-
-        for (let f of ['dtstart', 'dtend']) {
-            let param = el.properties[f];
-            if (! param) continue; /* dtend optional */
-            let d = param.value;
-            if (wholeday.checked) {
-                param.type = 'date';
-            } else {
-                param.type = 'date-time';
-            }
-            d.isWholeDay = wholeday.checked;
-            el.properties[f] = d;
-        }
-    });
-}
diff --git a/static/globals.js b/static/globals.js
index 4ee3c62a..fd576e26 100644
--- a/static/globals.js
+++ b/static/globals.js
@@ -318,10 +318,40 @@ class DateTimeInput extends HTMLElement {
         this.innerHTML = '<input type="date" /><input type="time" />'
     }
 
+    static get observedAttributes () {
+        return [ 'dateonly' ]
+    }
+
+    attributeChangedCallback (name, from, to) {
+        console.log(this, name, boolean(from), boolean(to));
+        switch (name) {
+        case 'dateonly':
+            this.querySelector('[type="time"]').disabled = boolean(to)
+            break;
+        }
+    }
+
+    get dateonly () {
+        return boolean(this.getAttribute('dateonly'));
+    }
+
+    set dateonly (bool) {
+        this.setAttribute ('dateonly', bool);
+    }
+
     get value () {
+
+        let dt;
         let date = this.querySelector("[type='date']").value;
-        let time = this.querySelector("[type='time']").value;
-        return parseDate(date + 'T' + time)
+        if (boolean(this.getAttribute('dateonly'))) {
+            dt = parseDate(date);
+            dt.type = 'date';
+        } else {
+            let time = this.querySelector("[type='time']").value;
+            dt = parseDate(date + 'T' + time)
+            dt.type = 'date-time';
+        }
+        return dt;
     }
 
     set value (new_value) {
@@ -345,3 +375,9 @@ class DateTimeInput extends HTMLElement {
 }
 
 customElements.define('date-time-input', DateTimeInput)
+
+function wholeday_checkbox (box) {
+    box.closest('.timeinput')
+        .getElementsByTagName('date-time-input')
+        .forEach(el => el.dateonly = box.checked);
+}
diff --git a/static/lib.js b/static/lib.js
index 1d42100c..100f4161 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -129,6 +129,24 @@ function asList(thing) {
 }
 
 
+function boolean (value) {
+    switch (typeof value) {
+    case 'string':
+        switch (value) {
+        case 'true': return true;
+        case 'false': return false;
+        case '': return false;
+        default: return true;
+        }
+    case 'boolean':
+        return value;
+    default:
+        return !! value;
+    }
+}
+
+
+
 /* internal */
 function datepad(thing, width=2) {
     return (thing + "").padStart(width, "0");
@@ -159,7 +177,8 @@ function format_date(date, str) {
     }
     return outstr;
 }
-Object.prototype.format = function () { return "" + this; } /* any number of arguments */
+
+Object.prototype.format = function (/* any number of arguments */) { return "" + this; }
 Date.prototype.format = function (str) { return format_date (this, str); }
 
 /*
@@ -176,4 +195,11 @@ DOMTokenList.prototype.find = function (regexp) {
     }
 }
 
+/* HTMLCollection is the result of a querySelectorAll */
+HTMLCollection.prototype.forEach = function (proc) {
+    for (let el of this) {
+        proc(el);
+    }
+}
+
 const xcal = "urn:ietf:params:xml:ns:icalendar-2.0";