v0.14.2-connectivity

2026-09-15 10:02:49 +02:00
parent 2fd7e47eb9
commit c3f6e773f8
41 changed files with 1295 additions and 108 deletions
@@ -29,6 +29,7 @@ function outdoorHistorySeries(devices, rows) {
 function renderHistorySummary() {
  const host = $('#historySummary'); if (!host) return;
  if (app.historyTab === 'energy') { renderEnergyHistorySummary(); return; }
+  if (app.historyTab === 'network') { renderNetworkHistorySummary(); return; }
  const deviceRows = app.historyData.devices, zoneRows = app.historyData.zones, sensorRows = app.historyData.sensors;
  const cards = [
    [tr('history.deviceSamples'), app.historyCounts.devices ?? deviceRows.length, tr('history.greeHistory')],
@@ -113,6 +114,67 @@ function renderSensorHistory() {
  drawLineChart($('#haSensorsChart'), series, rows, { height: 370 }); renderLegend($('#haSensorsChartLegend'), series);
 }

+function networkTargetRows() {
+  const selected = app.historyNetworkTarget || 'all';
+  return selected === 'all' ? (app.historyNetwork || []) : (app.historyNetwork || []).filter(row => row.target_id === selected);
+}
+
+function networkTargetLabel(id) {
+  return (app.historyNetworkTargets || []).find(target => target.id === id)?.name || id;
+}
+
+function renderNetworkHistorySummary() {
+  const host = $('#historySummary'); if (!host) return;
+  const rows = networkTargetRows();
+  const ids = [...new Set(rows.map(row => row.target_id))];
+  if (!ids.length) { host.innerHTML = ''; return; }
+  host.innerHTML = ids.map(id => {
+    const latest = rows.filter(row => row.target_id === id).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))[0];
+    const latency = Number.isFinite(Number(latest?.latency_ms)) ? `${Number(latest.latency_ms).toLocaleString(locale(), { maximumFractionDigits: 1 })} ms` : '—';
+    const jitter = Number.isFinite(Number(latest?.jitter_ms)) ? `${Number(latest.jitter_ms).toLocaleString(locale(), { maximumFractionDigits: 1 })} ms` : '—';
+    const loss = `${Number(latest?.packet_loss_pct || 0).toLocaleString(locale(), { maximumFractionDigits: 1 })}%`;
+    return `<div class="history-stat"><small>${esc(networkTargetLabel(id))}</small><strong>${esc(latency)}</strong><span>${esc(tr('history.networkJitter'))}: ${esc(jitter)} · ${esc(tr('history.networkLoss'))}: ${esc(loss)} · ${esc(latest?.successful_samples ?? 0)}/${esc(latest?.sample_count ?? 0)}</span></div>`;
+  }).join('');
+}
+
+function renderNetworkHistory() {
+  const host = $('#historyCharts'); if (!host) return;
+  renderNetworkHistorySummary();
+  const rows = networkTargetRows();
+  if (!rows.length) {
+    host.innerHTML = `<div class="empty"><strong>${esc(tr('history.networkNoData'))}</strong><span>${esc(tr('history.networkNoDataHint'))}</span></div>`;
+    return;
+  }
+  const ids = [...new Set(rows.map(row => row.target_id))];
+  const latencySeries = [];
+  const lossSeries = [];
+  ids.forEach((id, index) => {
+    const label = networkTargetLabel(id);
+    const color = historySeriesColor(index);
+    latencySeries.push({
+      key: `${id}:latency`, label: `${label} · ${tr('history.networkLatency')}`, color,
+      value: row => row.target_id === id ? historyNumber(row.latency_ms) : NaN,
+      tooltipValue: value => `${Number(value).toLocaleString(locale(), { maximumFractionDigits: 2 })} ms`,
+    });
+    latencySeries.push({
+      key: `${id}:jitter`, label: `${label} · ${tr('history.networkJitter')}`, color, dash: [5, 4],
+      value: row => row.target_id === id ? historyNumber(row.jitter_ms) : NaN,
+      tooltipValue: value => `${Number(value).toLocaleString(locale(), { maximumFractionDigits: 2 })} ms`,
+    });
+    lossSeries.push({
+      key: `${id}:loss`, label, color,
+      value: row => row.target_id === id ? historyNumber(row.packet_loss_pct) : NaN,
+      tooltipValue: value => `${Number(value).toLocaleString(locale(), { maximumFractionDigits: 2 })}%`,
+    });
+  });
+  host.innerHTML = historyChartMarkup('networkLatencyChart', tr('history.networkLatencyJitter'), tr('history.networkLatencyJitterHint'))
+    + historyChartMarkup('networkLossChart', tr('history.networkLoss'), tr('history.networkLossHint'));
+  drawLineChart($('#networkLatencyChart'), latencySeries, rows, { height: 360, minValue: 0, axisSuffix: ' ms', tooltipUnit: ' ms', axisDigits: 0 });
+  renderLegend($('#networkLatencyChartLegend'), latencySeries);
+  drawLineChart($('#networkLossChart'), lossSeries, rows, { height: 300, minValue: 0, maxValue: 100, axisSuffix: '%', tooltipUnit: '%', axisDigits: 0 });
+  renderLegend($('#networkLossChartLegend'), lossSeries);
+}
+
 function customSeriesOptions() {
  const items = [];
  const groupedOutdoorIds = new Set();
@@ -203,6 +265,7 @@ function renderHistoryPage() {
  else if (app.historyTab === 'zones') renderZoneHistory();
  else if (app.historyTab === 'devices') renderDeviceHistory();
  else if (app.historyTab === 'energy') renderEnergyHistory();
+  else if (app.historyTab === 'network') renderNetworkHistory();
  else if (app.historyTab === 'sensors') renderSensorHistory();
  else renderCustomHistory();
 }