From 133b507d0864b22ade563738717d04e3effbdf0a Mon Sep 17 00:00:00 2001
From: Melina <142022253+mel1na@users.noreply.github.com>
Date: Sun, 27 Oct 2024 18:53:38 +0100
Subject: [PATCH 1/3] add shutdown status to header

---
 index-de.html    |  8 +++--
 index.html       |  8 +++--
 location-de.html |  5 ++-
 location.html    |  5 ++-
 metalab.css      | 19 +++++++----
 rooms-de.html    |  5 ++-
 rooms.html       |  5 ++-
 scripts.js       | 83 +++++++++++++++++++++++++++++++++++++++++++++---
 8 files changed, 119 insertions(+), 19 deletions(-)

diff --git a/index-de.html b/index-de.html
index f66ee0e..190eff6 100644
--- a/index-de.html
+++ b/index-de.html
@@ -43,7 +43,10 @@ <h2>Hackspace im Herzen Wiens</h2>
                     c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
                 </svg>
             </div>
-            <aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
+            <div class="status-flexbox">
+                <aside class='labstatus-overlay'>Metalab ist <span id="labstatus">ladend</span></aside>
+                <aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
+            </div>
         </header>
         <nav aria-label="Main Navigation">
             <ul>
@@ -127,7 +130,8 @@ <h3>Inklusion und Barrierefreiheit</h3>
                             href="https://machs-auf.at">MACH'S AUF!</a> zusammen um den Raum für gehörlose, blinde und
                         sehbehinderte Menschen zugänglicher zu machen. </p>
                     <p> Leider ist das Metalab nicht vollständig rollstuhlgerecht, am Eingang und vor der Toilette
-                        befinden sich jeweils Stufen. Es gibt kein Leitsystem und nur wenige Beschriftungen in Braile. </p>
+                        befinden sich jeweils Stufen. Es gibt kein Leitsystem und nur wenige Beschriftungen in Braile.
+                    </p>
                 </div>
                 <figure aria-label="Vorstellung des Metalabs in Österreichischer Gebärdensprache">
                     <video muted playsinline controls poster="images/mach_s_auf_poster.webp">
diff --git a/index.html b/index.html
index 60709cb..1df9d09 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,10 @@ <h2>Hackspace in the Heart of Vienna</h2>
                     c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
                 </svg>
             </div>
-            <aside class='door-overlay'>Door is <span id="door">loading</span></aside>
+            <div class="status-flexbox">
+                <aside class='labstatus-overlay'>Metalab is <span id="labstatus">loading</span></aside>
+                <aside class='door-overlay'>Door is <span id="door">loading</span></aside>
+            </div>
         </header>
         <nav aria-label="Main Navigation">
             <ul>
@@ -121,7 +124,8 @@ <h3>Inclusivity and Accessibility</h3>
                             href="https://machs-auf.at">MACH'S AUF!</a> to make the space more inclusive towards Deaf,
                         blind, and visually impaired people. </p>
                     <p> Unfortunately, the space is not fully wheelchair accessible because there is a small staircase
-                        at the entrance and in front of the restroom. There also isn't a guidance system for blind people
+                        at the entrance and in front of the restroom. There also isn't a guidance system for blind
+                        people
                         and only a small number of braile labels. </p>
                 </div>
                 <figure aria-label="Introduction to Metalab in Austrian Sign Language.">
diff --git a/location-de.html b/location-de.html
index 5165e6b..e73384b 100644
--- a/location-de.html
+++ b/location-de.html
@@ -43,7 +43,10 @@ <h2>Hackspace im Herzen Wiens</h2>
                     c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
                 </svg>
             </div>
-            <aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
+            <div class="status-flexbox">
+                <aside class='labstatus-overlay'>Metalab ist <span id="labstatus">ladend</span></aside>
+                <aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
+            </div>
         </header>
         <nav aria-label="Main Navigation">
             <ul>
diff --git a/location.html b/location.html
index edf5430..5495b6b 100644
--- a/location.html
+++ b/location.html
@@ -43,7 +43,10 @@ <h2>Hackspace in the Heart of Vienna</h2>
                     c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
                 </svg>
             </div>
