Start moving vcal stuff to own class.

7 files changed, 372 insertions, 345 deletions

diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 5c498f0e..4852390c 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -559,7 +559,9 @@
                              ,@(when (debug)
                                  `((ul
                                     (li (button (@ (onclick "console.log(event_to_jcal(event_from_popup(this.closest('.popup-container'))));")) "js"))
-                                    (li (button (@ (onclick "console.log(jcal_to_xcal(event_to_jcal(event_from_popup(this.closest('.popup-container')))));")) "xml"))))))
+                                    (li (button (@ (onclick "console.log(jcal_to_xcal(event_to_jcal(event_from_popup(this.closest('.popup-container')))));")) "xml"))
+                                    (li (button (@ (onclick "console.log(event_from_popup(this.closest('.popup-container')))")) "this"))
+                                    ))))
                         ))
 
                   ,@(when (prop ev 'RRULE)
diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index 3f607bb7..e3b0bd3d 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -115,6 +115,7 @@
     (script (@ (defer) (src "/static/server_connect.js")))
     (script (@ (defer) (src "/static/input_list.js")))
     (script (@ (defer) (src "/static/date_time.js")))
+    (script (@ (defer) (src "/static/vcal.js")))
     (script (@ (defer) (src "/static/script.js")))
     ,(calendar-styles calendars))
 
diff --git a/module/calp/repl.scm b/module/calp/repl.scm
index d4f087aa..e6fbfe3d 100644
--- a/module/calp/repl.scm
+++ b/module/calp/repl.scm
@@ -31,4 +31,9 @@
                       [(address port) (make-tcp-server-socket host: address port: port)])
                     (string-split address #\:))]
      ;; currently impossible
-     [(IPv6) (error "How did you get here?")])))
+     [(IPv6) (error "How did you get here?")]))
+
+  ;; TODO setup repl environment here
+
+
+  )
diff --git a/static/binders.js b/static/binders.js
index 197fb368..729866f3 100644
--- a/static/binders.js
+++ b/static/binders.js
@@ -7,7 +7,7 @@
 function bind_recur(el, e) {
     /* todo bind default slots of rrule */
 
-    let p = get_property(el, 'rrule');
+    let p = el.properties.get('rrule');
     // let rrule = el.rrule;
 
     /* add listeners to bind-rr tags */
@@ -62,7 +62,7 @@ function bind_recur(el, e) {
 }
 
 function bind_edit(el, e) {
-    let p = get_property(el, e.dataset.property);
+    let p = el.properties.get(e.dataset.property);
     e.addEventListener('input', function () {
         el.properties[e.dataset.property] = this.value;
     });
@@ -89,8 +89,8 @@ function bind_edit(el, e) {
 }
 
 function bind_view(el, e) {
-        let f = (s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt);
-        get_property(el, e.dataset.property).push([e, f]);
+    let f = (s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt);
+    el.properties.get(e.dataset.property).push([e, f]);
 }
 
 
diff --git a/static/script.js b/static/script.js
index 68773231..d809cc25 100644
--- a/static/script.js
+++ b/static/script.js
@@ -19,6 +19,8 @@ class EventCreator {
         let popup = document.getElementById("popup-template")
             .firstChild.cloneNode(true);
 
+        /* TODO shouldn't this use transferListeners (or similar)?
+           See input_list.js:transferListeners */
         popup.getElementsByClassName("edit-form")[0].onsubmit = function () {
             create_event(event);
             return false; /* stop default */
@@ -113,7 +115,10 @@ class EventCreator {
                 this.appendChild(event);
 
                 /* requires that event is child of an '.event-container'. */
-                bind_properties(event, wide_element);
+                event.properties = new VComponent(
+                    event,
+                    wide_element=wide_element);
+                // bind_properties(event, wide_element);
 
                 /* requires that dtstart and dtend properties are initialized */
 
@@ -159,6 +164,8 @@ class EventCreator {
             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;
         }
@@ -187,6 +194,8 @@ class EventCreator {
     }
 }
 
+
+
 /* This incarnation of this function only adds the calendar switcher dropdown.
    All events are already editable by switching to that tab.
 
@@ -227,6 +236,8 @@ function place_in_edit_mode (event) {
     tab.querySelector("input[name='summary']").focus();
 }
 
+
+
 window.onload = function () {
     // let start_time = document.querySelector("meta[name='start-time']").content;
     // let end_time = document.querySelector("meta[name='end-time']").content;
@@ -309,9 +320,9 @@ window.onload = function () {
 
         /* Bind all vcomponent properties into javascript. */
         if (el.closest(".longevents")) {
-            bind_properties(el, true);
+            el.properties = new VComponent(el, true);
         } else {
-            bind_properties(el, false);
+            el.properties = new VComponent(el, true);
         }
 
     }
@@ -373,293 +384,3 @@ window.onload = function () {
 
 }
 
-
-/*
-  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) {
-    if (! el.properties) {
-        /* TODO only have construction once */
-        el.properties = {};
-        el.properties.ical_properties = new Set()
-    }
-
-    if (! el.properties["_slot_" + field]) {
-        el.properties["_slot_" + field] = [];
-        el.properties["_value_" + field] = default_value;
-
-        Object.defineProperty(
-            el.properties, field,
-            {
-                get: function () {
-                    return this["_value_" + field];
-                },
-                set: function (value) {
-                    this["_value_" + field] = value;
-                    for (let [slot,updater] of el.properties["_slot_" + field]) {
-                        updater(slot, value);
-                    }
-                }
-            });
-    }
-
-    return el.properties["_slot_" + field];
-}
-
-
-
-/*
-  Properties are icalendar properties.
-
-  p['name'] to get and set value (also updates any connected slots)
-
-  p['_value_name'] for raw value
-  p['_slot_name'] for connected slots, Vector of pairs, where the
-                  car should be a reference to the slot, and the
-                  cdr a procedure which takes a slot and a value
-                  and binds the value to the slot.
- */
-function bind_properties (el, wide_event=false) {
-
-    el.properties = {}
-    el.properties.ical_properties = new Set()
-    let popup = popup_from_event(el);
-    // let children = el.getElementsByTagName("properties")[0].children;
-
-    /* actual component (not popup) */
-    /*
-    for (let e of el.querySelectorAll(".bind")) {
-    }
-    */
-
-    /* bind_recur */
-
-    /* primary display tab */
-
-    let p;
-    let lst = [...popup.querySelectorAll(".bind"),
-               ...el.querySelectorAll('.bind')];
-    for (let e of lst) {
-        if ((p = e.closest('[data-bindby]'))) {
-            // console.log(p.dataset.bindby);
-            eval(p.dataset.bindby)(el, e);
-        } else {
-            let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt));
-            get_property(el, e.dataset.property).push([e, f]);
-        }
-    }
-
-    // for (let e of popup.querySelectorAll(".summary-tab .bind")) {
-    //     /* bind_view
-    //     let f = (s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt);
-    //     get_property(el, e.dataset.property).push([e, f]);
-    //     */
-    // }
-
-    /* edit tab */
-    // for (let e of popup.querySelectorAll(".edit-tab .bind")) {
-    //     /* bind-edit
-    //     let p = get_property(el, e.dataset.property);
-    //     e.addEventListener('input', function () {
-    //         el.properties[e.dataset.property] = this.value;
-    //     });
-    //     let f;
-    //     switch (e.tagName) {
-    //     case 'input':
-    //         switch (e.type) {
-    //         case 'time': f = (s, v) => s.value = v.format("~H:~M"); break;
-    //         case 'date': f = (s, v) => s.value = v.format("~Y-~m-~d"); break;
-    //         // TODO remaining types cases
-    //         default: f = (s, v) => s.value = v;
-    //         }
-    //         p.push([e, f])
-    //         break;
-    //     case 'textarea':
-    //         f = (s, v) => s.innerHTML = v;
-    //         p.push([e, f])
-    //         break;
-    //     default:
-    //         alert("How did you get here??? " + e.tagName)
-    //         break;
-    //     }
-    //     */
-    // }
-
-    /* checkbox for whole day */
-
-    for (let field of ['dtstart', 'dtend']) {
-
-        get_property(el, `--${field}-time`).push(
-            [el, (el, v) => { let date = el.properties[field];
-                             if (v == '') return;
-                             let [h,m,s] = v.split(':')
-                             date.setHours(Number(h));
-                             date.setMinutes(Number(m));
-                             date.setSeconds(0);
-                             el.properties[field] = date; }])
-        get_property(el, `--${field}-date`).push(
-            [el, (el, v) => { let date = el.properties[field];
-                             if (v == '') return;
-                             let [y,m,d] = v.split('-')
-                             date.setYear(Number(y)/* - 1900*/);
-                             date.setMonth(Number(m) - 1);
-                             date.setDate(d);
-                             el.properties[field] = date; }])
-
-
-        /* Manual fetch of the fields instead of the general method,
-           to avoid an infinite loop of dtstart setting --dtstart-time,
-           and vice versa.
-           NOTE if many more fields require special treatment then a
-           general solution is required.
-        */
-        get_property(el, field).push(
-            [el, (el, v) => { popup
-                            .querySelector(`.edit-tab input[name='${field}-time']`)
-                            .value = v.format("~H:~M");
-                            popup
-                            .querySelector(`.edit-tab input[name='${field}-date']`)
-                            .value = v.format("~Y-~m-~d");
-                            }]);
-    }
-
-    for (let property of property_names) {
-        el.properties.ical_properties.add(property)
-    }
-
-    /* icalendar properties */
-    for (let child of el.querySelector("vevent > properties").children) {
-        /* child ≡ <dtstart><date-time>...</date-time></dtstart> */
-
-        let field = child.tagName;
-        let lst = get_property(el, field);
-
-        el.properties.ical_properties.add(field)
-
-        /* Bind vcomponent fields for this event */
-        for (let s of el.querySelectorAll(`${field} > :not(parameters)`)) {
-            /* s ≡ <date-time>...</date-time> */
-
-            /* Binds value from XML-tree to javascript object
-               [parsedate]
-
-               TODO capture xcal type here, to enable us to output it to jcal later.
-            */
-            let parsedValue;
-            let type = s.tagName.toLowerCase();
-            switch (type) {
-            case 'float':
-            case 'integer':
-                parsedValue = new Number(s.innerHTML);
-                parsedValue.type = type;
-                break;
-
-            case 'date-time':
-            case 'date':
-                parsedValue = parseDate(s.innerHTML);
-                break;
-
-                /* TODO */
-            case 'duration':
-                let start = s.getElementsByTagName('start');
-                let end = s.getElementsByTagName('end, duration');
-                if (end.tagName === 'period') {
-                    parsePeriod(end.innerHTML);
-                }
-                break;
-                /* TODO */
-            case 'period':
-                parsePeriod(s.innerHTML);
-                break;
-                /* TODO */
-            case 'utc-offset':
-                break;
-
-            case 'recur':
-                parsedValue = recur_xml_to_rrule(s);
-                break;
-
-            case 'boolean':
-                switch (s.innerHTML) {
-                case 'true':  parsedValue = true; break;
-                case 'false': parsedValue = false; break;
-                default: throw "Value error"
-                }
-                break;
-
-
-            case 'binary':
-                /* Binary is going to be BASE64 decoded, allowing us to ignore
-                   it and handle it as a string for the time being */
-            case 'cal-address':
-            case 'text':
-            case 'uri':
-                /* TODO Attributes on strings doesn't work 
-                   They do however work on String:s
-                */
-                parsedValue = s.innerHTML;
-                // parsedValue.type = type;
-                break;
-
-            default:
-                parsedValue.type = 'unknown';
-                parsedValue = s.innerHTML;
-            }
-            el.properties['_value_rrule'] = parsedValue;
-        }
-    }
-
-    /* set up graphical display changes */
-    let container = el.closest(".event-container");
-    if (container === null) {
-        console.log("No enclosing event container for", el);
-        return;
-    }
-    let start = parseDate(container.dataset.start);
-    let end = parseDate(container.dataset.end);
-
-    if (el.properties.dtstart) {
-        /* [parsedate] */
-        // el.properties.dtstart = parseDate(el.properties.dtstart);
-        get_property(el, 'dtstart').push(
-            [el.style, (s, v) =>
-             s[wide_event?'left':'top'] = 100 * (to_local(v) - start)/(end - start) + "%"]);
-    }
-
-
-    if (el.properties.dtend) {
-        // el.properties.dtend = parseDate(el.properties.dtend);
-        get_property(el, 'dtend').push(
-            // TODO right and bottom only works if used from the start. However,
-            // events from the backend instead use top/left and width/height.
-            // Normalize so all use the same, or find a way to convert between.
-            [el.style,
-             (s, v) => s[wide_event?'right':'bottom'] = 100 * (1 - (to_local(v)-start)/(end-start)) + "%"]);
-    }
-
-
-    /* ---------- Calendar ------------------------------ */
-
-    if (! el.dataset.calendar) {
-        el.dataset.calendar = "Unknown";
-    }
-
-    let calprop = get_property(el, 'calendar', el.dataset.calendar);
-
-    const rplcs = (s, v) => {
-        let [_, calclass] = s.classList.find(/^CAL_/);
-        s.classList.replace(calclass, "CAL_" + v);
-    }
-
-    calprop.push([popup, rplcs]);
-    calprop.push([el, rplcs]);
-    calprop.push([el, (s, v) => s.dataset.calendar = v]);
-
-
-
-    /* ---------- Calendar ------------------------------ */
-}
diff --git a/static/server_connect.js b/static/server_connect.js
index 252d79eb..90bf819d 100644
--- a/static/server_connect.js
+++ b/static/server_connect.js
@@ -21,51 +21,6 @@ async function remove_event (element) {
     }
 }
 
-function event_to_jcal (event) {
-    let properties = [];
-
-    for (let prop of event.properties.ical_properties) {
-        let v = event.properties[prop];
-        if (v !== undefined) {
-
-            let type = 'text';
-            let value;
-
-            if (v instanceof Array) {
-            } else if (v instanceof Date) {
-                if (v.isWholeDay) {
-                    type = 'date';
-                    value = v.format("~Y-~m-~d");
-                } else {
-                    type = 'date-time';
-                    /* TODO TZ */
-                    value = v.format("~Y-~m-~dT~H:~M:~S");
-                }
-            } else if (v === true || v === false) {
-                type = 'boolean';
-                value = v;
-            } else if (typeof(v) == 'number') {
-                /* TODO float or integer */
-                type = 'integer';
-                value = v;
-            } else if (v instanceof RRule) {
-                type = 'recur';
-                value = v.asJcal();
-            }
-
-            /* TODO period */
-            else {
-                /* text types */
-                value = v;
-            }
-
-            properties.push([prop, {}, type, value]);
-        }
-    }
-
-    return ['vevent', properties, [/* alarms go here */]]
-}
-
 async function create_event (event) {
 
     // let xml = event.getElementsByTagName("icalendar")[0].outerHTML
@@ -91,7 +46,7 @@ async function create_event (event) {
          ],
          [
              /* vtimezone goes here */
-             event_to_jcal(event),
+             event.properties.to_jcal()
          ]
         ];
 
diff --git a/static/vcal.js b/static/vcal.js
new file mode 100644
index 00000000..f43de0b7
--- /dev/null
+++ b/static/vcal.js
@@ -0,0 +1,343 @@
+/*
+  Properties are icalendar properties.
+
+  p['name'] to get and set value (also updates any connected slots)
+
+  p['_value_name'] for raw value
+  p['_slot_name'] for connected slots, Vector of pairs, where the
+                  car should be a reference to the slot, and the
+                  cdr a procedure which takes a slot and a value
+                  and binds the value to the slot.
+ */
+class VComponent {
+
+    constructor(el, wide_event=false) {
+        el.properties = this;
+        this.html_element = el;
+
+        this._slots = {}
+        this._values = {}
+
+        this.ical_properties = new Set();
+
+        let popup = popup_from_event(el);
+        // let children = el.getElementsByTagName("properties")[0].children;
+
+        /* actual component (not popup) */
+        /*
+          for (let e of el.querySelectorAll(".bind")) {
+          }
+        */
+
+        /* bind_recur */
+
+        /* primary display tab */
+
+        let p;
+        let lst = [...popup.querySelectorAll(".bind"),
+                   ...el.querySelectorAll('.bind')];
+        for (let e of lst) {
+            if (e.classList.contains('summary')) {
+                console.log(e, e.closest('[data-bindby]'));
+            }
+            if ((p = e.closest('[data-bindby]'))) {
+                // console.log(p);
+                // console.log(p.dataset.bindby);
+                eval(p.dataset.bindby)(el, e);
+            } else {
+                if (e.classList.contains('summary')) {
+                    console.log (this.get(e.dataset.property));
+                }
+                let f = (s, v) => {
+                    console.log(s, v);
+                    s.innerHTML = v.format(s.dataset && s.dataset.fmt);
+                };
+                this.get(e.dataset.property).push([e, f]);
+                if (e.classList.contains('summary')) {
+                    console.log (this.get(e.dataset.property));
+                }
+                // console.log("registreing", e, e.dataset.property, this);
+            }
+        }
+
+        /* checkbox for whole day */
+
+        for (let field of ['dtstart', 'dtend']) {
+
+            this.get(`--${field}-time`).push(
+                [el, (el, v) => { let date = this[field];
+                                 if (v == '') return;
+                                 let [h,m,s] = v.split(':')
+                                 date.setHours(Number(h));
+                                 date.setMinutes(Number(m));
+                                 date.setSeconds(0);
+                                 this[field] = date; }])
+            this.get(`--${field}-date`).push(
+                [el, (el, v) => { let date = this[field];
+                                 if (v == '') return;
+                                 let [y,m,d] = v.split('-')
+                                 date.setYear(Number(y)/* - 1900*/);
+                                 date.setMonth(Number(m) - 1);
+                                 date.setDate(d);
+                                 this[field] = date; }])
+
+
+            /* Manual fetch of the fields instead of the general method,
+               to avoid an infinite loop of dtstart setting --dtstart-time,
+               and vice versa.
+               NOTE if many more fields require special treatment then a
+               general solution is required.
+            */
+            this.get(field).push(
+                [el, (el, v) => { popup
+                                 .querySelector(`.edit-tab input[name='${field}-time']`)
+                                 .value = v.format("~H:~M");
+                                 popup
+                                 .querySelector(`.edit-tab input[name='${field}-date']`)
+                                 .value = v.format("~Y-~m-~d");
+                               }]);
+        }
+
+        for (let property of property_names) {
+            this.ical_properties.add(property)
+            // console.log("prop", property)
+            Object.defineProperty(
+                this, property,
+                {
+                    get: function() {
+                        return this._values[property].value;
+                    },
+                    set: function (value) {
+                        console.log("set", property, value);
+                        this._values[property].value = value;
+                        console.log(this._slots[property]);
+                        for (let [slot,updater] of this._slots[property]) {
+                            console.log(updater, slot);
+                            updater(slot, value);
+                        }
+                    },
+                });
+        }
+
+        /* icalendar properties */
+        for (let child of el.querySelector("vevent > properties").children) {
+            /* child ≡ <dtstart><date-time>...</date-time></dtstart> */
+
+            let field = child.tagName;
+            // // let lst = get_property(el, field);
+            // let lst = this.get(field);
+
+            this.ical_properties.add(field)
+
+            /* Bind vcomponent fields for this event */
+            for (let s of el.querySelectorAll(`${field} > :not(parameters)`)) {
+                /* s ≡ <date-time>...</date-time> */
+
+                /* Binds value from XML-tree to javascript object
+                   [parsedate]
+
+                   TODO capture xcal type here, to enable us to output it to jcal later.
+                */
+                let parsedValue;
+                let type = s.tagName.toLowerCase();
+                switch (type) {
+                case 'float':
+                case 'integer':
+                    parsedValue = Number(s.innerHTML);
+                    break;
+
+                case 'date-time':
+                case 'date':
+                    parsedValue = parseDate(s.innerHTML);
+                    break;
+
+                    /* TODO */
+                case 'duration':
+                    let start = s.getElementsByTagName('start');
+                    let end = s.getElementsByTagName('end, duration');
+                    if (end.tagName === 'period') {
+                        parsePeriod(end.innerHTML);
+                    }
+                    break;
+                    /* TODO */
+                case 'period':
+                    parsedValue = parsePeriod(s.innerHTML);
+                    break;
+                    /* TODO */
+                case 'utc-offset':
+                    break;
+
+                case 'recur':
+                    parsedValue = recur_xml_to_rrule(s);
+                    break;
+
+                case 'boolean':
+                    switch (s.innerHTML) {
+                    case 'true':  parsedValue = true; break;
+                    case 'false': parsedValue = false; break;
+                    default: throw "Value error"
+                    }
+                    break;
+
+
+                case 'binary':
+                    /* Binary is going to be BASE64 decoded, allowing us to ignore
+                       it and handle it as a string for the time being */
+                case 'cal-address':
+                case 'text':
+                case 'uri':
+                    parsedValue = s.innerHTML;
+                    // parsedValue.type = type;
+                    break;
+
+                default:
+                    parsedValue = s.innerHTML;
+                }
+
+
+                // this['_value_rrule'] = new VCalParameter(type, parsedValue);
+                // console.log("set", field, type, parsedValue);
+                this._values[field] = new VCalParameter(type, parsedValue);
+                this._slots[field] = [];
+            }
+        }
+
+        /* set up graphical display changes */
+        let container = el.closest(".event-container");
+        if (container === null) {
+            console.log("No enclosing event container for", el);
+            return;
+        }
+        let start = parseDate(container.dataset.start);
+        let end = parseDate(container.dataset.end);
+
+        if (this.dtstart) {
+            /* [parsedate] */
+            // el.properties.dtstart = parseDate(el.properties.dtstart);
+            this.get('dtstart').push(
+                [el.style, (s, v) =>
+                    s[wide_event?'left':'top'] = 100 * (to_local(v.value) - start)/(end - start) + "%"]);
+        }
+
+
+        if (this.dtend) {
+            // el.properties.dtend = parseDate(el.properties.dtend);
+            this.get('dtend').push(
+                // TODO right and bottom only works if used from the start. However,
+                // events from the backend instead use top/left and width/height.
+                // Normalize so all use the same, or find a way to convert between.
+                [el.style,
+                 (s, v) => s[wide_event?'right':'bottom'] = 100 * (1 - (to_local(v.value)-start)/(end-start)) + "%"]);
+        }
+
+
+        /* ---------- Calendar ------------------------------ */
+
+        if (! el.dataset.calendar) {
+            el.dataset.calendar = "Unknown";
+        }
+
+        // let calprop = get_property(el, 'calendar', el.dataset.calendar);
+        let calprop = this.get('calendar', el.dataset.calendar);
+
+        const rplcs = (s, v) => {
+            let [_, calclass] = s.classList.find(/^CAL_/);
+            s.classList.replace(calclass, "CAL_" + v);
+        }
+
+        calprop.push([popup, rplcs]);
+        calprop.push([el, rplcs]);
+        calprop.push([el, (s, v) => s.dataset.calendar = v]);
+
+
+
+        /* ---------- Calendar ------------------------------ */
+    }
+
+
+    /*
+      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?
+    */
+    get(field, default_value) {
+        // let el = this.html_element;
+        if (! this._slots[field]) {
+            this._slots[field] = [];
+            this._values[field] = default_value;
+        }
+
+        // console.log("get", field);
+        return this._slots[field];
+    }
+
+    to_jcal() {
+        let properties = [];
+
+        /* ??? */
+        // for (let prop of event.properties.ical_properties) {
+        for (let prop of this.ical_properties) {
+            let v = this[prop];
+            if (v !== undefined) {
+                properties.push([prop] + v.to_jcal());
+            }
+        }
+
+        return ['vevent', properties, [/* alarms go here */]]
+    }
+}
+
+class VCalParameter {
+    constructor (type, value, properties={}) {
+        this.type = type;
+        this._value = value;
+        this.properties = properties;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(v) {
+        this._value = v;
+    }
+
+    to_jcal() {
+        let value;
+        switch (this.type) {
+        case 'binary':
+            /* TOOD */
+            break;
+        case 'date-time':
+            value = v.format("~Y-~m-~dT~H:~M:~S");
+            // TODO TZ
+            break;
+        case 'date':
+            value = v.format("~Y-~m-~d");
+            break;
+        case 'duration':
+            /* TODO */
+            break;
+        case 'period':
+            /* TODO */
+            break;
+        case 'utc-offset':
+            /* TODO */
+            break;
+        case 'recur':
+            value = v.asJcal();
+            break;
+
+        case 'float':
+        case 'integer':
+        case 'text':
+        case 'uri':
+        case 'cal-address':
+        case 'boolean':
+            value = v;
+        }
+        return [this.properties, this.type, value];
+    }
+}