Add basic rrule tab.

3 files changed, 57 insertions, 0 deletions

diff --git a/static/components/edit-rrule.ts b/static/components/edit-rrule.ts
new file mode 100644
index 00000000..a4d09083
--- /dev/null
+++ b/static/components/edit-rrule.ts
@@ -0,0 +1,51 @@
+export { EditRRule }
+
+import { ComponentVEvent } from './vevent'
+import { VEvent } from '../vevent'
+import { vcal_objects } from '../globals'
+
+import { RecurrenceRule } from '../vevent'
+
+/* <vevent-edit-rrule/> */
+class EditRRule extends ComponentVEvent {
+
+    constructor() {
+        super();
+
+        let frag = this.template.content.cloneNode(true) as DocumentFragment
+        let body = frag.firstElementChild!
+        this.replaceChildren(body);
+    }
+
+    connectedCallback() {
+        this.redraw(vcal_objects.get(this.uid)!)
+    }
+
+    redraw(data: VEvent) {
+
+        let rrule = data.getProperty('rrule')
+        if (!rrule) return;
+        rrule = rrule as RecurrenceRule
+
+        for (let el of this.querySelectorAll('[name]')) {
+
+            /*
+              el ought to be one of the tag types:
+                <input/>, <input-list/>, <select/>, and <date-time-input/>
+              Which all have `name` and `value` fields, allowing the code
+              below to work.
+            */
+
+            let name = el.getAttribute('name')
+            if (!name) {
+                console.warn(`Input without name, ${el}`)
+                continue
+            }
+
+            let value: any = rrule[name];
+            if (value)
+                (el as any).value = value;
+        }
+    }
+
+}
diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts
index 8c6d11cf..a4aaba24 100644
--- a/static/components/vevent-block.ts
+++ b/static/components/vevent-block.ts
@@ -59,5 +59,9 @@ class ComponentBlock extends ComponentVEvent {
         if (data.calendar) {
             this.dataset.calendar = data.calendar;
         }
+
+        if (data.getProperty('rrule') !== undefined) {
+            (this.getElementsByClassName('repeating')![0] as HTMLElement).innerText = '↺'
+        }
     }
 }
diff --git a/static/elements.ts b/static/elements.ts
index 720f8abb..db834fd9 100644
--- a/static/elements.ts
+++ b/static/elements.ts
@@ -6,6 +6,7 @@ import { DateTimeInput } from './components/date-time-input'
 import { PopupElement } from './components/popup-element'
 import { TabElement } from './components/tab-element'
 import { InputList } from './components/input-list'
+import { EditRRule } from './components/edit-rrule'
 
 export { initialize_components }
 
@@ -19,6 +20,7 @@ function initialize_components() {
     customElements.define('vevent-edit', ComponentEdit);
     customElements.define('vevent-dl', VEventDL);
     customElements.define('vevent-block', ComponentBlock);
+    customElements.define('vevent-edit-rrule', EditRRule);
 
     /* date-time-input should be instansiatable any time, but we do it here
     becouse why not */