no message
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user