Replace today-button with web component.

3 files changed, 41 insertions, 22 deletions

diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index 00451984..53e928f6 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -150,6 +150,7 @@
          (footer
           (@ (style "grid-area: footer"))
           (span "Page generated " ,(date->string (current-date)))
+          (span "Current time " (current-time (@ (interval 1))))
           (span (a (@ (href ,(repo-url)))
                    "Source Code")))
 
@@ -166,13 +167,14 @@
                    ,(btn href: (date->string (set (day start-date) 1) "/month/~1.html")
                          "månadsvy")
 
-                   ,(btn id: "today-button"
-                         href: (string-append
-                                "/today?" (case intervaltype
-                                            [(month) "view=month"]
-                                            [(week) "view=week"]
-                                            [else ""]))
-                         "idag"))
+                   (today-button
+                    (a (@ (class "btn")
+                          (href ,(string-append
+                                  "/today?" (case intervaltype
+                                              [(month) "view=month"]
+                                              [(week) "view=week"]
+                                              [else ""]))))
+                       (div "idag"))))
 
               (div (@ (id "jump-to"))
                    ;; Firefox's accessability complain about each date
diff --git a/static/clock.js b/static/clock.js
index 9642ebaf..240041a9 100644
--- a/static/clock.js
+++ b/static/clock.js
@@ -60,15 +60,39 @@ class SmallcalCellHighlight extends Clock {
     }
 }
 
-/* Update [today] button */
-class ButtonUpdater extends Clock {
-    constructor(el, proc) {
+/* -------------------------------------------------- */
+
+class ClockElement extends HTMLElement {
+    constructor () {
         super();
-        this.el = el;
-        this.proc = proc;
     }
 
-    update(now) {
-        this.proc(this.el, now);
+    connectedCallback () {
+        let interval = this.hasAttribute('interval') ? +this.getAttribute('img') : 60;
+        interval *= 1000 /* ms */
+
+        this.timer_id = window.setInterval(() => this.update(new Date), interval)
+        this.update(new Date)
+    }
+
+    static get observerAttributes () {
+        return ['timer_id']
+    }
+
+    update (now) { /* noop */ }
+}
+
+class TodayButton extends ClockElement {
+    update (now) {
+        this.querySelector('a').href = now.format("~Y-~m-~d.html")
+    }
+}
+customElements.define('today-button', TodayButton)
+
+
+class CurrentTime extends ClockElement {
+    update (now) {
+        this.innerHTML = now.format('~H:~M:~S')
     }
 }
+customElements.define('current-time', CurrentTime)
diff --git a/static/script.js b/static/script.js
index 05ae61c5..580ee520 100644
--- a/static/script.js
+++ b/static/script.js
@@ -82,7 +82,7 @@
 //     }
 // 
 //     /*
-//       round_to: what start and end times should round to when dragging, in fractions
+//       round_to: what start and end times should round to when dragging, in fractionsb
 //       of the width of the containing container.
 // 
 //       TODO limit this to only continue when on the intended event_container.
@@ -258,11 +258,6 @@ window.addEventListener('load', function () {
     // let start_time = document.querySelector("meta[name='start-time']").content;
     // let end_time = document.querySelector("meta[name='end-time']").content;
 
-    const button_updater = new ButtonUpdater(
-        document.getElementById("today-button"),
-        (e, d) => e.href = d.format('~Y-~m-~d') + ".html"
-    );
-
     const sch = new SmallcalCellHighlight(
         document.querySelector('.small-calendar'))
 
@@ -273,7 +268,6 @@ window.addEventListener('load', function () {
     window.setInterval(() => {
         let d = new Date;
         timebar.update(d);
-        button_updater.update(d);
         sch.update(d);
     }, 1000 * 60);
 
@@ -372,7 +366,6 @@ window.addEventListener('load', function () {
         href: target_href,
         innerHTML: gotodatebtn.innerHTML,
     });
-    document.getElementById("today-button").href = target_href;
     gotodatebtn.replaceWith(golink);
 
     document.querySelector("#jump-to input[name='date']").onchange = function () {