external script.js
This commit is contained in:
fds2610
parent
c622116fb7
commit
c5ea6d336e
2 changed files with 119 additions and 131 deletions
132
html/mon.html
132
html/mon.html
|
|
@ -71,137 +71,7 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="script.js"></script>
|
||||||
// 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');
|
|
||||||
|
|
||||||
// Kombiniere Datum und Uhrzeit zu einem ISO-String
|
|
||||||
const isoString = `${checkdat}T${checktim}Z`;
|
|
||||||
const date = new Date(isoString);
|
|
||||||
|
|
||||||
// Formatiere das Datum in die gewünschte Zeitzone
|
|
||||||
const formatter = new Intl.DateTimeFormat('de-DE', {
|
|
||||||
timeZone: userTimezone,
|
|
||||||
dateStyle: 'short',
|
|
||||||
timeStyle: 'medium',
|
|
||||||
hour12: false
|
|
||||||
});
|
|
||||||
const localTimeStr = formatter.format(date);
|
|
||||||
|
|
||||||
let dateStr = `${checkdat.replace(/T/, ' ')} ${checktim.replace(/T/, ' ')}`;
|
|
||||||
if (userTimezone !== 'UTC') {
|
|
||||||
dateStr += ` (${userTimezone})`;
|
|
||||||
}
|
|
||||||
tr.innerHTML = `
|
|
||||||
<td>${hostname}</td>
|
|
||||||
<td>${ip}</td>
|
|
||||||
<td><span class="status ${status.toLowerCase()}">${status}</span></td>
|
|
||||||
<td class="last-check">${localTimeStr} (${userTimezone}}</td>
|
|
||||||
`;
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Fehler beim Laden der status.conf:', error);
|
|
||||||
document.getElementById('serverData').innerHTML = `
|
|
||||||
<tr>
|
|
||||||
<td colspan="4" style="text-align: center; color: red;">
|
|
||||||
Fehler beim Laden der Serverdaten.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
loadTimezone();
|
|
||||||
loadServerData();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<div id="timezonestring"></div>
|
|
||||||
<div id ="datumuhrzeit"onload="currentTime()"></div>
|
|
||||||
<script>
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
currentTime();
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const timezoneElement = document.getElementById('timezonestring');
|
|
||||||
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
||||||
timezoneElement.innerText = timezone;
|
|
||||||
console.log(timezone);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
118
html/script.js
Normal file
118
html/script.js
Normal file
|
|
@ -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 = `
|
||||||
|
<td>${hostname}</td>
|
||||||
|
<td>${ip}</td>
|
||||||
|
<td><span class="status ${status.toLowerCase()}">${status}</span></td>
|
||||||
|
<td class="last-check">${localTimeStr} (${userTimezone})</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fehler beim Laden der status.conf:', error);
|
||||||
|
document.getElementById('serverData').innerHTML = `
|
||||||
|
<tr>
|
||||||
|
<td colspan="4" style="text-align: center; color: red;">
|
||||||
|
Fehler beim Laden der Serverdaten.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
|
||||||
Loading…
Add table
Reference in a new issue