Start rework on js setup.

3 files changed, 477 insertions, 219 deletions

diff --git a/static/globals.js b/static/globals.js
new file mode 100644
index 00000000..b881c531
--- /dev/null
+++ b/static/globals.js
@@ -0,0 +1,257 @@
+"use strict";
+
+class VEventValue {
+    constructor (type, value, parameters = {}) {
+        this.type = type;
+        this.value = value;
+        this.parameters = parameters;
+    }
+}
+
+/* maybe ... */
+class VEventDuration extends VEventValue {
+}
+
+class VEvent {
+    constructor (properties = {}, components = []) {
+        this.properties = properties;
+        this.components = components;
+        this.registered = [];
+    }
+
+    getProperty (key) {
+        let e = this.properties[key];
+        if (! e) return e;
+        return e.value;
+    }
+
+    setProperty (key, value) {
+        let e = this.properties[key];
+        if (! e) {
+            let type = (valid_input_types[key.toUpperCase()] || ['unknown'])[0]
+            if (typeof type === typeof []) type = type[0];
+            e = this.properties[key] = new VEventValue(type, value);
+        } else {
+            e.value = value;
+        }
+        for (let el of this.registered) {
+            el.redraw(this);
+        }
+    }
+
+    register (htmlNode) {
+        this.registered.push(htmlNode);
+    }
+}
+
+function make_vevent_value (value_tag) {
+    /* TODO parameters */
+    return new VEventValue (value_tag.tagName, make_vevent_value_ (value_tag));
+}
+
+function make_vevent_value_ (value_tag) {
+    /* RFC6321 3.6. */
+    switch (value_tag.tagName) {
+    case 'binary':
+        /* Base64 to binary
+           Seems to handle inline whitespace, which xCal standard reqires
+           */
+        return atob(value_tag.innerHTML)
+        break;
+
+    case 'boolean':
+        switch (value_tag.innerHTML) {
+        case 'true':  return true;
+        case 'false': return false;
+        default:
+            console.warn(`Bad boolean ${value_tag.innerHTML}, defaulting with !!`)
+            return !! value_tag.innerHTML;
+        }
+        break;
+
+    case 'time':
+    case 'date':
+    case 'date-time':
+        return parseDate(value_tag.innerHTML);
+        break;
+
+    case 'duration':
+        /* TODO duration parser here 'P1D' */
+        return value_tag.innerHTML;
+        break;
+
+    case 'float':
+    case 'integer':
+        return +value_tag.innerHTML;
+        break;
+
+    case 'period':
+        /* TODO has sub components, meaning that a string wont do */
+        let start = value_tag.getElementsByTagName('start')[0]
+        parseDate(start.innerHTML);
+        let other;
+        if ((other = value_tag.getElementsByTagName('end')[0])) {
+            return parseDate(other.innerHTML)
+        } else if ((other = value_tag.getElementsByTagName('duration')[0])) {
+            /* TODO parse duration */
+            return other.innerHTML
+        } else {
+            console.warn('Invalid end to period, defaulting to 1H');
+            return new Date(3600);
+        }
+
+    case 'recur':
+        /* TODO parse */
+        return "";
+
+    case 'uc-offset':
+        /* TODO parse */
+        return "";
+
+    default:
+        console.warn(`Unknown type '${value_tag.tagName}', defaulting to string`)
+    case 'cal-address':
+    case 'uri':
+    case 'text':
+        return value_tag.innerHTML;
+    }
+}
+
+
+/* xml dom object -> class VEvent */
+function xml_to_vcal (xml) {
+    /* xml MUST have a VEVENT (or equivalent) as its root */
+    let properties = xml.getElementsByTagName('properties')[0];
+    let components = xml.getElementsByTagName('components')[0];
+
+    let property_map = {}
+    if (properties) {
+        for (var i = 0; i < properties.childElementCount; i++) {
+            let tag = properties.childNodes[i];
+            let parameters = {};
+            let value = [];
+            for (var j = 0; j < tag.childElementCount; j++) {
+                let child = tag.childNodes[j];
+                switch (tag.tagName) {
+                case 'parameters':
+                    parameters = /* handle parameters */ {};
+                    break;
+
+                    /* These can contain multiple value tags, per
+                       RFC6321 3.4.1.1. */
+                case 'categories':
+                case 'resources':
+                case 'freebusy':
+                case 'exdate':
+                case 'rdate':
+                    value.push(make_vevent_value(child));
+                    break;
+                default:
+                    value = make_vevent_value(child);
+                }
+            }
+            property_map[tag.tagName] = value;
+        }
+    }
+
+    let component_list = []
+    if (components) {
+        for (let child of components.childNodes) {
+            component_list.push(xml_to_vcal(child))
+        }
+    }
+
+    return new VEvent(property_map, component_list)
+}
+
+const vcal_objects = {};
+
+class ComponentVEvent extends HTMLElement {
+    constructor () {
+        super ();
+        this.template = document.getElementById(this.tagName);
+
+        /* We DON'T have a redraw here in the general case, since the
+           HTML rendered server-side should be fine enough for us.
+           Those that need a direct rerendering (such as the edit tabs)
+           should take care of that some other way */
+    }
+
+    redraw (data) {
+        // update ourselves from template
+
+        if (! this.template) {
+            throw "Something";
+        }
+
+        let body = this.template.content.cloneNode(true).firstElementChild;
+
+        for (let el of body.getElementsByClassName("bind")) {
+            let p = el.dataset.property;
+            let d;
+            if ((d = data.getProperty(p))) {
+                /* TODO format */
+                el.innerHTML = d;
+            }
+        }
+
+        this.replaceChildren(body);
+    }
+
+}
+
+class ComponentDescription extends ComponentVEvent {
+    constructor () {
+        super() ;
+    }
+
+}
+
+class ComponentEdit extends ComponentVEvent {
+    constructor () {
+        super();
+
+        /* Edit tab is rendered here. It's left blank server-side, since
+           it only makes sense to have something here if we have javascript */
+        this.redraw(vcal_objects[this.dataset.uid]);
+    }
+}
+
+class ComponentBlock extends ComponentVEvent {
+    constructor () {
+        super();
+    }
+}
+
+window.addEventListener('load', function () {
+
+    // let json_objects_el = document.getElementById('json-objects');
+    let div = document.getElementById('xcal-data');
+    let vevents = div.firstElementChild.childNodes;
+
+    for (let vevent of vevents) {
+        let ev = xml_to_vcal(vevent);
+        vcal_objects[ev.getProperty('uid')] = ev
+    }
+
+    /*
+      - .popup
+      - .block
+      - .list
+     */
+    let vevent_els = document.getElementsByClassName('vevent')
+    for (let el of vevent_els) {
+        try {
+            vcal_objects[el.dataset.uid].register(el);
+        } catch {
+            console.error("Invalid something, uid = ", el.dataset.uid,
+                          "el = ", el
+                         );
+        }
+    }
+
+    customElements.define('vevent-description', ComponentDescription);
+    customElements.define('vevent-edit', ComponentEdit);
+    customElements.define('vevent-block', ComponentBlock);
+})
+
diff --git a/static/script.js b/static/script.js
index a0d58c27..05ae61c5 100644
--- a/static/script.js
+++ b/static/script.js
@@ -4,211 +4,211 @@
   calp specific stuff
 */
 
