Skip to content

Commit

Permalink
Live door status updates and JS refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@iro-miya @anlumo
iro-miya authored and anlumo committed Apr 21, 2024
1 parent e91c8b3 commit 87aef3c
Show file tree
Hide file tree
Showing 7 changed files with 77 additions and 246 deletions.
39 changes: 1 addition & 38 deletions index-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>

<body>
Expand Down Expand Up @@ -43,30 +44,6 @@ <h2>Hackspace im Herzen Wiens</h2>
</svg>
</div>
<aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
<!--determine door status-->
<script type="text/javascript">
fetch("https://eingang.c3w.at/status.json").then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
if (json) {
const element = document.getElementById("door");
if (json.status === "open") {
element.innerHTML = "OFFEN";
element.classList.add('open');
return;
} else if (json.status === "closed") {
element.innerHTML = "GESCHLOSSEN";
element.classList.add('closed');
return;
}
}
document.querySelector('.door-overlay').classList.add('failed');
}).catch(() => {
document.querySelector('.door-overlay').classList.add('failed');
});
</script>
</header>
<nav aria-label="Main Navigation">
<ul>
Expand Down Expand Up @@ -244,20 +221,6 @@ <h3>Besuch uns!</h3>
</li>`;
}
window.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('header > video');
const playsymbol = document.querySelector('header > .playpause > .playsymbol');
const pausesymbol = document.querySelector('header > .playpause > .pausesymbol');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playsymbol.style.display = 'none';
pausesymbol.style.display = 'block';
} else {
video.pause();
playsymbol.style.display = 'block';
pausesymbol.style.display = 'none';
}
});
const calendarContent = document.querySelector('.calendar-content');
fetch('https://metalab.at/calendar/api/public_upcoming').then(async (response) => {
if (response.ok) {
Expand Down
39 changes: 1 addition & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>

<body>
Expand Down Expand Up @@ -43,30 +44,6 @@ <h2>Hackspace in the Heart of Vienna</h2>
</svg>
</div>
<aside class='door-overlay'>Door is <span id="door">loading</span></aside>
<!--determine door status-->
<script type="text/javascript">
fetch("https://eingang.c3w.at/status.json").then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
if (json) {
const element = document.getElementById("door");
if (json.status === "open") {
element.innerHTML = "OPEN";
element.classList.add('open');
return;
} else if (json.status === "closed") {
element.innerHTML = "CLOSED";
element.classList.add('closed');
return;
}
}
document.querySelector('.door-overlay').classList.add('failed');
}).catch(() => {
document.querySelector('.door-overlay').classList.add('failed');
});
</script>
</header>
<nav aria-label="Main Navigation">
<ul>
Expand Down Expand Up @@ -237,20 +214,6 @@ <h3>Visit Us!</h3>
</li>`;
}
window.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('header > video');
const playsymbol = document.querySelector('header > .playpause > .playsymbol');
const pausesymbol = document.querySelector('header > .playpause > .pausesymbol');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playsymbol.style.display = 'none';
pausesymbol.style.display = 'block';
} else {
video.pause();
playsymbol.style.display = 'block';
pausesymbol.style.display = 'none';
}
});
const calendarContent = document.querySelector('.calendar-content');
fetch('https://metalab.at/calendar/api/public_upcoming').then(async (response) => {
if (response.ok) {
Expand Down
45 changes: 2 additions & 43 deletions location-de.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<!DOCTYPE html>
<html lang='en'>
<html lang='de'>

<head>
<meta charset="UTF-8">
<title>metalab | Standort</title>
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>

<body>
Expand Down Expand Up @@ -43,30 +44,6 @@ <h2>Hackspace im Herzen Wiens</h2>
</svg>
</div>
<aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
<!--determine door status-->
<script type="text/javascript">
fetch("https://eingang.c3w.at/status.json").then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
if (json) {
const element = document.getElementById("door");
if (json.status === "open") {
element.innerHTML = "OFFEN";
element.classList.add('open');
return;
} else if (json.status === "closed") {
element.innerHTML = "GESCHLOSSEN";
element.classList.add('closed');
return;
}
}
document.querySelector('.door-overlay').classList.add('failed');
}).catch(() => {
document.querySelector('.door-overlay').classList.add('failed');
});
</script>
</header>
<nav aria-label="Main Navigation">
<ul>
Expand Down Expand Up @@ -121,24 +98,6 @@ <h3>Visit Us!</h3>
<p>©2022-2023 Metalab. Mit <a href='http://vanilla-js.com/'>Vanilla JS</a> erstellt.<a
href='https://metalab.at/wiki/Datenschutzerkl%C3%A4rung'>Datenschutzerklärung</a>.</p>
</footer>
<script>
window.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('header > video');
const playsymbol = document.querySelector('header > .playpause > .playsymbol');
const pausesymbol = document.querySelector('header > .playpause > .pausesymbol');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playsymbol.style.display = 'none';
pausesymbol.style.display = 'block';
} else {
video.pause();
playsymbol.style.display = 'block';
pausesymbol.style.display = 'none';
}
});
});
</script>
</body>

</html>
43 changes: 1 addition & 42 deletions location.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>

