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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</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