-            <aside class='door-overlay'>Door is <span id="door">loading</span></aside>
+            <div class="status-flexbox">
+                <aside class='labstatus-overlay'>Metalab is <span id="labstatus">loading</span></aside>
+                <aside class='door-overlay'>Door is <span id="door">loading</span></aside>
+            </div>
         </header>
         <nav aria-label="Main Navigation">
             <ul>
diff --git a/metalab.css b/metalab.css
index fdeab78..b9f5d7a 100644
--- a/metalab.css
+++ b/metalab.css
@@ -159,30 +159,37 @@ header>.reducedmotion {
   display: none;
 }
 
-header>.door-overlay {
+.status-flexbox {
+  display: grid;
   position: absolute;
-  right: 10px;
   top: 10px;
+  right: 10px;
+  gap: 10px;
+}
+
+.door-overlay, .labstatus-overlay {
   background-color: var(--color-1);
   font-size: 14pt;
   padding: 0.5em;
   box-shadow: 0 0 3px black;
+  cursor: help;
+  justify-self: end;
 }
 
-header>.door-overlay.failed {
+.door-overlay.failed, .labstatus-overlay.failed {
   display: none;
 }
 
-#door {
+#door, #labstatus {
   padding: 0.1em;
 }
 
-header>.door-overlay>.open {
+.door-overlay>.open, .labstatus-overlay>.open {
   background-color: var(--color-8);
   color: var(--color-2);
 }
 
-header>.door-overlay>.closed {
+.door-overlay>.closed, .labstatus-overlay>.closed {
   background-color: var(--color-3);
 }
 
diff --git a/rooms-de.html b/rooms-de.html
index f11a542..7b3f4fb 100644
--- a/rooms-de.html
+++ b/rooms-de.html
@@ -43,7 +43,10 @@ <h2>Hackspace im Herzen Wiens</h2>
                     c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
                 </svg>
             </div>
-            <aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
+            <div class="status-flexbox">
+                <aside class='labstatus-overlay'>Metalab ist <span id="labstatus">ladend</span></aside>
+                <aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
+            </div>
         </header>
         <nav aria-label="Main Navigation">
             <ul>
diff --git a/rooms.html b/rooms.html
index 04b416c..22d5192 100644
--- a/rooms.html
+++ b/rooms.html
@@ -43,7 +43,10 @@ <h2>Hackspace in the Heart of Vienna</h2>
                     c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z" />
                 </svg>
             </div>
-            <aside class='door-overlay'>Door is <span id="door">loading</span></aside>
+            <div class="status-flexbox">
+                <aside class='labstatus-overlay'>Metalab is <span id="labstatus">loading</span></aside>
+                <aside class='door-overlay'>Door is <span id="door">loading</span></aside>
+            </div>
         </header>
         <nav aria-label="Main Navigation">
             <ul>
diff --git a/scripts.js b/scripts.js
index ddf773b..86d3379 100644
--- a/scripts.js
+++ b/scripts.js
@@ -3,37 +3,107 @@ const STRINGS = {
         en: "OPEN",
         de: "OFFEN",
     },
+    open_since: {
+        en: "Open since ",
+        de: "Offen seit "
+    },
     closed: {
         en: "CLOSED",
         de: "GESCHLOSSEN",
     },
+    closed_since: {
+        en: "Closed since ",
+        de: "Geschlossen seit ",
+    },
+    last_update: {
+        en: "Last update: ",
+        de: "Letztes Update: "
+    },
 };
 
 const pageLang = new Intl.Locale(document.documentElement.lang).language;
 const selectedLang = pageLang === "de" ? "de" : "en";
 
+// LAB STATUS
+
+const labstatusElem = document.getElementById("labstatus");
+const labstatusOverlayElem = labstatusElem.closest(".labstatus-overlay");
+
+async function refreshLabStatus() {
+    const res = await fetch("https://metalab-status.gupper.systems/lab");
+
+    if (!res.ok) {
+        throw new Error("Unexpected error status: " + res.status)
+    }
+
+    const labstatus_json = await res.json();
+    var hass_state = labstatus_json.state;
+    var hass_last_changed_date = new Date(labstatus_json.last_changed_utc);
+    var hass_last_updated_date = new Date(labstatus_json.last_updated_utc);
+    var hass_last_changed_date_formatted = hass_last_changed_date.toLocaleDateString() + ', ' + hass_last_changed_date.toLocaleTimeString();
+    var hass_last_updated_date_formatted = hass_last_updated_date.toLocaleDateString() + ', ' + hass_last_updated_date.toLocaleTimeString();
+
+    if (hass_state === "on") {
+        labstatusElem.innerHTML = STRINGS.open[selectedLang];
+        labstatusOverlayElem.title = STRINGS.open_since[selectedLang] + hass_last_changed_date_formatted;
+        labstatusElem.classList.add('open');
+    } else if (hass_state === "off") {
+        labstatusElem.innerHTML = STRINGS.closed[selectedLang];
+        labstatusOverlayElem.title = STRINGS.closed_since[selectedLang] + hass_last_changed_date_formatted;
+        labstatusElem.classList.add('closed');
+    } else {
+        throw new Error("Unexpected lab status: " + hass_state);
+    }
+
+    if ((new Date().getTime() - hass_last_updated_date.getTime()) >= 900_000) { //15 minutes
+        labstatusElem.innerHTML += " (!)";
+        labstatusOverlayElem.title += "\n" + STRINGS.last_update[selectedLang] + hass_last_updated_date_formatted;
+    }
+
+    labstatusOverlayElem.classList.remove("failed");
+}
+
+function setLabFail(err) {
+    labstatusOverlayElem.classList.add("failed");
+    throw err;
+}
+
+refreshLabStatus().catch(setLabFail);
+
 // DOOR STATUS
 
 const doorElem = document.getElementById("door");
 const doorOverlayElem = doorElem.closest(".door-overlay");
 
 async function refreshDoorStatus() {
-    const res = await fetch("https://eingang.c3w.at/status.json");
+    const res = await fetch("https://metalab-status.gupper.systems/door");
 
     if (!res.ok) {
         throw new Error("Unexpected error status: " + res.status)
     }
 
-    const {status} = await res.json();
+    const doorstatus_json = await res.json();
+    var hass_state = doorstatus_json.state;
+    var hass_last_changed_date = new Date(doorstatus_json.last_changed_utc);
+    var hass_last_updated_date = new Date(doorstatus_json.last_updated_utc);
+    var hass_last_changed_date_formatted = hass_last_changed_date.toLocaleDateString() + ', ' + hass_last_changed_date.toLocaleTimeString();
+    var hass_last_updated_date_formatted = hass_last_updated_date.toLocaleDateString() + ', ' + hass_last_updated_date.toLocaleTimeString();
 
-    if (status === "open") {
+    if (hass_state === "on") {
         doorElem.innerHTML = STRINGS.open[selectedLang];
+        doorOverlayElem.title = STRINGS.open_since[selectedLang] + hass_last_changed_date_formatted;
         doorElem.classList.add('open');
-    } else if (status === "closed") {
+    } else if (hass_state === "off") {
         doorElem.innerHTML = STRINGS.closed[selectedLang];
+        doorOverlayElem.title = STRINGS.closed_since[selectedLang] + hass_last_changed_date_formatted;
         doorElem.classList.add('closed');
     } else {
-        throw new Error("Unexpected door status: " + status);
+        throw new Error("Unexpected door status: " + hass_state);
+    }
+
+    if ((new Date().getTime() - hass_last_updated_date.getTime()) >= 900_000) { //15 minutes
+        doorElem.innerHTML += " (!)";
+        doorOverlayElem.title += "\n" + STRINGS.last_update[selectedLang] + hass_last_updated_date_formatted;
     }
 
     doorOverlayElem.classList.remove("failed");
@@ -46,7 +116,10 @@ function setDoorFail(err) {
 
 refreshDoorStatus().catch(setDoorFail);
 
+// REFRESH TIMERS
+
 setInterval(() => {
+    refreshLabStatus().catch(setLabFail);
     refreshDoorStatus().catch(setDoorFail);
 }, 30_000);
 

From f095fe5a0d3a12a690055c0c1edea08b87b6fe95 Mon Sep 17 00:00:00 2001
From: Melina <142022253+mel1na@users.noreply.github.com>
Date: Mon, 28 Oct 2024 03:00:49 +0100
Subject: [PATCH 2/3] fix error with localized time returning

---
 scripts.js | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/scripts.js b/scripts.js
index 86d3379..bc50ab7 100644
--- a/scripts.js
+++ b/scripts.js
@@ -40,8 +40,20 @@ async function refreshLabStatus() {
     var hass_state = labstatus_json.state;
     var hass_last_changed_date = new Date(labstatus_json.last_changed_utc);
     var hass_last_updated_date = new Date(labstatus_json.last_updated_utc);
-    var hass_last_changed_date_formatted = hass_last_changed_date.toLocaleDateString() + ', ' + hass_last_changed_date.toLocaleTimeString();
-    var hass_last_updated_date_formatted = hass_last_updated_date.toLocaleDateString() + ', ' + hass_last_updated_date.toLocaleTimeString();
+
+    const date_options = {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+        timeZoneName: "short",
+    };
+
+    //return localized and formatted date
+    var hass_last_changed_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_changed_date);
+    var hass_last_updated_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_updated_date);
 
     if (hass_state === "on") {
         labstatusElem.innerHTML = STRINGS.open[selectedLang];
@@ -82,12 +94,24 @@ async function refreshDoorStatus() {
         throw new Error("Unexpected error status: " + res.status)
     }
 
-    const doorstatus_json = await res.json();
-    var hass_state = doorstatus_json.state;
-    var hass_last_changed_date = new Date(doorstatus_json.last_changed_utc);
-    var hass_last_updated_date = new Date(doorstatus_json.last_updated_utc);
-    var hass_last_changed_date_formatted = hass_last_changed_date.toLocaleDateString() + ', ' + hass_last_changed_date.toLocaleTimeString();
-    var hass_last_updated_date_formatted = hass_last_updated_date.toLocaleDateString() + ', ' + hass_last_updated_date.toLocaleTimeString();
+    const labstatus_json = await res.json();
+    var hass_state = labstatus_json.state;
+    var hass_last_changed_date = new Date(labstatus_json.last_changed_utc);
+    var hass_last_updated_date = new Date(labstatus_json.last_updated_utc);
+
+    const date_options = {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+        timeZoneName: "short",
+    };
+
+    //return localized and formatted date
+    var hass_last_changed_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_changed_date);
+    var hass_last_updated_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_updated_date);
 
     if (hass_state === "on") {
         doorElem.innerHTML = STRINGS.open[selectedLang];

From d66c5dafbaec3f4805b77755a17a77a8e1de91bf Mon Sep 17 00:00:00 2001
From: Melina <142022253+mel1na@users.noreply.github.com>
Date: Mon, 18 Nov 2024 21:55:28 +0100
Subject: [PATCH 3/3] change endpoints, comment unused code

---
 scripts.js | 50 +++++++++++++++++++++++++++++---------------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/scripts.js b/scripts.js
index bc50ab7..6557646 100644
--- a/scripts.js
+++ b/scripts.js
@@ -30,14 +30,15 @@ const labstatusElem = document.getElementById("labstatus");
 const labstatusOverlayElem = labstatusElem.closest(".labstatus-overlay");
 
 async function refreshLabStatus() {
-    const res = await fetch("https://metalab-status.gupper.systems/lab");
+    const res = await fetch("https://eingang.metalab.at/status.json");
 
     if (!res.ok) {
         throw new Error("Unexpected error status: " + res.status)
     }
 
     const labstatus_json = await res.json();
-    var hass_state = labstatus_json.state;
+    let lab_state = labstatus_json.status;
+    /*var hass_state = labstatus_json.state;
     var hass_last_changed_date = new Date(labstatus_json.last_changed_utc);
     var hass_last_updated_date = new Date(labstatus_json.last_updated_utc);
 
@@ -53,24 +54,27 @@ async function refreshLabStatus() {
 
     //return localized and formatted date
     var hass_last_changed_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_changed_date);
-    var hass_last_updated_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_updated_date);
+    var hass_last_updated_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_updated_date);*/
 
-    if (hass_state === "on") {
+    //if (hass_state === "on") {
+    if (lab_state === "open") {
         labstatusElem.innerHTML = STRINGS.open[selectedLang];
-        labstatusOverlayElem.title = STRINGS.open_since[selectedLang] + hass_last_changed_date_formatted;
+        //labstatusOverlayElem.title = STRINGS.open_since[selectedLang] + hass_last_changed_date_formatted;
         labstatusElem.classList.add('open');
-    } else if (hass_state === "off") {
+    //} else if (hass_state === "off") {
+    } else if (lab_state === "closed") {
         labstatusElem.innerHTML = STRINGS.closed[selectedLang];
-        labstatusOverlayElem.title = STRINGS.closed_since[selectedLang] + hass_last_changed_date_formatted;
+        //labstatusOverlayElem.title = STRINGS.closed_since[selectedLang] + hass_last_changed_date_formatted;
         labstatusElem.classList.add('closed');
     } else {
-        throw new Error("Unexpected lab status: " + hass_state);
+        //throw new Error("Unexpected lab status: " + hass_state);
+        throw new Error("Unexpected lab status: " + lab_state);
     }
 
-    if ((new Date().getTime() - hass_last_updated_date.getTime()) >= 900_000) { //15 minutes
+    /*if ((new Date().getTime() - hass_last_updated_date.getTime()) >= 900_000) { //15 minutes
         labstatusElem.innerHTML += " (!)";
         labstatusOverlayElem.title += "\n" + STRINGS.last_update[selectedLang] + hass_last_updated_date_formatted;
-    }
+    }*/
 
     labstatusOverlayElem.classList.remove("failed");
 }
@@ -88,14 +92,15 @@ const doorElem = document.getElementById("door");
 const doorOverlayElem = doorElem.closest(".door-overlay");
 
 async function refreshDoorStatus() {
-    const res = await fetch("https://metalab-status.gupper.systems/door");
+    const res = await fetch("https://eingang.metalab.at/doorstatus.json");
 
     if (!res.ok) {
         throw new Error("Unexpected error status: " + res.status)
     }
 
-    const labstatus_json = await res.json();
-    var hass_state = labstatus_json.state;
+    const doorstatus_json = await res.json();
+    let door_state = doorstatus_json.status;
+    /*var hass_state = labstatus_json.state;
     var hass_last_changed_date = new Date(labstatus_json.last_changed_utc);
     var hass_last_updated_date = new Date(labstatus_json.last_updated_utc);
 
@@ -111,24 +116,27 @@ async function refreshDoorStatus() {
 
     //return localized and formatted date
     var hass_last_changed_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_changed_date);
-    var hass_last_updated_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_updated_date);
+    var hass_last_updated_date_formatted = new Intl.DateTimeFormat(undefined, date_options).format(hass_last_updated_date);*/
 
-    if (hass_state === "on") {
+    //if (hass_state === "on") {
+        if (door_state === "open") {
         doorElem.innerHTML = STRINGS.open[selectedLang];
-        doorOverlayElem.title = STRINGS.open_since[selectedLang] + hass_last_changed_date_formatted;
+        //doorOverlayElem.title = STRINGS.open_since[selectedLang] + hass_last_changed_date_formatted;
         doorElem.classList.add('open');
-    } else if (hass_state === "off") {
+    } else if (door_state === "closed") {
+    //} else if (hass_state === "off") {
         doorElem.innerHTML = STRINGS.closed[selectedLang];
-        doorOverlayElem.title = STRINGS.closed_since[selectedLang] + hass_last_changed_date_formatted;
+        //doorOverlayElem.title = STRINGS.closed_since[selectedLang] + hass_last_changed_date_formatted;
         doorElem.classList.add('closed');
     } else {
-        throw new Error("Unexpected door status: " + hass_state);
+        //throw new Error("Unexpected door status: " + hass_state);
+        throw new Error("Unexpected door status: " + door_state);
     }
 
-    if ((new Date().getTime() - hass_last_updated_date.getTime()) >= 900_000) { //15 minutes
+    /*if ((new Date().getTime() - hass_last_updated_date.getTime()) >= 900_000) { //15 minutes
         doorElem.innerHTML += " (!)";
         doorOverlayElem.title += "\n" + STRINGS.last_update[selectedLang] + hass_last_updated_date_formatted;
-    }
+    }*/
 
     doorOverlayElem.classList.remove("failed");
 }