59 lines
2.3 KiB
HTML
59 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Archivkosten Abfrage</title>
|
|
<style>
|
|
body { font-family: sans-serif; margin: 40px; line-height: 1.6; background-color: #f4f4f9; }
|
|
.container { max-width: 600px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
|
h1 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; }
|
|
.data-row { border-bottom: 1px solid #eee; padding: 10px 0; }
|
|
.label { font-weight: bold; color: #555; }
|
|
.error { color: red; font-style: italic; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>Archivkosten Übersicht</h1>
|
|
<div id="content">
|
|
<p>Lade aktuelle Daten...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Pfad zur JSON-Datei, die von Node-RED im Shared Volume erstellt wird
|
|
// In der docker-compose Konfiguration ist dies unter /data/ erreichbar
|
|
const dataPath = './data/kosten_historie.json';
|
|
|
|
async function loadCosts() {
|
|
const contentDiv = document.getElementById('content');
|
|
try {
|
|
const response = await fetch(dataPath);
|
|
if (!response.ok) throw new Error('Datei nicht gefunden');
|
|
|
|
const data = await response.json();
|
|
|
|
// Falls die Daten ein Array sind (Historie), zeigen wir das letzte Element
|
|
const latest = Array.isArray(data) ? data[data.length - 1] : data;
|
|
|
|
contentDiv.innerHTML = `
|
|
<div class="data-row"><span class="label">Datum:</span> ${latest.datum || 'N/A'}</div>
|
|
<div class="data-row"><span class="label">Kunde:</span> ${latest.kunde || 'Unbekannt'}</div>
|
|
<div class="data-row"><span class="label">Volumen:</span> ${latest.volumen_gb || 0} GB</div>
|
|
<div class="data-row"><span class="label">Kosten:</span> CHF ${latest.kosten || 0}</div>
|
|
`;
|
|
} catch (error) {
|
|
contentDiv.innerHTML = `<p class="error">Noch keine aktuellen Daten verfügbar. (Warte auf tägliches Update von Node-RED)</p>`;
|
|
console.error('Fehler beim Laden:', error);
|
|
}
|
|
}
|
|
|
|
loadCosts();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|