-class EventCreator {
-
-    /* dynamicly created event when dragging */
-    constructor() {
-        this.event = false;
-        this.event_start = { x: NaN, y: NaN };
-        this.down_on_event = false;
-    }
-
-    create_empty_event () {
-        /* TODO this doesn't clone JS attributes */
-
-        let event = document.getElementById("event-template")
-            .firstChild.cloneNode(true);
-        let popup = document.getElementById("popup-template")
-            .firstChild.cloneNode(true);
-
-        /* -------------------- */
-        /* Manually transfer or recreate attributes which we still need */
-        /* TODO shouldn't these use transferListeners (or similar)?
-           See input_list.js:transferListeners */
-
-        for (let dt of popup.getElementsByClassName("date-time")) {
-            init_date_time_single(dt);
-        }
-
-        popup.getElementsByClassName("edit-form")[0].onsubmit = function () {
-            create_event(event);
-            return false; /* stop default */
-        }
-
-        /* -------------------- */
-        /* Fix tabs for newly created popup */
-
-        let id = gensym ("__js_event");
-
-        // TODO remove button?
-        // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))`
-
-        let tabgroup_id = gensym();
-        for (let tab of popup.querySelectorAll(".tabgroup .tab")) {
-            let new_id = gensym();
-            let input = tab.querySelector("input");
-            input.id = new_id;
-            input.name = tabgroup_id;
-            tab.querySelector("label").setAttribute('for', new_id);
-        }
-
-        let nav = popup.getElementsByClassName("popup-control")[0];
-        bind_popup_control(nav);
-
-        /* -------------------- */
-
-        // TODO download links
-
-        /* -------------------- */
-
-        event.id = id;
-        popup.id = "popup" + id;
-
-        return [popup, event];
-    }
-
-    create_event_down (intended_target) {
-        let that = this;
-        return function (e) {
-            /* Only trigger event creation stuff on actuall events background,
-               NOT on its children */
-            that.down_on_event = false;
-            if (e.target != intended_target) return;
-            that.down_on_event = true;
-
-            that.event_start.x = e.clientX;
-            that.event_start.y = e.clientY;
-        }
-    }
-
-    /*
-      round_to: what start and end times should round to when dragging, in fractions
-      of the width of the containing container.
-
-      TODO limit this to only continue when on the intended event_container.
-
-      (event → [0, 1)), 𝐑, bool → event → ()
-     */
-    create_event_move(pos_in, round_to=1, wide_element=false) {
-        let that = this;
-        return function (e) {
-            if (e.buttons != 1 || ! that.down_on_event) return;
-
-            /* Create event when we start moving the mouse. */
-            if (! that.event) {
-                /* Small deadzone so tiny click and drags aren't registered */
-                if (Math.abs(that.event_start.x - e.clientX) < 10
-                    && Math.abs(that.event_start.y - e.clientY) < 5)
-                { return; }
-
-                /* only allow start of dragging on background */
-                if (e.target != this) return;
-
-                /* only on left click */
-                if (e.buttons != 1) return;
-
-                let [popup, event] = that.create_empty_event();
-                that.event = event;
-
-                /* TODO better solution to add popup to DOM */
-                document.getElementsByTagName("main")[0].append(popup);
-
-                /* [0, 1) -- where are we in the container */
-                /* Ronud to force steps of quarters */
-                /* NOTE for in-day events a floor here work better, while for
-                   all day events I want a round, but which has the tip over point
-                   around 0.7 instead of 0.5.
-                   It might also be an idea to subtract a tiny bit from the short events
-                   mouse position, since I feel I always get to late starts.
-                */
-                let time = round_time(pos_in(this, e), round_to);
-
-                event.dataset.time1 = time;
-                event.dataset.time2 = time;
-
-                /* ---------------------------------------- */
-
-                this.appendChild(event);
-
-                /* requires that event is child of an '.event-container'. */
-                new VComponent(
-                    event,
-                    wide_element=wide_element);
-                // bind_properties(event, wide_element);
-
-                /* requires that dtstart and dtend properties are initialized */
-
-                /* ---------------------------------------- */
-
-                /* Makes all current events transparent when dragging over them.
-                   Without this weird stuff happens when moving over them
-
-                   This includes ourselves.
-                */
-                for (let e of this.children) {
-                    e.style.pointerEvents = "none";
-                }
-
-            }
-
-            let time1 = Number(that.event.dataset.time1);
-            let time2 = that.event.dataset.time2 =
-                round_time(pos_in(that.event.parentElement, e),
-                           round_to);
-
-            /* ---------------------------------------- */
-
-            let event_container = that.event.closest(".event-container");
-
-            /* These two are in UTC */
-            let container_start = parseDate(event_container.dataset.start);
-            let container_end = parseDate(event_container.dataset.end);
-
-            /* ---------------------------------------- */
-
-            /* ms */
-            let duration = container_end - container_start;
-
-            let start_in_duration = duration * Math.min(time1,time2);
-            let end_in_duration   = duration * Math.max(time1,time2);
-
-            /* Notice that these are converted to UTC, since the intervals are given
-               in utc, and I only really care about local time (which a specific local
-               timezone doesn't give me)
-            */
-            /* TODO Should these inherit UTC from container_*? */
-            let d1 = new Date(container_start.getTime() + start_in_duration)
-            let d2 = new Date(container_start.getTime() + end_in_duration)
-
-            // console.log(that.event);
-            console.log(d1, d2);
-            that.event.properties.dtstart = d1;
-            that.event.properties.dtend = d2;
-        }
-    }
-
-    create_event_finisher (callback) {
-        let that = this;
-        return function create_event_up (e) {
-            if (! that.event) return;
-
-            /* Restore pointer events for all existing events.
-               Allow pointer events on our new event
-            */
-            for (let e of that.event.parentElement.children) {
-                e.style.pointerEvents = "";
-            }
-
-            place_in_edit_mode(that.event);
-
-            let localevent = that.event;
-            that.event = null;
-
-            callback (localevent);
-
-        }
-    }
-}
+// class EventCreator {
+// 
+//     /* dynamicly created event when dragging */
+//     constructor() {
+//         this.event = false;
+//         this.event_start = { x: NaN, y: NaN };
+//         this.down_on_event = false;
+//     }
+// 
+//     create_empty_event () {
+//         /* TODO this doesn't clone JS attributes */
+// 
+//         let event = document.getElementById("event-template")
+//             .firstChild.cloneNode(true);
+//         let popup = document.getElementById("popup-template")
+//             .firstChild.cloneNode(true);
+// 
+//         /* -------------------- */
+//         /* Manually transfer or recreate attributes which we still need */
+//         /* TODO shouldn't these use transferListeners (or similar)?
+//            See input_list.js:transferListeners */
+// 
+//         for (let dt of popup.getElementsByClassName("date-time")) {
+//             init_date_time_single(dt);
+//         }
+// 
+//         popup.getElementsByClassName("edit-form")[0].onsubmit = function () {
+//             create_event(event);
+//             return false; /* stop default */
+//         }
+// 
+//         /* -------------------- */
+//         /* Fix tabs for newly created popup */
+// 
+//         let id = gensym ("__js_event");
+// 
+//         // TODO remove button?
+//         // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))`
+// 
+//         let tabgroup_id = gensym();
+//         for (let tab of popup.querySelectorAll(".tabgroup .tab")) {
+//             let new_id = gensym();
+//             let input = tab.querySelector("input");
+//             input.id = new_id;
+//             input.name = tabgroup_id;
+//             tab.querySelector("label").setAttribute('for', new_id);
+//         }
+// 
+//         let nav = popup.getElementsByClassName("popup-control")[0];
+//         bind_popup_control(nav);
+// 
+//         /* -------------------- */
+// 
+//         // TODO download links
+// 
+//         /* -------------------- */
+// 
+//         event.id = id;
+//         popup.id = "popup" + id;
+// 
+//         return [popup, event];
+//     }
+// 
+//     create_event_down (intended_target) {
+//         let that = this;
+//         return function (e) {
+//             /* Only trigger event creation stuff on actuall events background,
+//                NOT on its children */
+//             that.down_on_event = false;
+//             if (e.target != intended_target) return;
+//             that.down_on_event = true;
+// 
+//             that.event_start.x = e.clientX;
+//             that.event_start.y = e.clientY;
+//         }
+//     }
+// 
+//     /*
+//       round_to: what start and end times should round to when dragging, in fractions
+//       of the width of the containing container.
+// 
+//       TODO limit this to only continue when on the intended event_container.
+// 
+//       (event → [0, 1)), 𝐑, bool → event → ()
+//      */
+//     create_event_move(pos_in, round_to=1, wide_element=false) {
+//         let that = this;
+//         return function (e) {
+//             if (e.buttons != 1 || ! that.down_on_event) return;
+// 
+//             /* Create event when we start moving the mouse. */
+//             if (! that.event) {
+//                 /* Small deadzone so tiny click and drags aren't registered */
+//                 if (Math.abs(that.event_start.x - e.clientX) < 10
+//                     && Math.abs(that.event_start.y - e.clientY) < 5)
+//                 { return; }
+// 
+//                 /* only allow start of dragging on background */
+//                 if (e.target != this) return;
+// 
+//                 /* only on left click */
+//                 if (e.buttons != 1) return;
+// 
+//                 let [popup, event] = that.create_empty_event();
+//                 that.event = event;
+// 
+//                 /* TODO better solution to add popup to DOM */
+//                 document.getElementsByTagName("main")[0].append(popup);
+// 
+//                 /* [0, 1) -- where are we in the container */
+//                 /* Ronud to force steps of quarters */
+//                 /* NOTE for in-day events a floor here work better, while for
+//                    all day events I want a round, but which has the tip over point
+//                    around 0.7 instead of 0.5.
+//                    It might also be an idea to subtract a tiny bit from the short events
+//                    mouse position, since I feel I always get to late starts.
+//                 */
+//                 let time = round_time(pos_in(this, e), round_to);
+// 
+//                 event.dataset.time1 = time;
+//                 event.dataset.time2 = time;
+// 
+//                 /* ---------------------------------------- */
+// 
+//                 this.appendChild(event);
+// 
+//                 /* requires that event is child of an '.event-container'. */
+//                 new VComponent(
+//                     event,
+//                     wide_element=wide_element);
+//                 // bind_properties(event, wide_element);
+// 
+//                 /* requires that dtstart and dtend properties are initialized */
+// 
+//                 /* ---------------------------------------- */
+// 
+//                 /* Makes all current events transparent when dragging over them.
+//                    Without this weird stuff happens when moving over them
+// 
+//                    This includes ourselves.
+//                 */
+//                 for (let e of this.children) {
+//                     e.style.pointerEvents = "none";
+//                 }
+// 
+//             }
+// 
+//             let time1 = Number(that.event.dataset.time1);
+//             let time2 = that.event.dataset.time2 =
+//                 round_time(pos_in(that.event.parentElement, e),
+//                            round_to);
+// 
+//             /* ---------------------------------------- */
+// 
+//             let event_container = that.event.closest(".event-container");
+// 
+//             /* These two are in UTC */
+//             let container_start = parseDate(event_container.dataset.start);
+//             let container_end = parseDate(event_container.dataset.end);
+// 
+//             /* ---------------------------------------- */
+// 
+//             /* ms */
+//             let duration = container_end - container_start;
+// 
+//             let start_in_duration = duration * Math.min(time1,time2);
+//             let end_in_duration   = duration * Math.max(time1,time2);
+// 
+//             /* Notice that these are converted to UTC, since the intervals are given
+//                in utc, and I only really care about local time (which a specific local
+//                timezone doesn't give me)
+//             */
+//             /* TODO Should these inherit UTC from container_*? */
+//             let d1 = new Date(container_start.getTime() + start_in_duration)
+//             let d2 = new Date(container_start.getTime() + end_in_duration)
+// 
+//             // console.log(that.event);
+//             console.log(d1, d2);
+//             that.event.properties.dtstart = d1;
+//             that.event.properties.dtend = d2;
+//         }
+//     }
+// 
+//     create_event_finisher (callback) {
+//         let that = this;
+//         return function create_event_up (e) {
+//             if (! that.event) return;
+// 
+//             /* Restore pointer events for all existing events.
+//                Allow pointer events on our new event
+//             */
+//             for (let e of that.event.parentElement.children) {
+//                 e.style.pointerEvents = "";
+//             }
+// 
+//             place_in_edit_mode(that.event);
+// 
+//             let localevent = that.event;
+//             that.event = null;
+// 
+//             callback (localevent);
+// 
+//         }
+//     }
+// }
 
 
 
