Add [today] and [jump to] button in frontend.

Currently the JavaScript updates these buttons to work, but they by
default reference backend endpoints which are not yet written.

3 files changed, 83 insertions, 9 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index bbd8ce91..3aeadd7e 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -684,6 +684,24 @@
                           ,(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) "/month"]
+                                                  [(week) "/week"]
+                                                  [else "/month"]))
+                                "idag"))
+
+                     (div (@ (class "jump-to"))
+                          (form (@ (action ,(case intervaltype
+                                              [(month) "/month"]
+                                              [(week) "/week"]
+                                              [else "/month"])))
+                                (input (@ (type date)
+                                          (name "start-date")
+                                          (value (date->string start-date "~1"))
+                                          ))
+                                ,(btn "➔"))))
 
                 (details (@ (open) (style "grid-area: cal"))
                          (summary "Month overview")
diff --git a/static/script.js b/static/script.js
index b9b6a5ba..579f4980 100644
--- a/static/script.js
+++ b/static/script.js
@@ -138,6 +138,11 @@ function update_current_time_bar () {
     current_cell = document.querySelector(
         ".small-calendar time[datetime='" + time_to_date(now) + "']");
     current_cell.style.border = "1px solid black";
+
+    /* Update [today] button */
+
+    document.getElementById("today-button").href
+        = time_to_date(new Date) + ".html";
 }
 
 function min(a, b) {
@@ -181,13 +186,35 @@ window.onload = function () {
         }
     }
 
-	document.onkeydown = function (evt) {
-		evt = evt || window.event;
-		if (evt.key.startsWith("Esc")) {
-			close_all_popups();
-		}
+    document.onkeydown = function (evt) {
+	evt = evt || window.event;
+        if (! evt.key) return;
+	if (evt.key.startsWith("Esc")) {
+	    close_all_popups();
 	}
+    }
+
 
+    /* Replace backend-driven [today] link with frontend, with one that gets
+    correctly set in the frontend.
+    Similarly, update the go to specific date button into a link which updates
+    wheneven the date form updates.
+    */
+
+    let jumpto = document.getElementsByClassName("jump-to")[0];
+    let gotodatebtn = jumpto.getElementsByTagName("button")[0];
+    let golink = document.createElement("a");
+    golink.classList.add("btn");
+    let target_href = time_to_date(new Date) + ".html";
+    document.getElementById("today-button").href = target_href;
+    golink.href = target_href;
+    golink.innerHTML = gotodatebtn.innerHTML;
+    gotodatebtn.replaceWith(golink);
+
+    jumpto.getElementsByTagName("input")[0].onchange = function () {
+        let date = time_to_date(this.valueAsDate)
+        golink.href = date + ".html";
+    }
 }
 
 $(document).ready(function() {
diff --git a/static/style.css b/static/style.css
index aad9a80c..875adc18 100644
--- a/static/style.css
+++ b/static/style.css
@@ -92,17 +92,40 @@ html, body {
 "Buttons" for changing between weekly and monthly layout
 */
 
+.calnav {
+    display: flex;
+    flex-direction: column;
+    padding-left: 2em;
+    padding-right: 2em;
+}
+
 .change-view {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
+
+    padding-top: 1ex;
+    padding-bottom: 1ex;
+}
+
+.jump-to > form {
+    display: flex;
+}
+
+.jump-to input {
+    flex-grow: 2;
+    margin-right: 1em;
 }
 
-.change-view .btn {
-    margin-top: 1ex;
-    margin-bottom: 1ex;
+.jump-to button, .jump-to a {
+    /* Same as height, figure out way to force this */
+    width: 2.5em;
 }
 
+/* button
+--------------------------------------------------
+*/
+
 .btn {
     padding: 0;
 
@@ -127,6 +150,12 @@ html, body {
     justify-content: center;
     align-items: center;
 
+    /* shouldn't be needed, but otherwise wont align with a text input
+       inside a shared flex-container.
+       It however seems to make <a> and <button> tag refuse to be the same height?
+    */
+    height: 2.5em;
+
     box-shadow: var(--btn-height) var(--btn-height) gray;
 }