Reduced mode and relative path

lwindolf · Feb 15, 2024 · 86370ae · 86370ae
1 parent be69f92
commit 86370ae
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/frontend/js/MultiStatus.js b/frontend/js/MultiStatus.js
@@ -12,9 +12,8 @@ class MultiStatus {
         return result;
     }
 
-    static async getData() {
-        // FIXME: read URI from attribute!
-        const response = await fetch(document.location.href.replace(/\/[^/]*$/, "") + "/data.json");
+    static async getData(path = "") {
+        const response = await fetch(path + "data.json");
         return await response.json();
         // FIXME: error handling
     }

diff --git a/frontend/js/MultiStatusCloud.js b/frontend/js/MultiStatusCloud.js
@@ -8,23 +8,28 @@ import { settingsGet } from "./settings.js";
 class MultiStatusCloud extends HTMLElement {
     // state
     #data;
+    #path;      // path where to find CSS and data.json
+    #reduced;   // true = hide everything that's fine
 
     // shadow dom
     #info;
     #cloud;
 
-    constructor(css = "css/style.css") {
+    constructor() {
         super();
 
         this.attachShadow({ mode: 'open' });
+        console.log(this.shadowRoot.host.dataset.path)
+        this.#path = this.shadowRoot.host.dataset.path;
+        this.#reduced = Number(this.shadowRoot.host.dataset.reduced) == 1;
 
         this.#cloud = document.createElement('div');
         this.#info = document.createElement('span');
         this.#info.classList.add('date');
 
         const linkElem = document.createElement("link");
         linkElem.setAttribute("rel", "stylesheet");
-        linkElem.setAttribute("href", css);
+        linkElem.setAttribute("href", this.#path + "css/style.css");
 
         this.shadowRoot.append(this.#cloud);
         this.shadowRoot.append(this.#info);
@@ -71,14 +76,23 @@ class MultiStatusCloud extends HTMLElement {
     }
 
     #renderStatus(e) {
-        MultiStatus.renderStatus(e, this.#data.aggregators[e.dataset.nr]);
+        const s = this.#data.aggregators[e.dataset.nr];
+
+        MultiStatus.renderStatus(e, s);
+
+        // Hide all good for reduced mode
+        if(this.#reduced && s.results.length == 0) {
+            e.style.display = 'none';
+        } else {
+            e.style.display = 'inline-block';
+        }
     }
 
     async #update() {
         this.#setInfo('<i>Fetching...</i>');
-
+        
         const filter = await MultiStatus.getFilter();
-        this.#data = await MultiStatus.getData();
+        this.#data = await MultiStatus.getData(this.#path);
 
         this.#setInfo(`Last updated: ${new Date(this.#data.time * 1000).toLocaleString()}`);