From d7f3ba99ab389f623162bb4bcb3d7a71e52337a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@hornquist.se>
Date: Mon, 30 Dec 2019 15:42:31 +0100
Subject: HTML Add current time marker.

---
 module/output/html.scm |  2 +-
 static/script.js       | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 static/style.css       |  7 +++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/module/output/html.scm b/module/output/html.scm
index 4cc39be6..f629257e 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -302,7 +302,7 @@
                     (content "Calendar for the dates between " ,(date->string start)
                              " and " ,(date->string end))))
            ,(include-css "static/style.css")
-           ;; (script (@ (src "static/script.js")) "")
+           (script (@ (src "static/script.js")) "")
            (style ,(format #f "~:{.CAL_~a { background-color: ~a; color: ~a }~%.CAL_bg_~a { border-color: ~a }~%~}"
                            (map (lambda (c)
                                   (let* ((name (html-attr (attr c 'NAME)))
diff --git a/static/script.js b/static/script.js
index a299701b..bc20cb07 100644
--- a/static/script.js
+++ b/static/script.js
@@ -3,11 +3,20 @@ function part_to_hour (f) {
     return Math.floor(10 * 24 * f) / 10;
 }
 
+function hour_to_part (hour) {
+    return 100 * (hour / 24)
+}
+
+function time_to_percent (time) {
+    // Decimal time
+    return hour_to_part(time.getHours() + (time.getMinutes() / 60)) + "%"
+}
+
 var start_time = 0
 var start_fraq = 0
 
 var parent
-var createdEvents = false
+var createdEvent = false
 
 function onmousedownhandler (e) {
     last = this
@@ -57,7 +66,41 @@ function onmouseuphandler (e) {
 
 }
 
+function time_to_date (time) {
+    return [ time.getFullYear(),
+             String(time.getMonth() + 1).padStart(2, '0'),
+             String(time.getDate()).padStart(2, '0') ].join("-");
+}
+
+var bar_object = false
+
+function update_current_time_bar () {
+    var now = new Date()
+    var today = document
+        .getElementById(time_to_date(now))
+        .parentElement
+        .parentElement
+
+    var event_area = today.getElementsByClassName("events")[0]
+
+    if (bar_object) {
+        bar_object.parentNode.removeChild(bar_object)
+    } else {
+        bar_object = document.createElement("div")
+        bar_object.className = "event current-time"
+        bar_object.id = "bar"
+    }
+
+    bar_object.style.top = time_to_percent(now)
+    event_area.append(bar_object)
+}
+
 window.onload = function () {
+
+    update_current_time_bar()
+    // once a minute for now, could probably be slowed to every 10 minutes
+    window.setInterval(update_current_time_bar, 1000 * 60)
+
     for (let c of document.getElementsByClassName("events")) {
         c.onmousedown = onmousedownhandler;
         c.onmouseup = onmouseuphandler;
diff --git a/static/style.css b/static/style.css
index e418df38..3737b069 100644
--- a/static/style.css
+++ b/static/style.css
@@ -330,3 +330,10 @@ body {
 .clock-20 { top: calc(100%/24 * 20); }
 .clock-22 { top: calc(100%/24 * 22); }
 .clock-24 { top: calc(100%/24 * 24); }
+
+.current-time {
+    width: calc(100% + 2em);
+    height: 4px;
+    background: blue;
+    left: -1em;
+}
-- 
cgit v1.2.3