@@ -254,7 +254,7 @@ function place_in_edit_mode (event) {
 
 
 
-window.onload = function () {
+window.addEventListener('load', function () {
     // let start_time = document.querySelector("meta[name='start-time']").content;
     // let end_time = document.querySelector("meta[name='end-time']").content;
 
@@ -280,7 +280,7 @@ window.onload = function () {
     init_date_time();
 
     /* Is event creation active? */
-    if (EDIT_MODE) {
+    if (false && EDIT_MODE) {
         let eventCreator = new EventCreator;
         for (let c of document.getElementsByClassName("events")) {
             c.onmousedown = eventCreator.create_event_down(c);
@@ -336,17 +336,17 @@ window.onload = function () {
         el.parentElement.removeAttribute("href");
 
         let popup = document.getElementById("popup" + el.id);
-        popup.getElementsByClassName("edit-form")[0].onsubmit = function () {
-            create_event(el);
-            return false; /* stop default */
-        }
+        // popup.getElementsByClassName("edit-form")[0].onsubmit = function () {
+        //     create_event(el);
+        //     return false; /* stop default */
+        // }
 
         /* Bind all vcomponent properties into javascript. */
-        if (el.closest(".longevents")) {
-            new VComponent(el, true);
-        } else {
-            new VComponent(el, false);
-        }
+        // if (el.closest(".longevents")) {
+        //     new VComponent(el, true);
+        // } else {
+        //     new VComponent(el, false);
+        // }
 
     }
 
@@ -402,7 +402,7 @@ window.onload = function () {
 
     // init_arbitary_kv();
 
-    init_input_list();
+    // init_input_list();
 
 
     document.addEventListener('keydown', function (event) {
@@ -413,5 +413,4 @@ window.onload = function () {
             event.preventDefault();
         }
     });
-}
-
+})
diff --git a/static/vcal.js b/static/vcal.js
index 93cfc028..f86c7f65 100644
--- a/static/vcal.js
+++ b/static/vcal.js
@@ -9,6 +9,8 @@
                   cdr a procedure which takes a slot and a value
                   and binds the value to the slot.
  */
+
+/* DEPRECATED */
 class VComponent {
 
     constructor(el, wide_event=false) {