Add a clock widget

It's a simple clock that shows the current time

Signed-off-by: Yarden Shoham <git@yardenshoham.com>

internal/assets/static/main.js

@@ -341,6 +341,20 @@ function afterContentReady(callback) {
     contentReadyCallbacks.push(callback);
 }
 
+function updateClocks(elements, formatter) {
+    const currentDate = new Date();
+    for (const elem of elements) {
+        elem.textContent = formatter.format(currentDate);
+    }
+}
+
+function setupClocks() {
+    const clockFormatter = new Intl.DateTimeFormat(undefined, {minute: "numeric", hour: "numeric"});
+    const elements = document.getElementsByClassName("glance-clock");
+    updateClocks(elements, clockFormatter)
+    setInterval(() => {updateClocks(elements, clockFormatter)}, 1000);
+}
+
 async function setupPage() {
     const pageElement = document.getElementById("page");
     const pageContentElement = document.getElementById("page-content");
@@ -349,6 +363,7 @@ async function setupPage() {
     pageContentElement.innerHTML = pageContent;
 
     try {
+        setupClocks()
         setupCarousels();
         setupCollapsibleLists();
         setupCollapsibleGrids();

internal/assets/templates.go

@@ -15,6 +15,7 @@ var (
 	PageTemplate                  = compileTemplate("page.html", "document.html", "page-style-overrides.gotmpl")
 	PageContentTemplate           = compileTemplate("content.html")
 	CalendarTemplate              = compileTemplate("calendar.html", "widget-base.html")
+	ClockTemplate                 = compileTemplate("clock.html", "widget-base.html")
 	BookmarksTemplate             = compileTemplate("bookmarks.html", "widget-base.html")
 	IFrameTemplate                = compileTemplate("iframe.html", "widget-base.html")
 	WeatherTemplate               = compileTemplate("weather.html", "widget-base.html")

internal/assets/templates/clock.html

@@ -0,0 +1,5 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+<div class="size-h2 color-highlight text-center glance-clock"></div>
+{{ end }}