Add basic rrule tab.

4 files changed, 128 insertions, 2 deletions

diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm
index 6e0fbc4d..e13a0ae3 100644
--- a/module/calp/html/view/calendar/week.scm
+++ b/module/calp/html/view/calendar/week.scm
@@ -82,6 +82,9 @@
                 ,(block-template)
                 )
 
+      (template (@ (id "vevent-edit-rrule"))
+                ,(vevent-edit-rrule-template))
+
       ;; Based on popup:s output
       (template
        (@ (id "popup-template"))
@@ -108,8 +111,11 @@
                       (tab-element
                        (@ (label-title "Redigera")
                           (label "🖊"))
-                       (vevent-edit (@ (class "populate-with-uid")))
-                       )
+                       (vevent-edit (@ (class "populate-with-uid"))))
+                      (tab-element
+                       (@ (label-tile "Upprepningar")
+                          (label "↺"))
+                       (vevent-edit-rrule (@ (class "populate-with-uid"))))
                       ,@(when (debug)
                           `((tab-element
                              (@ (label-title "Debug")
@@ -148,6 +154,69 @@
                              "CONTENT MISSING")))))
       )))
 
+(define (week-day-select args)
+  `(select (@ ,@args)
+     (option "-")
+     ,@(map (lambda (x) `(option (@ (value ,(car x))) ,(cadr x)))
+            '((MO "Monday")
+              (TU "Tuesday")
+              (WE "Wednesday")
+              (TH "Thursday")
+              (FR "Friday")
+              (SA "Saturday")
+              (SU "Sunday")))))
+
+(define (vevent-edit-rrule-template)
+  `(div (@ (class "eventtext"))
+        (h2 "Upprepningar")
+        (dl
+         (dt "Frequency")
+         (dd (select (@ (name "freq"))
+               (option "-")
+               ,@(map (lambda (x) `(option (@ (value ,x)) ,(string-titlecase (symbol->string x))))
+                      '(SECONDLY MINUTELY HOURLY DAILY WEEKLY MONTHLY YEARLY))))
+
+         (dt "Until")
+         (dd (date-time-input (@ (name "until"))))
+
+         (dt "Conut")
+         (dd (input (@ (type "number") (name "count") (min 0))))
+
+         (dt "Interval")
+         (dd (input (@ (type "number") (name "interval") ; min and max depend on FREQ
+                       )))
+
+         ,@(concatenate
+            (map (lambda (pair)
+                   (define name (list-ref pair 0))
+                   (define pretty-name (list-ref pair 1))
+                   (define min (list-ref pair 2))
+                   (define max (list-ref pair 3))
+                   `((dt ,pretty-name)
+                     (dd (input-list (@ (name ,name))
+                                     (input (@ (type "number")
+                                               (min ,min) (max ,max)))))))
+                 '((bysecond "By Second" 0 60)
+                   (byminute "By Minute" 0 59)
+                   (byhour "By Hour" 0 23)
+                   (bymonthday "By Month Day" -31 31) ; except 0
+                   (byyearday "By Year Day" -366 366) ; except 0
+                   (byweekno "By Week Number" -53 53) ; except 0
+                   (bymonth "By Month" 1 12)
+                   (bysetpos "By Set Position" -366 366) ; except 0
+                   )))
+
+         ;; (dt "By Week Day")
+         ;; (dd (input-list (@ (name "byweekday"))
+         ;;                 (input (@ (type number)
+         ;;                           (min -53) (max 53) ; except 0
+         ;;                           ))
+         ;;                 ,(week-day-select '())
+         ;;                 ))
+
+         (dt "Weekstart")
+         (dd ,(week-day-select '((name "wkst")))))))
+
 ;; based on the output of fmt-single-event
 (define (description-template)
   '(div (@ (class " vevent eventtext summary-tab " ()))
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 */