diff --git a/html/mon.html b/html/mon.html index 78092d6..c4c2fb2 100644 --- a/html/mon.html +++ b/html/mon.html @@ -71,137 +71,7 @@ - -
-
- + diff --git a/html/script.js b/html/script.js new file mode 100644 index 0000000..d506dc9 --- /dev/null +++ b/html/script.js @@ -0,0 +1,118 @@ +// Navigation +document.getElementById('hamburger').addEventListener('click', function() { + document.getElementById('navMenu').style.display = 'block'; +}); +document.getElementById('closeBtn').addEventListener('click', function() { + document.getElementById('navMenu').style.display = 'none'; +}); +document.getElementById('homeLink').addEventListener('click', function(e) { + e.preventDefault(); + document.getElementById('content').style.display = 'block'; + document.getElementById('settingsPage').style.display = 'none'; + document.getElementById('navMenu').style.display = 'none'; +}); +document.getElementById('settingsLink').addEventListener('click', function(e) { + e.preventDefault(); + document.getElementById('content').style.display = 'none'; + document.getElementById('settingsPage').style.display = 'block'; + document.getElementById('navMenu').style.display = 'none'; +}); + +// Timezone Cookie +function getCookie(name) { + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) return parts.pop().split(';').shift(); +} +function setCookie(name, value, days = 365) { + const date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`; +} +function loadTimezone() { + const savedTimezone = getCookie('userTimezone'); + if (savedTimezone) { + document.getElementById('timezone').value = savedTimezone; + } +} +document.getElementById('timezoneForm').addEventListener('submit', function(e) { + e.preventDefault(); + const timezone = document.getElementById('timezone').value; + setCookie('userTimezone', timezone); + alert('Zeitzone gespeichert!'); + loadServerData(); +}); + +// Serverdaten laden +function loadServerData() { + fetch('status.txt') + .then(response => response.text()) + .then(data => { + const lines = data.split('\n'); + const tbody = document.getElementById('serverData'); + tbody.innerHTML = ''; + const userTimezone = getCookie('userTimezone') || 'UTC'; + lines.forEach(line => { + if (line.trim() === '') return; + const [hostname, ip, status, checkdat, checktim] = line.split(' '); + const tr = document.createElement('tr'); + const isoString = `${checkdat}T${checktim}Z`; + const date = new Date(isoString); + const formatter = new Intl.DateTimeFormat('de-DE', { + timeZone: userTimezone, + dateStyle: 'short', + timeStyle: 'medium', + hour12: false + }); + const localTimeStr = formatter.format(date); + tr.innerHTML = ` + ${hostname} + ${ip} + ${status} + ${localTimeStr} (${userTimezone}) + `; + tbody.appendChild(tr); + }); + }) + .catch(error => { + console.error('Fehler beim Laden der status.conf:', error); + document.getElementById('serverData').innerHTML = ` + + + Fehler beim Laden der Serverdaten. + + + `; + }); +} + +// Aktuelle Uhrzeit +function currentTime() { + let date = new Date(); + let dd = date.getDate(); + let m = date.getMonth() + 1; + let yy = date.getFullYear(); + let hh = date.getHours(); + let mm = date.getMinutes(); + let ss = date.getSeconds(); + dd = (dd < 10) ? "0" + dd : dd; + m = (m < 10) ? "0" + m : m; + hh = (hh < 10) ? "0" + hh : hh; + mm = (mm < 10) ? "0" + mm : mm; + ss = (ss < 10) ? "0" + ss : ss; + let time = dd + "." + m + "." + yy + "\u00A0\u00A0\u00A0\u00A0" + hh + ":" + mm + ":" + ss + " Uhr"; + document.getElementById("datumuhrzeit").innerText = time; + let t = setTimeout(function(){ currentTime() }, 1000); +} + +// Initialisierung +document.addEventListener('DOMContentLoaded', function() { + loadTimezone(); + loadServerData(); + const timezoneElement = document.getElementById('timezonestring'); + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + timezoneElement.innerText = timezone; + console.log(timezone); + currentTime(); +}); +