admin/Smart-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
64445e95fe96f956628c32c912f49bdb0dfe1a84
Smart-Dashboard/restricted/solar.php
T
adminandClaude Opus 5 6b8556567b Dashboard: Doppelungen zusammengelegt, Lade- und Renderlast gesenkt 
Zusammenlegung
- Die sechs Endpunkte getConsData_/getProdData_{month,year,decade}.php sind
  ajax/energyHistory.php?series=&range= gewichen, der gemeinsame Aufbau der
  Chart-Daten steht in ajax/chartData.php. Die erzeugte SQL wurde gegen alle
  sechs Originale abgeglichen.
- Die 13 Raeume der Home-Ansicht stehen nur noch in restricted/rooms.php.
  home.php rendert die SVG-Kacheln daraus, homeMQTT.js bekommt dieselbe
  Tabelle als JSON (346 -> 222 bzw. 428 -> 197 Zeilen).
- Gemeinsame JS-Helfer in js/solar/common.js; geteilte Bausteine fuer
  Wetterkacheln, Chart-Skripte und das Formular der Ladesteuerung.
- Seitenvorlagen sind jetzt .php und werden eingebunden, statt per
  file_get_contents zusammengesetzt zu werden.

Fehlerbehebungen
- ?action=weather fuehrte auf eine leere Seite, es gibt jetzt weather.php.
- homeMQTT.js griff auf ein #meteogram zu, das home.php nie hatte, und brach
  damit den readystatechange-Handler ab.
- Die Heizungsseite abonnierte weatherStation/#, zeigte die Werte aber nie an.

Ladelast
- Chart.js, MQTT und Meteogramm werden nur noch auf den Seiten geladen, die
  sie brauchen; die Seitentabelle dafuer steht in index.php.
- mqtt.js durch die minifizierte Fassung ersetzt (859 -> 359 KB). MQTT.js
  5.14.1, byte-identisch mit dem signierten npm-Tarball.
- Rund 3,1 MB ungenutzte Vendor-Reste und AdminLTE-Demobilder entfernt.
- Solar 1796 -> 1240 KB, Home 1796 -> 873 KB, Historie 1796 -> 843 KB.

Speicher im Browser
- Chart.defaults.devicePixelRatio auf 1.5 gedeckelt. Die Zeichenpuffer der
  Diagramme waren mit 20-45 MB der groesste Posten der Seite.
- Das Meteogramm-iframe laedt erst beim Hinscrollen.

Realtime-SVG
- Filterbereiche auf das noetige Mass verkleinert und den wirkungslosen
  feOffset-Durchgang entfernt: 60 % weniger gerasterte Filterflaeche bei
  pixelgleichem Ergebnis.
- Die Fluss-Animation laeuft ueber transform statt stroke-dashoffset, mit
  Punkten statt Strichmuster; sie ruht, wo kein Fluss anliegt.
- Der Wertupdate schreibt nur noch bei echter Aenderung und benutzt
  textContent statt innerHTML: 9 statt 86 Elemente pro Update, davon keines
  mit Filter. describeArc rundet auf volle Grad.
- waterInfo auf scale(0.90) wie die uebrigen Info-Gruppen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-26 22:54:28 +02:00

191 lines
6.7 KiB
PHP
Raw Blame History

<style>
.datepicker-native {
position: relative;
}
.datepicker-native-input {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
right: 0;
top: 0;
opacity: 0;
}
.datepicker-native-input::-webkit-calendar-picker-indicator {
position: absolute;
right: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
</style>
<!--begin::App Main-->
<main class="app-main">
<!--begin::App Content Header-->
<div class="app-content-header">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<div class="col-sm-12">
<h3 class="mb-0">Solar</h3>
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::App Content Header-->
<!--begin::App Content-->
<div class="app-content">
<!--begin::Container-->
<div class="container-fluid">
<!--begin::Row-->
<div class="row">
<!-- Start col -->
<div class="col-xxl-12 col-xl-12 d-flex align-items-stretch">
<div class="card p-0 mb-4" style="width:100%">
<div class="card-header pb-0 pt-1">
<h3 class="card-title">Realtime</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="card-body p-0 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;max-height:800px;">
<?php readfile(__DIR__ . "/../assets/img/realtime.svg"); ?>
</div>
</div>
<!-- /.card -->
</div>
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
<div class="card p-0 mb-4" style="width:100%">
<div class="card-header pb-0 pt-1">
<h3 class="card-title">Statistik dieses Jahr</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="row-cols-1 row-cols-md-1 g-4 p-2 pb-0" id="Stats-Year">
</div>
</div>
<!-- /.card -->
</div>
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
<div class="card p-0 mb-4" style="width:100%">
<div class="card-header pb-0 pt-1">
<h3 class="card-title">Forecast</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="card-body pb-1" id="meteogram">
</div>
</div>
<!-- /.card -->
</div>
<!-- Forecast Graph-->
<div class="col-lg-12">
<div class="card mb-4 p-0">
<div class="card-header pb-0 pt-1">
<h3 class="card-title">Forecast</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="card-body pb-1">
<div class="chart-container" style="position: relative; height:100%; width:100%">
<canvas id="forecast-chart" height="400px;"></canvas>
</div>
</div>
</div>
</div>
<!-- Consumption Graph-->
<div class="col-lg-12">
<div class="card mb-4 p-0">
<div class="card-header pb-0 pt-1">
<h3 class="card-title">Power consumption</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" title="Voriger Tag" onclick="prevDay()">
<i class="bi bi-skip-backward"></i>
</button>
<button type="button" type="btn btn-tool" class="btn btn-tool datepicker-native">
<i class="bi bi-calendar-week"></i>
<input type="date" id="DatePickerCons" class="datepicker-native-input" onInput="changeDay(event);" />
</button>
<button type="button" class="btn btn-tool" title="Nächster Tag" onclick="nextDay()">
<i class="bi bi-skip-forward"></i>
</button>
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="card-body pb-1">
<div class="chart-container" style="position: relative; height:100%; width:100%">
<canvas id="consumption-chart" height="400px;"></canvas>
</div>
</div>
</div>
</div>
<!-- Production Graph -->
<div class="col-lg-12">
<div class="card mb-4 p-0">
<div class="card-header pb-0 pt-1">
<h3 class="card-title">Power production</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" title="Voriger Tag" onclick="prevDay()">
<i class="bi bi-skip-backward"></i>
</button>
<button type="button" type="btn btn-tool" class="btn btn-tool datepicker-native">
<i class="bi bi-calendar-week"></i>
<input type="date" id="DatePickerProd" class="datepicker-native-input" onInput="changeDay(event);" />
</button>
<button type="button" class="btn btn-tool" title="Nächster Tag" onclick="nextDay()">
<i class="bi bi-skip-forward"></i>
</button>
<button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
<i class="bi bi-x-lg"></i>
</button>
</div>
</div>
<div class="card-body pb-1">
<div class="chart-container" style="position: relative; height:100%; width:100%">
<canvas id="production-chart" height="400px;"></canvas>
</div>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.Start col -->
</div>
<?php include __DIR__ . "/weather_cards.html"; ?>
<!-- /.row (main row) -->
</div>
<!--end::Container-->
</div>
<!--end::App Content-->
</main>
<!--end::App Main-->
Reference in New Issue View Git Blame Copy Permalink