From 4cf9587a5188e5853bbcf97b71109e7cb9331d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 3 Oct 2021 21:54:30 +0200 Subject: work --- module/calp/html/vcomponent.scm | 19 +-- module/calp/html/view/calendar.scm | 15 +-- module/calp/html/view/calendar/week.scm | 25 ++-- static/globals.js | 30 ++++- static/script.js | 100 +++++++-------- static/style.scss | 3 + static/vevent.js | 214 ++++++++++++++++++++++++++++++++ 7 files changed, 322 insertions(+), 84 deletions(-) create mode 100644 static/vevent.js diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm index c5ae452d..1b97e9b8 100644 --- a/module/calp/html/vcomponent.scm +++ b/module/calp/html/vcomponent.scm @@ -22,6 +22,7 @@ format-summary format-recurrence-rule )) + :use-module ((calp util config) :select (get-config)) ) (define-public (compact-event-list list) @@ -203,11 +204,19 @@ `(vevent-edit (@ (class "vevent") (data-uid ,(prop ev 'UID))))) -(define-public (edit-template) +(define-public (edit-template calendars) `(div (@ (class " eventtext edit-tab ")) (form (@ (class "edit-form")) - ;; TODO actually have calendar list here, since we are just a template - (div (@ (class "dropdown-goes-here"))) + (select (@ (class "calendar-selection")) + (option "- Choose a Calendar -") + ,@(let ((dflt (get-config 'default-calendar))) + (map (lambda (calendar) + (define name (prop calendar 'NAME)) + `(option (@ (value ,(html-attr name)) + ,@(when (string=? name dflt) + '((selected)))) + ,name)) + calendars))) (h3 (input (@ (type "text") (placeholder "Sammanfattning") (name "summary") (required) @@ -605,10 +614,6 @@ `(("๐Ÿ“…" title: "Redigera" ,(fmt-for-edit ev)))) - ,@(when (debug) - `(("๐Ÿธ" title: "Debug" - (div - (pre ,(prop ev 'UID)))))) ("โค“" title: "Nedladdning" (div (@ (class "eventtext") (style "font-family:sans")) diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm index f447773d..dfcd2264 100644 --- a/module/calp/html/view/calendar.scm +++ b/module/calp/html/view/calendar.scm @@ -269,18 +269,9 @@ (or (prop (parent event) 'NAME) "")))))))) ,(prop calendar 'NAME)))) calendars)) - (div (@ (id "calendar-dropdown-template") (class "template")) - (select - (option "- Choose a Calendar -") - ,@(let ((dflt (get-config 'default-calendar))) - (map (lambda (calendar) - (define name (prop calendar 'NAME)) - `(option (@ (value ,(html-attr name)) - ,@(when (string=? name dflt) - '((selected)))) - ,name)) - calendars))) - ))) + ;; (div (@ (id "calendar-dropdown-template") (class "template")) + ;; ) + )) ;; List of events (div (@ (class "eventlist") diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm index 5361ab65..9911b162 100644 --- a/module/calp/html/view/calendar/week.scm +++ b/module/calp/html/view/calendar/week.scm @@ -22,7 +22,7 @@ ) -(define*-public (render-calendar key: events start-date end-date #:allow-other-keys) +(define*-public (render-calendar key: calendars events start-date end-date #:allow-other-keys) (let* ((long-events short-events (partition long-event? (stream->list (events-between start-date end-date events)))) (range (date-range start-date end-date))) `((script "const VIEW='week';") @@ -56,6 +56,7 @@ ,@(for event in (stream->list (events-between start-date end-date events)) `(popup-element + ;; TODO (@ (class "vevent") (data-uid ,(prop event 'UID))) ) @@ -72,7 +73,9 @@ ;; edit tab of popup (template (@ (id "vevent-edit")) - ,((@ (calp html vcomponent) edit-template))) + ,((@ (calp html vcomponent) edit-template) + calendars + )) ;; "physical" block (template (@ (id "vevent-block")) @@ -83,11 +86,11 @@ (template (@ (id "popup-template")) (div (@ ; (id ,id) - (class "popup-container CAL_" - #; - ,(html-attr (or (prop (parent ev) 'NAME) ; - "unknown"))) - (onclick "event.stopPropagation()")) + (class "popup-container CAL_" + #; + ,(html-attr (or (prop (parent ev) 'NAME) ; + "unknown"))) + (onclick "event.stopPropagation()")) (div (@ (class "popup")) (nav (@ (class "popup-control")) ,(btn "ร—" @@ -98,13 +101,15 @@ ,(tabset `(("๐Ÿ“…" title: "ร–versikt" - (vevent-description (@ (class "populate-with-uid"))) + (vevent-description + (@ (class "vevent populate-with-uid"))) ) ,@(when (edit-mode) `(("๐Ÿ“…" title: "Redigera" - (vevent-edit (@ (class "populate-with-uid")))))))))) - ) + (vevent-edit (@ (class "populate-with-uid")))))) + + ))))) ))) diff --git a/static/globals.js b/static/globals.js index 41472264..86368e9a 100644 --- a/static/globals.js +++ b/static/globals.js @@ -7,6 +7,11 @@ class ComponentVEvent extends HTMLElement { super (); this.template = document.getElementById(this.tagName); + let uid; + if ((uid = this.dataset.uid)) { + vcal_objects[uid].register(this); + } + /* We DON'T have a redraw here in the general case, since the HTML rendered server-side should be fine enough for us. Those that need a direct rerendering (such as the edit tabs) @@ -122,12 +127,13 @@ class ComponentEdit extends ComponentVEvent { } function find_popup (uid) { - for (let el of vcal_objects[uid].registered) { - if (el.tagName === 'popup-element') { - return el; - } - } - throw 'Popup not fonud'; + // for (let el of vcal_objects[uid].registered) { + // if (el.tagName === 'popup-element') { + // return el; + // } + // } + // throw 'Popup not fonud'; + return document.querySelector(`popup-element[data-uid="${uid}"]`) } function find_block (uid) { @@ -180,6 +186,7 @@ window.addEventListener('load', function () { - .block - .list */ + /* let vevent_els = document.getElementsByClassName('vevent') for (let el of vevent_els) { try { @@ -190,6 +197,7 @@ window.addEventListener('load', function () { ); } } + */ customElements.define('vevent-description', ComponentDescription); customElements.define('vevent-edit', ComponentEdit); @@ -305,6 +313,16 @@ class PopupElement extends HTMLElement { /* end nav bar */ this.replaceChildren(body); + + let that = this; + this.getElementsByClassName("calendar-selection") + .addEventListener('change', function () { + let uid = that.closest('[data-uid]').dataset.uid + let obj = vcal_objects[uid] + this.value; + // event.properties.calendar = this.value; + }); + } } diff --git a/static/script.js b/static/script.js index 5ef498f3..16ff7bbd 100644 --- a/static/script.js +++ b/static/script.js @@ -28,14 +28,14 @@ class EventCreator { /* TODO shouldn't these use transferListeners (or similar)? See input_list.js:transferListeners */ - for (let dt of popup.getElementsByClassName("date-time")) { - init_date_time_single(dt); - } + // for (let dt of popup.getElementsByClassName("date-time")) { + // init_date_time_single(dt); + // } - popup.getElementsByClassName("edit-form")[0].onsubmit = function () { - create_event(event); - return false; /* stop default */ - } + // popup.getElementsByClassName("edit-form")[0].onsubmit = function () { + // create_event(event); + // return false; /* stop default */ + // } /* -------------------- */ /* Fix tabs for newly created popup */ @@ -128,12 +128,12 @@ class EventCreator { */ let time = round_time(pos_in(this, e), round_to); - event.dataset.time1 = time; - event.dataset.time2 = time; + that.event.dataset.time1 = time; + that.event.dataset.time2 = time; /* ---------------------------------------- */ - this.appendChild(event); + this.appendChild(that.event); /* requires that event is child of an '.event-container'. */ // new VComponent( @@ -186,9 +186,11 @@ class EventCreator { let d2 = new Date(container_start.getTime() + end_in_duration) // console.log(that.event); - console.log(d1, d2); - that.event.properties.dtstart = d1; - that.event.properties.dtend = d2; + console.log(d1.format("~L~H:~M"), d2.format("~L~H:~M")); + that.event.redraw({ getProperty: (name) => + ({ dtstart: d1, dtend: d2 })[name]}); + // that.event.properties.dtstart = d1; + // that.event.properties.dtend = d2; } } @@ -204,7 +206,7 @@ class EventCreator { e.style.pointerEvents = ""; } - place_in_edit_mode(that.event); + // place_in_edit_mode(that.event); let localevent = that.event; that.event = null; @@ -222,40 +224,40 @@ class EventCreator { TODO stop requiring a weird button press to change calendar. */ -function place_in_edit_mode (event) { - let popup = document.getElementById("popup" + event.id) - let container = popup.getElementsByClassName('dropdown-goes-here')[0] - let calendar_dropdown = document.getElementById('calendar-dropdown-template').firstChild.cloneNode(true); - - let [_, calclass] = popup.classList.find(/^CAL_/); - label: { - for (let [i, option] of calendar_dropdown.childNodes.entries()) { - if (option.value === calclass.substr(4)) { - calendar_dropdown.selectedIndex = i; - break label; - } - } - /* no match, try find default calendar */ - let t; - if ((t = calendar_dropdown.querySelector("[selected]"))) { - event.properties.calendar = t.value; - } - } - - - /* Instant change while user is stepping through would be - * preferable. But I believe that