localhorst/msv-webcam-frontend
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

add status text if no image is shown

Browse Source
This commit is contained in:
Hendrik Schutter 2023-07-11 21:43:30 +02:00
parent 46744a6ca5
commit 571dce0630
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
www/data/camera/msvcamN.avif → www/data/msvcamN.avif
View File

0
www/data/camera/msvcamS.avif → www/data/msvcamS.avif
View File

12
www/index.html
View File

@ -23,14 +23,16 @@
<p class="w3-text-white"><i>Live Webcam vom Flugplatz in Moos</i></p>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center current_webcam_image_box">
<h3 class="w3-container w3-left cameratext">Blick auf die Piste</h3>
<img src="data/camera/msvcamN.avif" class="w3-center current_webcam_image" style="width:100%;" alt="Bild der Webcam mit Blick auf die Piste">
<img src="data/camera/msvcamN.avif" class="w3-center" style="width:100%;visibility:visible" alt="Bild der Webcam mit Blick auf die Piste">
<p style="visibility:hidden">Hinweistext</p>
</div>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center current_webcam_image_box">
<h3 class="w3-container w3-left cameratext">Blick nach Süden</h3>
<img src="data/camera/msvcamS.avif" class="w3-center current_webcam_image" style="width:100%;" alt="Bild der Webcam mit Blick nach Süden">
<img src="data/camera/msvcamS.avif" class="w3-center" style="width:100%;visibility:visible" alt="Bild der Webcam mit Blick nach Süden">
<p>Hinweistext</p>
</div>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
@ -42,7 +44,7 @@
<div class="w3-panel w3-card w3-dark-gray">
<div class="w3-center-align w3-text-black infobox">
<a style="text-decoration: none" href="mailto:pressewart@msv-buehl-moos.de?subject=MSV%20Webcam"><h6>pressewart@msv-buehl-moos.de</h6></a>
<p>Last update: 2023/07/10<p>
<p>Last update: 2023/07/11<p>
<a style="text-decoration: none" href="https://git.mosad.xyz/localhorst/msv-webcam-frontend" target="_blank" rel="noopener noreferrer"><h6>View code in GIT</h6></a>
</div>
</div>

12
www/js/webcam.js
View File

@ -1,4 +1,4 @@
const images = document.getElementsByClassName('current_webcam_image');
const boxes = document.getElementsByClassName('current_webcam_image_box');
const reload_interval = setInterval(reloadImages, 60000);
window.onload = function() {
@ -16,9 +16,14 @@ function checkImageSource(image_url) {
function reloadImages() {
console.log('reload in progress');
Array.prototype.forEach.call(images, function(image) {
Array.prototype.forEach.call(boxes, function(box) {
var headline = box.childNodes[1]
var image = box.childNodes[3]
var status_text = box.childNodes[5]
if (checkImageSource(image.src) == 200) {
status_text.style = "visibility:hidden"
image.style="width:100%;visibility:visible"
if (!image.src.includes('?')) {
image.src = `${image.src}?${Date.now()}`;
} else {
@ -27,9 +32,12 @@ function reloadImages() {
} else {
console.log('unable to find image on server');
image.alt = "Webcam nicht erreichbar."
image.style="width:100%;visibility:hidden"
status_text.style = "visibility:visible"
}
});
console.log('reload finished');
}