Set up dashboard integration for links

src/hazel/data/DashboardDataProvider.cpp

@@ -78,7 +78,7 @@ void DashboardDataProvider::update() {
             });
         }
         if (sleepTime == std::numeric_limits<long long>::max()) {
-            spdlog::warn("sleepTime is the max long value. The dashboard probably doesn't have anything in it that needs updates. Stopping update thread");
+            spdlog::warn("sleepTime is the max long value. The dashboard probably doesn't have anything in it that needs updates. Stopping update thread. If this is wrong, please open a bug report: https://github.com/LunarWatcher/hazel/issues/");
             break;
         }
         spdlog::debug("Dashboard data refreshed (dirty = {}). Sleeping for {}", dirty, sleepTime);

src/hazel/data/dashboard/DashboardUpdaters.cpp

@@ -62,7 +62,7 @@ void Updaters::Links::updatePihole(DashboardLinkModule& link) {
     auto& fields = link.fields;
     fields["Queries today"] = std::to_string(json.at("dns_queries_today").get<long long>());
     fields["Blocked today"] = std::to_string(json.at("ads_blocked_today").get<long long>());
-    fields["Blocked percent"] = std::to_string(json.at("ads_percentage_today").get<long long>());
+    fields["Blocked percent"] = std::to_string(json.at("ads_percentage_today").get<double>()) + "%";
 }
 void Updaters::Links::updateMiniflux(DashboardLinkModule& link) {
 }

www/assets/base.js

@@ -1,13 +1,93 @@
+function refreshLinks(links) {
+    let targetContainer = document.getElementById("links");
+    if (targetContainer == null) {
+        console.log("Failed to get link container");
+        return;
+    }
+
+    for (let link of links) {
+        // Unsafe?
+        let elem = document.querySelector("[data-title=\"" + link.title + "\"]");
+        if (elem == null) {
+            // Link container
+            elem = targetContainer.appendChild(document.createElement("div"));
+            elem.setAttribute("data-title", link.title);
+            elem.classList.add("small-paragraphs", "link-container");
+
+            // Logo and content container
+            let titleLink = elem.appendChild(document.createElement("a"));
+            titleLink.href = encodeURI(link.url);
+            titleLink.classList.add("flex-horizontal");
+
+
+            let left = titleLink.appendChild(document.createElement("div"));
+            left.classList.add("link-logo");
+
+            let right = titleLink.appendChild(document.createElement("div"));
+            right.classList.add("link-content");
+
+            let top = right.appendChild(document.createElement("div"));
+            top.classList.add("link-top");
+
+            let title = top.appendChild(document.createElement("p"));
+            title.classList.add("link-title");
+            title.innerText = link.title;
+
+
+
+        }
+
+        let fields = elem.getElementsByClassName("link-fields");
+        if (fields == null || fields.length != 1) {
+            if (Object.keys(link.fields).length > 0) {
+                // (Re)create the field container
+                let bottom = elem.getElementsByClassName("link-content")[0].appendChild(document.createElement("div"));
+                bottom.classList.add("link-fields", "flex-horizontal");
+                fields = [bottom];
+            } else {
+                // The container doesn't exist, and there aren't any links; everything is fine, continue
+                continue;
+            }
+        }
+
+        let fieldContainer = fields[0];
+
+        if (link.fields && Object.keys(link.fields).length > 0) {
+            for (const [field, value] of Object.entries(link.fields)) {
+                let fieldElem = fieldContainer.querySelector("[data-field-title=\"" + field + "\"]");
+                if (fieldElem == null) {
+                    fieldElem = fieldContainer.appendChild(document.createElement("div"));
+                    fieldElem.classList.add("link-field");
+                    let title = fieldElem.appendChild(document.createElement("p"));
+                    title.setAttribute("data-field-title", field);
+                    title.innerText = field;
+                    title.classList.add("field-title");
+
+                    let valueField = fieldElem.appendChild(document.createElement("p"));
+                    valueField.classList.add("field-value");
+                }
+                fieldElem.getElementsByClassName("field-value")[0].innerText = value;
+            }
+        } else {
+            // Wipe fields if the server suddenly returns none
+            fieldContainer.remove();
+        }
+
+    }
+}
+
 function updateDashboard() {
     fetch("/api/dashboard")
         .then((res) => {
             // TODO handle bad status code
             return res.json();
         })
         .then((json) => {
-            console.log(json);
+            if ("links" in json && json["links"] != null) {
+                refreshLinks(json["links"]);
+            }
         });
 }
 
 updateDashboard();
-setInterval(updateDashboard, 30000);
+setInterval(updateDashboard, 6000);

www/assets/style.css

@@ -36,6 +36,11 @@ nav a {
     margin: 0;
 }
 
+.small-paragraphs p {
+    margin: 0;
+    padding: 0;
+}
+
 /* Content width container {{{*/
 .container {
     width: 90%;
@@ -82,5 +87,70 @@ a:hover {
 }
 /* }}}*/
 /* Flexboxes {{{ */
+.flex-vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    flex: 1 0 auto;
+}
 
+.flex-horizontal {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    flex: 1 0 auto;
+}
 /* }}}*/
+/* Links {{{ */ 
+.link-container {
+    box-sizing: border-box;
+    border-radius: 5px;
+    max-width: 300px;
+    border: 2px solid var(--colour-primary);
+}
+.link-container > a {
+    text-decoration: none;
+    /* No gaps between the logo and the link content, mainly to 
+     * make sure the border between the link title and fields
+     * doesn't look out of place
+     */
+    gap: 0px;
+    height: 100%;
+}
+.link-top {
+    padding: 5px;
+    box-sizing: border-box;
+}
+.link-fields {
+    gap: 0px;
+}
+
+.field-title {
+    font-size: 0.8em;
+    text-align: center;
+}
+.field-value {
+    font-size: 0.7em;
+    text-align: center;
+}
+
+.link-field {
+    border-top: 2px solid var(--colour-primary);
+    box-sizing: border-box;
+    padding: 1px;
+}
+.link-fields:hover, .link-fields:visited, .link-fields {
+    color: black;
+    text-decoration: none;
+}
+
+.link-field:not(:nth-last-child(1)) {
+    border-right: 2px solid var(--colour-primary);
+}
+
+.link-title {
+    font-size: 1.3em;
+    text-decoration: underline;
+}
+
+/* }}} */

www/index.mustache

@@ -1,3 +1,3 @@
 <h1>Dashboard</h1>
 
-<div id="links"></div>
+<div id="links" class="flex-horizontal"></div>