no message

This commit is contained in:
belevo\mh
2026-01-20 11:09:04 +01:00
parent b241cc3f77
commit a25f440097

View File

@@ -13,36 +13,15 @@
background: transparent; background: transparent;
} }
.wrap { /* Kopfzeile */
padding: 0;
margin: 0;
}
/* Deutlich sichtbare Kopfzeile */
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px;
padding: 10px 14px; padding: 10px 14px;
background: #1f2937; background: #1f2937;
border-bottom: 1px solid #374151; border-bottom: 1px solid #374151;
} }
#reload {
background: #2563eb;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
#reload:hover { background: #1d4ed8; }
#reload:active { transform: translateY(1px); }
.meta { .meta {
color: #e5e7eb; color: #e5e7eb;
font-size: 13px; font-size: 13px;
@@ -52,34 +31,24 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* Chart Area */ /* Chart */
#chart { #chart {
height: 520px; height: 520px;
width: 100%; width: 100%;
padding: 10px 10px 0 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: #ffffff;
} }
/* Kleine Hilfe, falls Symcon dunklen Hintergrund setzt */
.chartWrap {
background: #ffffff;
}
</style> </style>
</head> </head>
<body> <body>
<div class="wrap"> <div class="header">
<div class="header"> <div class="meta" id="meta">Lade…</div>
<button id="reload">🔄 Neu laden</button>
<div class="meta" id="meta">Lade…</div>
</div>
<div class="chartWrap">
<div id="chart"></div>
</div>
</div> </div>
<div id="chart"></div>
<script> <script>
const metaEl = document.getElementById("meta"); const metaEl = document.getElementById("meta");
@@ -89,7 +58,7 @@
const instanceId = Number("{{INSTANCE_ID}}"); const instanceId = Number("{{INSTANCE_ID}}");
if (!Number.isFinite(instanceId) || instanceId <= 0) { if (!Number.isFinite(instanceId) || instanceId <= 0) {
metaEl.textContent = "Fehler: INSTANCE_ID nicht korrekt eingesetzt."; metaEl.textContent = "Fehler: INSTANCE_ID nicht korrekt.";
throw new Error("Invalid INSTANCE_ID"); throw new Error("Invalid INSTANCE_ID");
} }
@@ -100,7 +69,7 @@
let chart; let chart;
async function loadData() { async function loadData() {
metaEl.textContent = "⏳ Lade Daten…"; metaEl.textContent = "⏳ Daten werden geladen…";
const r = await fetch(endpoint, { cache: "no-store" }); const r = await fetch(endpoint, { cache: "no-store" });
if (!r.ok) { if (!r.ok) {
const text = await r.text().catch(() => ""); const text = await r.text().catch(() => "");
@@ -109,13 +78,9 @@
return await r.json(); return await r.json();
} }
function fmtDT(ms) {
return new Date(ms).toLocaleString();
}
function render(data) { function render(data) {
if (typeof Highcharts === "undefined") { if (typeof Highcharts === "undefined") {
metaEl.textContent = "Fehler: Highcharts nicht geladen (CSP/CDN)."; metaEl.textContent = "Fehler: Highcharts nicht geladen.";
return; return;
} }
@@ -128,7 +93,8 @@
const nowMs = data?.meta?.now ?? Date.now(); const nowMs = data?.meta?.now ?? Date.now();
metaEl.textContent = `✅ OK | Cache: ${cachedAt} | Forecast: ${forecast.length} | Ist: ${actual.length}`; metaEl.textContent =
`OK | Cache: ${cachedAt} | Forecast: ${forecast.length} | Ist: ${actual.length}`;
const options = { const options = {
title: { title: {
@@ -211,7 +177,6 @@
if (!chart) { if (!chart) {
chart = Highcharts.chart("chart", options); chart = Highcharts.chart("chart", options);
} else { } else {
// PlotLine "JETZT" aktualisieren + Daten neu setzen
chart.update({ chart.update({
xAxis: { plotLines: options.xAxis.plotLines } xAxis: { plotLines: options.xAxis.plotLines }
}, false); }, false);
@@ -222,17 +187,14 @@
} }
} }
async function refresh() { (async () => {
try { try {
const data = await loadData(); const data = await loadData();
render(data); render(data);
} catch (e) { } catch (e) {
metaEl.textContent = "Fehler beim Laden: " + (e?.message ?? e); metaEl.textContent = "Fehler beim Laden: " + (e?.message ?? e);
} }
} })();
document.getElementById("reload").addEventListener("click", refresh);
refresh();
</script> </script>
</body> </body>
</html> </html>