diff options
-rw-r--r-- | module/calp/html/view/calendar/week.scm | 73 | ||||
-rw-r--r-- | static/components/edit-rrule.ts | 51 | ||||
-rw-r--r-- | static/components/vevent-block.ts | 4 | ||||
-rw-r--r-- | static/elements.ts | 2 |
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 */ |