Feature: ShineDiag mobiles Dashboard mit Canvas-Charts und SQLite-History (v2.0)

- Auto-Polling alle 30s im Hintergrund (Thread + Event) - SQLite-Persistenz in /var/lib/shinediag/history.db, 7-Tage-Retention - 4 Tabs: Dashboard, Diagramme, Sensoren, Rohdaten - Große Metrikkarten für Spannung (L1/L2/L3), Frequenz, Leistung - Canvas-Liniendiagramme (kein externes JS) mit 1h/6h/24h/7d-Auswahl - localStorage für Verbindungskonfig, Auto-Reconnect beim Seitenaufruf - Retina-fähiges Canvas (DPR-aware) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 12:15:05 +02:00
parent 7f890f8105
commit fe1bdb057d
2 changed files with 738 additions and 249 deletions
@@ -5,276 +5,597 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>ShineDiag</title>
 <style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}

-  header { background: #1e293b; padding: 16px 20px; border-bottom: 1px solid #334155;
-           display: flex; align-items: center; gap: 12px; }
-  header svg { flex-shrink: 0; }
-  header h1 { font-size: 1.2rem; font-weight: 700; color: #f8fafc; }
-  header p  { font-size: .75rem; color: #94a3b8; }
+/* Header */
+header{background:#1e293b;padding:12px 16px;border-bottom:1px solid #334155;
+  display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:10}
+.header-left{display:flex;align-items:center;gap:10px}
+header h1{font-size:1.1rem;font-weight:700;color:#f8fafc}
+header p{font-size:.7rem;color:#94a3b8}
+.status-dot{width:10px;height:10px;border-radius:50%;background:#334155;flex-shrink:0}
+.status-dot.ok{background:#22c55e;box-shadow:0 0 6px #22c55e88}
+.status-dot.err{background:#ef4444}

-  main { padding: 16px; max-width: 640px; margin: 0 auto; }
+/* Tabs */
+.tabs{display:flex;background:#1e293b;border-bottom:1px solid #334155;overflow-x:auto;scrollbar-width:none}
+.tabs::-webkit-scrollbar{display:none}
+.tab{flex:1;min-width:80px;padding:10px 4px;border:none;background:none;color:#64748b;
+  font-size:.8rem;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.tab.active{color:#60a5fa;border-bottom-color:#3b82f6}

-  .card { background: #1e293b; border: 1px solid #334155; border-radius: 12px;
-          padding: 16px; margin-bottom: 16px; }
-  .card h2 { font-size: .85rem; font-weight: 600; color: #94a3b8;
-             text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
+/* Main */
+main{padding:12px;max-width:640px;margin:0 auto}
+.card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:14px;margin-bottom:12px}
+.card-title{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;
+  letter-spacing:.05em;margin-bottom:10px}

-  label  { display: block; font-size: .8rem; color: #94a3b8; margin-bottom: 4px; margin-top: 10px; }
-  input, select {
-    width: 100%; padding: 10px 12px; border-radius: 8px;
-    border: 1px solid #334155; background: #0f172a; color: #f1f5f9;
-    font-size: .9rem;
-  }
-  input:focus, select:focus { outline: 2px solid #3b82f6; border-color: transparent; }
+/* Connect form */
+label{display:block;font-size:.78rem;color:#94a3b8;margin-bottom:3px;margin-top:8px}
+input,select{width:100%;padding:9px 11px;border-radius:8px;border:1px solid #334155;
+  background:#0f172a;color:#f1f5f9;font-size:.9rem}
+input:focus,select:focus{outline:2px solid #3b82f6;border-color:transparent}
+.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

-  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+button{width:100%;padding:11px;border-radius:8px;border:none;cursor:pointer;
+  font-size:.9rem;font-weight:600;margin-top:10px;transition:opacity .15s}
+button:disabled{opacity:.4;cursor:not-allowed}
+.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}
+.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}
+.btn-secondary{background:#475569;color:#e2e8f0}.btn-secondary:hover:not(:disabled){background:#334155}
+.btn-success{background:#059669;color:#fff}.btn-success:hover:not(:disabled){background:#047857}

-  button { width: 100%; padding: 12px; border-radius: 8px; border: none; cursor: pointer;
-           font-size: .95rem; font-weight: 600; margin-top: 14px; transition: opacity .15s; }
-  button:disabled { opacity: .4; cursor: not-allowed; }
-  .btn-primary { background: #3b82f6; color: #fff; }
-  .btn-primary:hover:not(:disabled) { background: #2563eb; }
-  .btn-raw { background: #475569; color: #e2e8f0; }
-  .btn-raw:hover:not(:disabled) { background: #334155; }
-  .btn-export { background: #059669; color: #fff; }
-  .btn-export:hover:not(:disabled) { background: #047857; }
+/* Metric cards grid */
+.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:4px}
+.metric{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:12px 10px}
+.metric-label{font-size:.7rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
+.metric-value{font-size:1.5rem;font-weight:700;color:#f1f5f9;line-height:1}
+.metric-unit{font-size:.75rem;color:#94a3b8;margin-top:2px}
+.metric.highlight .metric-value{color:#60a5fa}
+.metric.warn .metric-value{color:#f59e0b}
+.metric.ok .metric-value{color:#4ade80}

-  .status { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
-            border-radius: 8px; font-size: .85rem; margin-top: 12px; }
-  .status.ok    { background: #052e16; color: #4ade80; border: 1px solid #166534; }
-  .status.error { background: #1c0a09; color: #f87171; border: 1px solid #7f1d1d; }
-  .status.info  { background: #0c1a2e; color: #60a5fa; border: 1px solid #1e3a5f; }
+/* Chart */
+.chart-wrap{position:relative;margin-top:8px}
+canvas.chart{width:100%;border-radius:8px;display:block}
+.chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;padding:0 4px}
+.legend-item{display:flex;align-items:center;gap:5px;font-size:.75rem;color:#94a3b8}
+.legend-dot{width:10px;height:10px;border-radius:50%}

-  .sensor-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
-  .sensor-table th { text-align: left; font-size: .75rem; color: #64748b;
-                     padding: 6px 8px; border-bottom: 1px solid #334155; }
-  .sensor-table td { padding: 8px; font-size: .85rem; border-bottom: 1px solid #1e293b; }
-  .sensor-table tr:last-child td { border-bottom: none; }
-  .sensor-table .val { font-weight: 600; color: #f1f5f9; text-align: right; }
-  .sensor-table .unit { color: #64748b; font-size: .75rem; text-align: right; }
-  .sensor-name { color: #cbd5e1; }
+/* Range selector */
+.range-btns{display:flex;gap:4px;margin-bottom:10px}
+.range-btn{flex:1;padding:7px 4px;border-radius:6px;border:1px solid #334155;
+  background:transparent;color:#94a3b8;font-size:.75rem;cursor:pointer}
+.range-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}

-  .tabs { display: flex; gap: 4px; margin-bottom: 12px; }
-  .tab { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #334155;
-         background: transparent; color: #94a3b8; font-size: .8rem; cursor: pointer; }
-  .tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+/* Sensor table */
+.sensor-table{width:100%;border-collapse:collapse}
+.sensor-table th{text-align:left;font-size:.72rem;color:#64748b;padding:5px 6px;border-bottom:1px solid #334155}
+.sensor-table td{padding:7px 6px;font-size:.83rem;border-bottom:1px solid #1e293b}
+.sensor-table tr:last-child td{border-bottom:none}
+.sensor-table .v{font-weight:600;color:#f1f5f9;text-align:right}
+.sensor-table .u{color:#64748b;font-size:.72rem;text-align:right}

-  .raw-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: .8rem; }
-  .raw-table th { text-align: left; color: #64748b; padding: 4px 8px;
-                  border-bottom: 1px solid #334155; }
-  .raw-table td { padding: 5px 8px; border-bottom: 1px solid #1e293b; color: #cbd5e1; }
-  .raw-table td:first-child { color: #60a5fa; }
+/* Raw table */
+.raw-table{width:100%;border-collapse:collapse;font-family:monospace;font-size:.78rem}
+.raw-table th{text-align:left;color:#64748b;padding:4px 6px;border-bottom:1px solid #334155}
+.raw-table td{padding:4px 6px;border-bottom:1px solid #1e293b;color:#cbd5e1}
+.raw-table td:first-child{color:#60a5fa}
+.raw-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}

-  #results { display: none; }
-  .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ffffff44;
-             border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
-  @keyframes spin { to { transform: rotate(360deg); } }
+/* Status bar */
+.update-bar{font-size:.72rem;color:#475569;text-align:right;margin-bottom:4px}
+
+/* Alert */
+.alert{padding:10px 12px;border-radius:8px;font-size:.83rem;margin-bottom:10px}
+.alert-info{background:#0c1a2e;color:#60a5fa;border:1px solid #1e3a5f}
+.alert-ok{background:#052e16;color:#4ade80;border:1px solid #166534}
+.alert-err{background:#1c0a09;color:#f87171;border:1px solid #7f1d1d}
+
+.spinner{display:inline-block;width:14px;height:14px;border:2px solid #fff4;
+  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+.hidden{display:none!important}
 </style>
 </head>
 <body>

 <header>
-  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
-    <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/>
-    <line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-    <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
-    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-  </svg>
-  <div>
-    <h1>ShineDiag</h1>
-    <p>Vor-Ort Diagnose via ShineLAN-X</p>
+  <div class="header-left">
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
+      <circle cx="12" cy="12" r="5"/>
+      <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+      <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+    </svg>
+    <div><h1>ShineDiag</h1><p id="hdrSub">Nicht verbunden</p></div>
  </div>
+  <div id="statusDot" class="status-dot"></div>
 </header>

+<div class="tabs">
+  <button class="tab active" onclick="showTab('dashboard')">Dashboard</button>
+  <button class="tab" onclick="showTab('charts')">Diagramme</button>
+  <button class="tab" onclick="showTab('sensors')">Sensoren</button>
+  <button class="tab" onclick="showTab('raw')">Rohdaten</button>
+</div>
+
 <main>
-  <div class="card">
-    <h2>Verbindung</h2>

+<!-- ── Dashboard ── -->
+<div id="tabDashboard">
+  <!-- Connect card (shown when disconnected) -->
+  <div class="card" id="connectCard">
+    <div class="card-title">Verbindung</div>
    <label>ShineLAN-X IP</label>
-    <input id="ip" type="text" value="10.0.0.100" placeholder="10.0.0.100">
-
-    <div class="row">
-      <div>
-        <label>Port</label>
-        <input id="port" type="number" value="502">
-      </div>
-      <div>
-        <label>Modbus-Adresse</label>
-        <input id="slave" type="number" value="1" min="1" max="247">
-      </div>
+    <input id="cfgIp" value="10.0.0.100">
+    <div class="row2">
+      <div><label>Port</label><input id="cfgPort" type="number" value="502"></div>
+      <div><label>Modbus-Adresse</label><input id="cfgSlave" type="number" value="1"></div>
    </div>
-
-    <label>Wechselrichter-Modell</label>
-    <select id="model"></select>
-
-    <button class="btn-primary" id="btnScan" onclick="scan()">
-      Auslesen
-    </button>
+    <label>Modell</label>
+    <select id="cfgModel"></select>
+    <button class="btn-primary" id="btnConnect" onclick="connect()">Verbinden &amp; Aufzeichnen</button>
  </div>

-  <div class="card" id="results">
-    <div class="tabs">
-      <button class="tab active" onclick="showTab('sensors')">Sensoren</button>
-      <button class="tab" onclick="showTab('raw')">Rohdaten</button>
+  <!-- Live data (shown when connected) -->
+  <div id="liveCard" class="hidden">
+    <div class="update-bar" id="updateBar">—</div>
+
+    <div class="card">
+      <div class="card-title">Spannung</div>
+      <div class="metrics" id="voltageMetrics"></div>
    </div>

-    <div id="statusMsg"></div>
+    <div class="card">
+      <div class="card-title">Frequenz &amp; Leistung</div>
+      <div class="metrics" id="powerMetrics"></div>
+    </div>

-    <div id="tabSensors">
-      <table class="sensor-table">
-        <thead><tr><th>Sensor</th><th style="text-align:right">Wert</th><th style="text-align:right">Einheit</th></tr></thead>
-        <tbody id="sensorBody"></tbody>
+    <div class="card" id="extraCard" style="display:none">
+      <div class="card-title">Weitere</div>
+      <div class="metrics" id="extraMetrics"></div>
+    </div>
+
+    <button class="btn-danger" onclick="disconnect()">Verbindung trennen</button>
+  </div>
+</div>
+
+<!-- ── Charts ── -->
+<div id="tabCharts" class="hidden">
+  <div class="card" id="noDataCard">
+    <div class="alert alert-info">Zuerst im Dashboard verbinden und einige Messpunkte sammeln.</div>
+  </div>
+
+  <div id="chartSection" class="hidden">
+    <div class="range-btns">
+      <button class="range-btn active" onclick="setRange(1,this)">1 Std</button>
+      <button class="range-btn" onclick="setRange(6,this)">6 Std</button>
+      <button class="range-btn" onclick="setRange(24,this)">24 Std</button>
+      <button class="range-btn" onclick="setRange(168,this)">7 Tage</button>
+    </div>
+
+    <div class="card">
+      <div class="card-title">Spannung (V)</div>
+      <div class="chart-wrap"><canvas id="chartVoltage" class="chart" height="160"></canvas></div>
+      <div class="chart-legend" id="legendVoltage"></div>
+    </div>
+
+    <div class="card">
+      <div class="card-title">Frequenz (Hz)</div>
+      <div class="chart-wrap"><canvas id="chartFreq" class="chart" height="120"></canvas></div>
+    </div>
+
+    <div class="card">
+      <div class="card-title">Leistung (W)</div>
+      <div class="chart-wrap"><canvas id="chartPower" class="chart" height="140"></canvas></div>
+      <div class="chart-legend" id="legendPower"></div>
+    </div>
+  </div>
+</div>
+
+<!-- ── Sensors ── -->
+<div id="tabSensors" class="hidden">
+  <div class="card">
+    <table class="sensor-table">
+      <thead><tr><th>Sensor</th><th style="text-align:right">Wert</th><th style="text-align:right">Einheit</th></tr></thead>
+      <tbody id="sensorBody"><tr><td colspan="3" style="color:#475569;padding:12px">Noch nicht verbunden.</td></tr></tbody>
+    </table>
+    <button class="btn-success" id="btnExport" onclick="exportJson()" style="margin-top:10px">Export JSON</button>
+  </div>
+</div>
+
+<!-- ── Raw ── -->
+<div id="tabRaw" class="hidden">
+  <div class="card">
+    <div class="raw-controls">
+      <div><label>Start</label><input id="rawStart" type="number" value="0"></div>
+      <div><label>Anzahl (max 125)</label><input id="rawCount" type="number" value="100"></div>
+    </div>
+    <button class="btn-secondary" onclick="rawScan()">Register lesen</button>
+    <div id="rawAlert" style="margin-top:8px"></div>
+    <div style="overflow-x:auto;margin-top:8px">
+      <table class="raw-table">
+        <thead><tr><th>Addr</th><th>Hex</th><th>Dez</th><th>Signed</th></tr></thead>
+        <tbody id="rawBody"></tbody>
      </table>
-      <button class="btn-export" id="btnExport" onclick="exportJson()" style="margin-top:12px">
-        Export JSON
-      </button>
-    </div>
-
-    <div id="tabRaw" style="display:none">
-      <div class="row" style="margin-bottom:10px">
-        <div>
-          <label>Start-Register</label>
-          <input id="rawStart" type="number" value="0" min="0">
-        </div>
-        <div>
-          <label>Anzahl</label>
-          <input id="rawCount" type="number" value="100" min="1" max="125">
-        </div>
-      </div>
-      <button class="btn-raw" onclick="rawScan()">Register lesen</button>
-      <div style="overflow-x:auto; margin-top:12px">
-        <table class="raw-table">
-          <thead><tr><th>Addr</th><th>Hex</th><th>Dez</th><th>Signed</th></tr></thead>
-          <tbody id="rawBody"></tbody>
-        </table>
-      </div>
    </div>
  </div>
+</div>
+
 </main>

 <script>
-let lastScan = null;
+// ── State ────────────────────────────────────────────────────
+
+let currentStatus = null;
+let chartHours = 1;
+let refreshTimer = null;
+
+const COLORS = ['#60a5fa','#fbbf24','#4ade80','#f87171','#a78bfa'];
+
+// Sensor-IDs je Messtyp
+const VOLTAGE_IDS  = ['voltage_l1','voltage_l2','voltage_l3','ac_voltage','bat_voltage'];
+const FREQ_IDS     = ['frequency'];
+const POWER_IDS    = ['total_power','ac_power','ac_power_total','pv_power','bat_charge_power','bat_discharge_power'];
+const EXTRA_IDS    = ['temperature','bat_soc','bat_current'];
+
+const LABELS = {
+  voltage_l1:'Spannung L1', voltage_l2:'Spannung L2', voltage_l3:'Spannung L3',
+  ac_voltage:'Spannung AC', bat_voltage:'Batterie',
+  frequency:'Frequenz',
+  total_power:'Netzleistung', ac_power:'AC Leistung', ac_power_total:'AC Leistung',
+  pv_power:'PV Leistung', bat_charge_power:'Bat. Laden', bat_discharge_power:'Bat. Entladen',
+  temperature:'Temperatur', bat_soc:'Ladezustand', bat_current:'Bat. Strom',
+};
+
+// ── Tabs ─────────────────────────────────────────────────────
+
+function showTab(name) {
+  ['dashboard','charts','sensors','raw'].forEach(t => {
+    document.getElementById('tab'+cap(t)).classList.toggle('hidden', t !== name);
+  });
+  document.querySelectorAll('.tab').forEach((btn, i) => {
+    btn.classList.toggle('active', ['dashboard','charts','sensors','raw'][i] === name);
+  });
+  if (name === 'charts') loadCharts();
+}
+const cap = s => s[0].toUpperCase() + s.slice(1);
+
+// ── Models ───────────────────────────────────────────────────

 async function loadModels() {
-  const res = await fetch('/api/models');
+  const res  = await fetch('/api/models');
  const data = await res.json();
-  const sel = document.getElementById('model');
+  const sel  = document.getElementById('cfgModel');
  sel.innerHTML = '';
  for (const [id, m] of Object.entries(data)) {
-    const opt = document.createElement('option');
-    opt.value = id;
-    opt.textContent = `${m.name} (${m.sensor_count} Sensoren)`;
-    sel.appendChild(opt);
+    const o = document.createElement('option');
+    o.value = id;
+    o.textContent = `${m.name}`;
+    sel.appendChild(o);
  }
+  // restore from localStorage
+  const saved = localStorage.getItem('shinediag_model');
+  if (saved) sel.value = saved;
 }

-function showTab(tab) {
-  document.getElementById('tabSensors').style.display = tab === 'sensors' ? '' : 'none';
-  document.getElementById('tabRaw').style.display    = tab === 'raw'     ? '' : 'none';
-  document.querySelectorAll('.tab').forEach((t, i) =>
-    t.classList.toggle('active', (i === 0) === (tab === 'sensors')));
-}
+// ── Connect ──────────────────────────────────────────────────

-function setStatus(msg, type) {
-  const el = document.getElementById('statusMsg');
-  el.innerHTML = `<div class="status ${type}">${msg}</div>`;
-}
-
-async function scan() {
-  const btn = document.getElementById('btnScan');
+async function connect() {
+  const btn = document.getElementById('btnConnect');
  btn.disabled = true;
-  btn.innerHTML = '<span class="spinner"></span> Verbinde…';
-  document.getElementById('results').style.display = 'block';
-  setStatus('Verbinde mit ShineLAN-X…', 'info');
+  btn.innerHTML = '<span class="spinner"></span>';
+  const cfg = {
+    ip:    document.getElementById('cfgIp').value,
+    port:  parseInt(document.getElementById('cfgPort').value),
+    slave: parseInt(document.getElementById('cfgSlave').value),
+    model: document.getElementById('cfgModel').value,
+  };
+  localStorage.setItem('shinediag_model', cfg.model);
+  const res = await fetch('/api/connect', {method:'POST',
+    headers:{'Content-Type':'application/json'}, body: JSON.stringify(cfg)});
+  const d = await res.json();
+  btn.disabled = false;
+  btn.textContent = 'Verbinden & Aufzeichnen';
+  if (d.ok) startRefresh();
+}

+async function disconnect() {
+  await fetch('/api/disconnect', {method:'POST'});
+  stopRefresh();
+  showDisconnected();
+}
+
+// ── Refresh ──────────────────────────────────────────────────
+
+function startRefresh() {
+  stopRefresh();
+  pollStatus();
+  refreshTimer = setInterval(pollStatus, 30000);
+}
+
+function stopRefresh() {
+  if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+}
+
+async function pollStatus() {
  try {
-    const res = await fetch('/api/scan', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({
-        ip:    document.getElementById('ip').value,
-        port:  parseInt(document.getElementById('port').value),
-        slave: parseInt(document.getElementById('slave').value),
-        model: document.getElementById('model').value,
-      })
-    });
-    const data = await res.json();
-
-    if (!data.ok) {
-      setStatus('&#x26A0; ' + (data.error || 'Fehler'), 'error');
-      return;
-    }
-
-    lastScan = data;
-    setStatus(`&#x2713; ${data.manufacturer} ${data.model} — ${data.sensors.length} Sensoren gelesen`, 'ok');
-
-    const tbody = document.getElementById('sensorBody');
-    tbody.innerHTML = '';
-    for (const s of data.sensors) {
-      const val = s.value !== null ? s.value : '—';
-      const tr = document.createElement('tr');
-      tr.innerHTML = `
-        <td class="sensor-name">${esc(s.name)}</td>
-        <td class="val">${val}</td>
-        <td class="unit">${esc(s.unit || '')}</td>`;
-      tbody.appendChild(tr);
-    }
-  } catch (e) {
-    setStatus('&#x26A0; Netzwerkfehler: ' + e.message, 'error');
-  } finally {
-    btn.disabled = false;
-    btn.textContent = 'Auslesen';
+    const res = await fetch('/api/status');
+    currentStatus = await res.json();
+    renderDashboard(currentStatus);
+  } catch(e) {
+    console.error(e);
  }
 }

+// ── Dashboard ────────────────────────────────────────────────
+
+function renderDashboard(s) {
+  const dot = document.getElementById('statusDot');
+  const hdr = document.getElementById('hdrSub');
+
+  if (!s.connected) { showDisconnected(); return; }
+
+  document.getElementById('connectCard').classList.add('hidden');
+  document.getElementById('liveCard').classList.remove('hidden');
+
+  dot.className = 'status-dot ' + (s.modbus_ok ? 'ok' : 'err');
+  hdr.textContent = s.inv_name || s.cfg.model;
+
+  if (s.last_ts) {
+    const ago = Math.round(Date.now()/1000 - s.last_ts);
+    document.getElementById('updateBar').textContent =
+      `Letztes Update: ${ago < 60 ? ago+'s' : Math.round(ago/60)+'min'} · alle 30s`;
+  }
+
+  const v = s.values;
+
+  // Spannung
+  const voltIds = VOLTAGE_IDS.filter(id => v[id] !== undefined);
+  renderMetrics('voltageMetrics', voltIds.map(id => ({
+    label: LABELS[id], value: v[id]?.toFixed(1), unit: 'V', cls: 'highlight'
+  })));
+
+  // Frequenz + Leistung
+  const pm = [];
+  if (v.frequency !== undefined)
+    pm.push({label:'Frequenz', value: v.frequency?.toFixed(2), unit:'Hz', cls:'ok'});
+  const pwrId = POWER_IDS.find(id => v[id] !== undefined);
+  if (pwrId) {
+    const pval = v[pwrId];
+    pm.push({label: LABELS[pwrId], value: pval?.toFixed(0), unit:'W',
+             cls: pval < 0 ? 'ok' : 'warn'});
+  }
+  renderMetrics('powerMetrics', pm);
+
+  // Extras (Temperatur, SoC, …)
+  const extras = EXTRA_IDS.filter(id => v[id] !== undefined)
+    .map(id => ({label: LABELS[id], value: v[id]?.toFixed(1),
+                 unit: id==='bat_soc'?'%':id==='temperature'?'°C':'A'}));
+  document.getElementById('extraCard').style.display = extras.length ? '' : 'none';
+  if (extras.length) renderMetrics('extraMetrics', extras);
+
+  // Sensor-Tabelle aktualisieren
+  if (s.sensors.length) {
+    const tbody = document.getElementById('sensorBody');
+    tbody.innerHTML = s.sensors.map(sen => {
+      const val = v[sen.id] !== undefined ? v[sen.id] : '—';
+      return `<tr><td>${esc(sen.name)}</td>
+              <td class="v">${val}</td>
+              <td class="u">${esc(sen.unit||'')}</td></tr>`;
+    }).join('');
+  }
+}
+
+function renderMetrics(containerId, items) {
+  document.getElementById(containerId).innerHTML = items.map(m =>
+    `<div class="metric ${m.cls||''}">
+      <div class="metric-label">${esc(m.label)}</div>
+      <div class="metric-value">${esc(m.value??'—')}</div>
+      <div class="metric-unit">${esc(m.unit||'')}</div>
+    </div>`
+  ).join('');
+}
+
+function showDisconnected() {
+  document.getElementById('connectCard').classList.remove('hidden');
+  document.getElementById('liveCard').classList.add('hidden');
+  document.getElementById('statusDot').className = 'status-dot';
+  document.getElementById('hdrSub').textContent = 'Nicht verbunden';
+}
+
+// ── Charts ───────────────────────────────────────────────────
+
+function setRange(h, btn) {
+  chartHours = h;
+  document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  loadCharts();
+}
+
+async function loadCharts() {
+  if (!currentStatus?.connected) {
+    document.getElementById('noDataCard').classList.remove('hidden');
+    document.getElementById('chartSection').classList.add('hidden');
+    return;
+  }
+  document.getElementById('noDataCard').classList.add('hidden');
+  document.getElementById('chartSection').classList.remove('hidden');
+
+  const v        = currentStatus.values || {};
+  const voltIds  = VOLTAGE_IDS.filter(id => v[id] !== undefined);
+  const pwrIds   = POWER_IDS.filter(id => v[id] !== undefined);
+
+  const sensors  = [...voltIds, 'frequency', ...pwrIds].join(',');
+  const res      = await fetch(`/api/chart-data?sensors=${sensors}&hours=${chartHours}`);
+  const data     = await res.json();
+
+  drawLineChart('chartVoltage', voltIds.map((id,i) => ({
+    label: LABELS[id], color: COLORS[i], points: data[id]||[]
+  })), 'legendVoltage');
+
+  drawLineChart('chartFreq', [{
+    label:'Frequenz', color: COLORS[2], points: data.frequency||[]
+  }], null, {yMin:49, yMax:51});
+
+  drawLineChart('chartPower', pwrIds.map((id,i) => ({
+    label: LABELS[id], color: COLORS[i], points: data[id]||[]
+  })), 'legendPower');
+}
+
+function drawLineChart(canvasId, series, legendId, opts={}) {
+  const canvas = document.getElementById(canvasId);
+  const dpr    = window.devicePixelRatio || 1;
+  const W      = canvas.parentElement.clientWidth;
+  const H      = canvas.height || 140;
+  canvas.width  = W * dpr;
+  canvas.height = H * dpr;
+  canvas.style.width  = W + 'px';
+  canvas.style.height = H + 'px';
+  const ctx = canvas.getContext('2d');
+  ctx.scale(dpr, dpr);
+
+  const PAD = {top:10, right:10, bottom:28, left:42};
+  const iW  = W - PAD.left - PAD.right;
+  const iH  = H - PAD.top  - PAD.bottom;
+
+  ctx.clearRect(0, 0, W, H);
+  ctx.fillStyle = '#0f172a';
+  ctx.fillRect(0, 0, W, H);
+
+  const allPts = series.flatMap(s => s.points);
+  if (allPts.length < 2) {
+    ctx.fillStyle = '#475569';
+    ctx.font = '13px system-ui';
+    ctx.textAlign = 'center';
+    ctx.fillText('Noch keine Daten', W/2, H/2);
+    return;
+  }
+
+  const tsMin = Math.min(...allPts.map(p => p.ts));
+  const tsMax = Math.max(...allPts.map(p => p.ts));
+  let   vMin  = opts.yMin ?? Math.min(...allPts.map(p => p.v));
+  let   vMax  = opts.yMax ?? Math.max(...allPts.map(p => p.v));
+  if (vMin === vMax) { vMin -= 1; vMax += 1; }
+  const vPad = (vMax - vMin) * 0.08;
+  vMin -= vPad; vMax += vPad;
+
+  const tx = ts => PAD.left + (ts - tsMin) / (tsMax - tsMin) * iW;
+  const ty = v  => PAD.top  + (1 - (v - vMin) / (vMax - vMin)) * iH;
+
+  // Grid
+  ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 1;
+  for (let i = 0; i <= 4; i++) {
+    const y = PAD.top + iH * i / 4;
+    ctx.beginPath(); ctx.moveTo(PAD.left, y); ctx.lineTo(PAD.left + iW, y); ctx.stroke();
+    const val = vMax - (vMax - vMin) * i / 4;
+    ctx.fillStyle = '#475569'; ctx.font = '10px system-ui'; ctx.textAlign = 'right';
+    ctx.fillText(val.toFixed(val > 100 ? 0 : 1), PAD.left - 4, y + 4);
+  }
+
+  // X-Achse Zeitstempel
+  const fmtTs = ts => {
+    const d = new Date(ts * 1000);
+    if (chartHours <= 6) return d.toLocaleTimeString('de',{hour:'2-digit',minute:'2-digit'});
+    return d.toLocaleDateString('de',{weekday:'short',hour:'2-digit',minute:'2-digit'});
+  };
+  ctx.fillStyle = '#475569'; ctx.font = '10px system-ui'; ctx.textAlign = 'center';
+  [0, 0.25, 0.5, 0.75, 1].forEach(f => {
+    const ts = tsMin + (tsMax - tsMin) * f;
+    ctx.fillText(fmtTs(ts), PAD.left + iW * f, H - 6);
+  });
+
+  // Series
+  series.forEach(s => {
+    if (!s.points.length) return;
+    ctx.beginPath();
+    ctx.strokeStyle = s.color;
+    ctx.lineWidth   = 2;
+    ctx.lineJoin    = 'round';
+    s.points.forEach((p, i) => {
+      const x = tx(p.ts), y = ty(p.v);
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+  });
+
+  // Legend
+  if (legendId) {
+    document.getElementById(legendId).innerHTML = series.map(s =>
+      `<div class="legend-item">
+        <div class="legend-dot" style="background:${s.color}"></div>
+        <span>${esc(s.label)}</span>
+      </div>`
+    ).join('');
+  }
+}
+
+// ── Raw ──────────────────────────────────────────────────────
+
 async function rawScan() {
-  setStatus('Lese Register…', 'info');
+  const alert = document.getElementById('rawAlert');
+  const s = currentStatus;
+  const cfg = s?.cfg || {ip:'10.0.0.100', port:502, slave:1};
+  alert.innerHTML = '<div class="alert alert-info">Lese Register…</div>';
  try {
-    const res = await fetch('/api/raw', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
+    const res = await fetch('/api/raw', {method:'POST',
+      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
-        ip:    document.getElementById('ip').value,
-        port:  parseInt(document.getElementById('port').value),
-        slave: parseInt(document.getElementById('slave').value),
+        ip: cfg.ip, port: cfg.port, slave: cfg.slave,
        start: parseInt(document.getElementById('rawStart').value),
        count: parseInt(document.getElementById('rawCount').value),
      })
    });
-    const data = await res.json();
-    if (!data.ok) { setStatus('&#x26A0; ' + data.error, 'error'); return; }
-
-    const tbody = document.getElementById('rawBody');
-    tbody.innerHTML = '';
-    for (const r of data.registers) {
-      const tr = document.createElement('tr');
-      tr.innerHTML = `<td>${r.addr}</td><td>${r.hex}</td><td>${r.dec}</td><td>${r.signed}</td>`;
-      tbody.appendChild(tr);
-    }
-    setStatus(`&#x2713; ${data.registers.length} Register gelesen`, 'ok');
-  } catch (e) {
-    setStatus('&#x26A0; ' + e.message, 'error');
+    const d = await res.json();
+    if (!d.ok) { alert.innerHTML = `<div class="alert alert-err">${esc(d.error)}</div>`; return; }
+    document.getElementById('rawBody').innerHTML = d.registers.map(r =>
+      `<tr><td>${r.addr}</td><td>${r.hex}</td><td>${r.dec}</td><td>${r.signed}</td></tr>`
+    ).join('');
+    alert.innerHTML = `<div class="alert alert-ok">&#x2713; ${d.registers.length} Register</div>`;
+  } catch(e) {
+    alert.innerHTML = `<div class="alert alert-err">${esc(e.message)}</div>`;
  }
 }

+// ── Export ───────────────────────────────────────────────────
+
 function exportJson() {
-  if (!lastScan) return;
-  const blob = new Blob([JSON.stringify(lastScan, null, 2)], {type: 'application/json'});
+  if (!currentStatus) return;
+  const blob = new Blob([JSON.stringify(currentStatus, null, 2)], {type:'application/json'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `shinediag_${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.json`;
  a.click();
 }

+// ── Helpers ──────────────────────────────────────────────────
+
 function esc(s) {
-  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  return String(s??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }

-loadModels();
+// ── Init ─────────────────────────────────────────────────────
+
+async function init() {
+  await loadModels();
+  const savedIp = localStorage.getItem('shinediag_ip');
+  if (savedIp) document.getElementById('cfgIp').value = savedIp;
+
+  // Reconnect if server already polling
+  const res = await fetch('/api/status');
+  const s = await res.json();
+  if (s.connected) {
+    currentStatus = s;
+    renderDashboard(s);
+    startRefresh();
+  }
+}
+
+init();
 </script>
 </body>
 </html>