<body>
Expand Down Expand Up @@ -43,30 +44,6 @@ <h2>Hackspace in the Heart of Vienna</h2>
</svg>
</div>
<aside class='door-overlay'>Door is <span id="door">loading</span></aside>
<!--determine door status-->
<script type="text/javascript">
fetch("https://eingang.c3w.at/status.json").then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
if (json) {
const element = document.getElementById("door");
if (json.status === "open") {
element.innerHTML = "OPEN";
element.classList.add('open');
return;
} else if (json.status === "closed") {
element.innerHTML = "CLOSED";
element.classList.add('closed');
return;
}
}
document.querySelector('.door-overlay').classList.add('failed');
}).catch(() => {
document.querySelector('.door-overlay').classList.add('failed');
});
</script>
</header>
<nav aria-label="Main Navigation">
<ul>
Expand Down Expand Up @@ -121,24 +98,6 @@ <h3>Visit Us!</h3>
<p>©2022-2023 Metalab. Created in <a href='http://vanilla-js.com/'>Vanilla JS</a>.<a
href='https://metalab.at/wiki/Datenschutzerkl%C3%A4rung'>Privacy policy</a>.</p>
</footer>
<script>
window.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('header > video');
const playsymbol = document.querySelector('header > .playpause > .playsymbol');
const pausesymbol = document.querySelector('header > .playpause > .pausesymbol');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playsymbol.style.display = 'none';
pausesymbol.style.display = 'block';
} else {
video.pause();
playsymbol.style.display = 'block';
pausesymbol.style.display = 'none';
}
});
});
</script>
</body>

</html>
45 changes: 2 additions & 43 deletions rooms-de.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<!DOCTYPE html>
<html lang='en'>
<html lang='de'>

<head>
<meta charset="UTF-8">
<title>metalab | Räume</title>
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>

<body>
Expand Down Expand Up @@ -43,30 +44,6 @@ <h2>Hackspace im Herzen Wiens</h2>
</svg>
</div>
<aside class='door-overlay'>Tür ist <span id="door">ladend</span></aside>
<!--determine door status-->
<script type="text/javascript">
fetch("https://eingang.c3w.at/status.json").then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
if (json) {
const element = document.getElementById("door");
if (json.status === "open") {
element.innerHTML = "OFFEN";
element.classList.add('open');
return;
} else if (json.status === "closed") {
element.innerHTML = "GESCHLOSSEN";
element.classList.add('closed');
return;
}
}
document.querySelector('.door-overlay').classList.add('failed');
}).catch(() => {
document.querySelector('.door-overlay').classList.add('failed');
});
</script>
</header>
<nav aria-label="Main Navigation">
<ul>
Expand Down Expand Up @@ -209,24 +186,6 @@ <h3>Bar</h3>
<p>©2022-2023 Metalab. Mit <a href='http://vanilla-js.com/'>Vanilla JS</a> erstellt.<a
href='https://metalab.at/wiki/Datenschutzerkl%C3%A4rung'>Datenschutzerklärung</a>.</p>
</footer>
<script>
window.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('header > video');
const playsymbol = document.querySelector('header > .playpause > .playsymbol');
const pausesymbol = document.querySelector('header > .playpause > .pausesymbol');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playsymbol.style.display = 'none';
pausesymbol.style.display = 'block';
} else {
video.pause();
playsymbol.style.display = 'block';
pausesymbol.style.display = 'none';
}
});
});
</script>
</body>

</html>
43 changes: 1 addition & 42 deletions rooms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="metalab.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts.js" defer></script>
</head>

<body>
Expand Down Expand Up @@ -43,30 +44,6 @@ <h2>Hackspace in the Heart of Vienna</h2>
</svg>
</div>
<aside class='door-overlay'>Door is <span id="door">loading</span></aside>
<!--determine door status-->
<script type="text/javascript">
fetch("https://eingang.c3w.at/status.json").then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
if (json) {
const element = document.getElementById("door");
if (json.status === "open") {
element.innerHTML = "OPEN";
element.classList.add('open');
return;
} else if (json.status === "closed") {
element.innerHTML = "CLOSED";
element.classList.add('closed');
return;
}
}
document.querySelector('.door-overlay').classList.add('failed');
}).catch(() => {
document.querySelector('.door-overlay').classList.add('failed');
});
</script>
</header>
<nav aria-label="Main Navigation">
<ul>
Expand Down Expand Up @@ -199,24 +176,6 @@ <h3>Bar</h3>
<p>©2022-2023 Metalab. Created in <a href='http://vanilla-js.com/'>Vanilla JS</a>.<a
href='https://metalab.at/wiki/Datenschutzerkl%C3%A4rung'>Privacy policy</a>.</p>
</footer>
<script>
window.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('header > video');
const playsymbol = document.querySelector('header > .playpause > .playsymbol');
const pausesymbol = document.querySelector('header > .playpause > .pausesymbol');
video.addEventListener('click', () => {
if (video.paused) {
video.play();
playsymbol.style.display = 'none';
pausesymbol.style.display = 'block';
} else {
video.pause();
playsymbol.style.display = 'block';
pausesymbol.style.display = 'none';
}
});
});
</script>
</body>

</html>
Loading

0 comments on commit 87aef3c

Please sign in to comment.