Skip to content

Commit

Permalink
Merge pull request #22 from mel1na/implement-shutdown-status
Browse files Browse the repository at this point in the history 
Implement shutdown status
  • Loading branch information
@Hetti
Hetti authored Nov 18, 2024
2 parents 2fa9d1f + d66c5da commit f0c8238
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 19 deletions.
8 changes: 6 additions & 2 deletions index-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
8 changes: 6 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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.">
Expand Down
5 changes: 4 additions & 1 deletion location-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion location.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 13 additions & 6 deletions metalab.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
5 changes: 4 additions & 1 deletion rooms-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion rooms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
115 changes: 110 additions & 5 deletions scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,141 @@ 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://eingang.metalab.at/status.json");

if (!res.ok) {
throw new Error("Unexpected error status: " + res.status)
}

const labstatus_json = await res.json();
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);
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") {
if (lab_state === "open") {
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") {
} else if (lab_state === "closed") {
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);
throw new Error("Unexpected lab status: " + lab_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://eingang.metalab.at/doorstatus.json");

if (!res.ok) {
throw new Error("Unexpected error status: " + res.status)
}

const {status} = await res.json();
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);
const date_options = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "short",
};
if (status === "open") {
//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") {
if (door_state === "open") {
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 (door_state === "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);
throw new Error("Unexpected door status: " + door_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");
}

Expand All @@ -46,7 +148,10 @@ function setDoorFail(err) {

refreshDoorStatus().catch(setDoorFail);

// REFRESH TIMERS

setInterval(() => {
refreshLabStatus().catch(setLabFail);
refreshDoorStatus().catch(setDoorFail);
}, 30_000);

Expand Down

0 comments on commit f0c8238

Please sign in to comment.