Propagate recurring events to frontend.

This handles each instance of a recurring event as its own unique event,
which allows us to properly send it to the frontend. It's currently not
possible to submit the repeating events back, but that is probably a
underlying problem.

2 files changed, 24 insertions, 0 deletions

diff --git a/static/components/edit-rrule.ts b/static/components/edit-rrule.ts
index 6be01b76..cac19e80 100644
--- a/static/components/edit-rrule.ts
+++ b/static/components/edit-rrule.ts
@@ -17,6 +17,24 @@ class EditRRule extends ComponentVEvent {
         let frag = this.template.content.cloneNode(true) as DocumentFragment
         let body = frag.firstElementChild!
         this.replaceChildren(body);
+
+        for (let el of this.querySelectorAll('[name]')) {
+            el.addEventListener('input', () => {
+                // console.log(this);
+                let data = vcal_objects.get(this.uid)!;
+                let rrule = data.getProperty('rrule')
+                if (!rrule) {
+                    console.warn('RRUle missing from object');
+                    return;
+                }
+                rrule = rrule as RecurrenceRule
+
+                console.log(el.getAttribute('name'), (el as any).value);
+                rrule[el.getAttribute('name')!] = (el as any).value;
+                data.setProperty('rrule', rrule);
+
+            });
+        }
     }
 
     connectedCallback() {
diff --git a/static/components/vevent-edit.ts b/static/components/vevent-edit.ts
index d48c7967..5c482882 100644
--- a/static/components/vevent-edit.ts
+++ b/static/components/vevent-edit.ts
@@ -7,6 +7,7 @@ import { DateTimeInput } from './date-time-input'
 import { vcal_objects } from '../globals'
 import { VEvent, RecurrenceRule } from '../vevent'
 import { create_event } from '../server_connect'
+import { to_boolean } from '../lib'
 
 /* <vevent-edit />
    Edit form for a given VEvent. Used as the edit tab of popups.
@@ -148,6 +149,11 @@ class ComponentEdit extends ComponentVEvent {
             }
         }
 
+        let el = this.querySelector('[name="has_repeats"]')
+        if (el) {
+            (el as HTMLInputElement).checked = to_boolean(data.getProperty('rrule'))
+        }
+
         if (data.calendar) {
             for (let el of this.getElementsByClassName('calendar-selection')) {
                 (el as HTMLSelectElement).value = data.calendar;