diff options
| -rw-r--r-- | module/calp/html/view/calendar/week.scm | 10 | ||||
| -rw-r--r-- | static/globals.ts | 57 | ||||
| -rw-r--r-- | static/lib.ts | 2 | ||||
| -rw-r--r-- | static/vevent.ts | 1 |
4 files changed, 55 insertions, 15 deletions
diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm index 388c2f07..93d11c25 100644 --- a/module/calp/html/view/calendar/week.scm +++ b/module/calp/html/view/calendar/week.scm @@ -108,7 +108,7 @@ (class "vevent populate-with-uid")))) (tab-element (@ (title "Redigera")) - (span (@ (slot "label")) "📅") + (span (@ (slot "label")) "🖊") (vevent-edit (@ (slot "content") (class "populate-with-uid"))) )) @@ -195,7 +195,7 @@ (define (block-template) `(div (@ ; (id ,(html-id ev)) (data-calendar "unknown") - (class "event CAL_unknown" + (class " CAL_unknown" ;; ,(when (and (prop ev 'PARTSTAT) ;; (eq? 'TENTATIVE (prop ev 'PARTSTAT))) ;; " tentative") @@ -209,16 +209,16 @@ ;; was set on the surounding div, but the popup /needs/ to ;; overflow (for the tabs?). (div (@ (class "event-body")) - `(span (@ (class "repeating")) ; "↺" + (span (@ (class "repeating")) ; "↺" ) (span (@ (class "bind summary") (data-property "summary")) ; ,(format-summary ev (prop ev 'SUMMARY)) ) - `(span (@ (class "bind location") + (span (@ (class "bind location") (data-property "location"))) ;; Document symbol when we have text - `(span (@ (class "description")) + (span (@ (class "description")) ; "🗎" )) ) ) diff --git a/static/globals.ts b/static/globals.ts index 970de8f7..dabd6d8c 100644 --- a/static/globals.ts +++ b/static/globals.ts @@ -2,6 +2,14 @@ const vcal_objects: Map<uid, VEvent> = new Map() +interface HasValue { + value: string +} + +function hasValue(obj: any): obj is HasValue { + return 'value' in obj; +} + class ComponentVEvent extends HTMLElement { template: HTMLTemplateElement @@ -70,9 +78,13 @@ function popuplateTab(tab: HTMLElement, tabgroup: string, index: number) { let label = tab.querySelector("label")! tab.style.setProperty('--tab-index', '' + index); /* TODO this throws a number of errors, but somehow still works...? */ - input.name = tabgroup - input.id = new_id; - label.setAttribute('for', new_id); + if (input !== null) { + input.name = tabgroup + input.id = new_id; + } + if (label !== null) { + label.setAttribute('for', new_id); + } } class ComponentEdit extends ComponentVEvent { @@ -105,15 +117,19 @@ class ComponentEdit extends ComponentVEvent { this.redraw(data); - return; + // return; for (let el of this.getElementsByClassName("interactive")) { + // console.log(el); el.addEventListener('input', () => { let obj = vcal_objects.get(this.uid) if (obj === undefined) { throw 'No object with uid ' + this.uid } - if (!(el instanceof HTMLInputElement)) return; + if (!(hasValue(el) && el instanceof HTMLElement)) { + console.log(el, 'not an HTMLInputElement'); + return; + } obj.setProperty( el.dataset.property!, el.value) @@ -204,15 +220,36 @@ class ComponentBlock extends ComponentVEvent { redraw(data: VEvent) { super.redraw(data); + let p; if ((p = data.getProperty('dtstart'))) { - this.style.top = date_to_percent(to_local(p)) + "%"; + let c = this.closest('.event-container') as HTMLElement + let start = parseDate(c.dataset.start!).getTime() + let end = parseDate(c.dataset.end!).getTime(); + // console.log(p); + let pp = to_local(p).getTime() + let result = 100 * (Math.min(end, Math.max(start, pp)) - start) / (end - start) + "%" + if (c.classList.contains('longevents')) { + this.style.left = result + } else { + this.style.top = result + } // console.log('dtstart', p); } if ((p = data.getProperty('dtend'))) { - this.style.height = 'unset'; // console.log('dtend', p); - this.style.bottom = (100 - date_to_percent(to_local(p))) + "%"; + let c = this.closest('.event-container') as HTMLElement + let start = parseDate(c.dataset.start!).getTime() + let end = parseDate(c.dataset.end!).getTime(); + let pp = to_local(p).getTime() + let result = 100 - (100 * (Math.min(end, Math.max(start, pp)) - start) / (end - start)) + "%" + if (c.classList.contains('longevents')) { + this.style.width = 'unset'; + this.style.right = result; + } else { + this.style.height = 'unset'; + this.style.bottom = result; + } } } } @@ -356,6 +393,8 @@ class TabElement extends HTMLElement { if (!verifySlot(label)) throw "Bad label"; if (!verifySlot(content)) throw "Bad content"; + /* TODO set label hover title somewhere around here */ + this.replaceChildren(template.cloneNode(true)); this.querySelector('slot[name="label"]')!.replaceWith(label); this.querySelector('slot[name="content"]')!.replaceWith(content); @@ -447,7 +486,7 @@ class PopupElement extends HTMLElement { let tab = makeElement('tab-element', { title: 'Debug' }) as TabElement /// let tab = new TabElement(); tab.setAttribute('title', 'Debug') - tab.appendChild(makeElement('span', { slot: 'label', innerText: 'D' })) + tab.appendChild(makeElement('span', { slot: 'label', innerText: "🐸" })) // let dl = makeElement('dl', { slot: 'content' }) let obj = vcal_objects.get(uid)! let dl = buildDescriptionList( diff --git a/static/lib.ts b/static/lib.ts index 35b6f867..26735bd1 100644 --- a/static/lib.ts +++ b/static/lib.ts @@ -94,7 +94,7 @@ function parseDate(str: string): Date { day = +str.substr(8, 2); break; default: - throw 'Bad argument'; + throw `"${str}" doesn't look like a date/-time string` } let date; diff --git a/static/vevent.ts b/static/vevent.ts index ade5d222..20b668ee 100644 --- a/static/vevent.ts +++ b/static/vevent.ts @@ -82,6 +82,7 @@ class VEvent { } setProperty(key: string, value: any) { + console.log(key, value); let e = this.properties.get(key); if (!e) { key = key.toUpperCase() |