Reintroduce time input on generated events for HTML.

2 files changed, 34 insertions, 0 deletions

diff --git a/static/script.js b/static/script.js
index 0338cee5..f54ab2d8 100644
--- a/static/script.js
+++ b/static/script.js
@@ -99,6 +99,36 @@ function create_event_move (e) {
 
         event.style.pointerEvents = "none";
 
+        /* ---------------------------------------- */
+
+        function replace_with_time_input(fieldname, event) {
+            let field = event.getElementsByClassName(fieldname)[0];
+
+            let input = document.createElement("input");
+            input.type = "time";
+            input.required = true;
+
+            input.onchange = function (e) {
+                // TODO capture date somewhere around here
+                let [hour, minute] = this.value.split(":").map(Number);
+                event.properties[fieldname] = new Date(0,0,0,hour,minute,0);
+            }
+            idx = event.properties["_slot_" + fieldname]
+                .findIndex(e => e[0] === field);
+            event.properties["_slot_" + fieldname].deleteIndex(idx);
+            event.properties["_slot_" + fieldname].push(
+                [input, (s, v) => s.value = v.format("%H:%M")])
+            field.replaceWith(input);
+
+        }
+
+        /* TODO dtstart < dtend */
+        replace_with_time_input("dtstart", event);
+        replace_with_time_input("dtend", event);
+
+        /* ---------------------------------------- */
+
+
         event.dataset.date = this.id;
 
         /* Makes all current events transparent when dragging over them.
diff --git a/static/style.css b/static/style.css
index 7cd36522..14588628 100644
--- a/static/style.css
+++ b/static/style.css
@@ -491,6 +491,10 @@ along with their colors.
     overflow: visible;
 }
 
+.event input {
+    white-space: initial;
+}
+
 .event-body {
     padding: 0;
     margin: 0;