adminandClaude Opus 5
a59277e33e
Das feste realtime.svg ist ersetzt durch einen Katalog (js/solar/energieflussKatalog.js: jeder Kreis einmal, samt Werten aus MQTT) und einen Renderer (js/solar/energiefluss.js): Ringe mit Segmenten, Fluesse als Boegen mit laufenden Punkten, Fuellstandswelle fuer Batterie und Auto, animierte Symbole, Plaketten, Hochkant-Ansicht auf schmalen Schirmen. Hierarchie und Lage wie bisher: Quellen -> Wechselrichter -> Verbrauch -> OG/EG/UG -> Wallboxen, Heizstab. Einstellungen -> Uebersicht: Kreise ein/aus (Kinder ruecken eine Ebene hoeher), Namen, Lage per Ziehen in der Vorschau, PV-Flaechen. Gespeichert werden nur Abweichungen in homeMesh.energiefluss. Der PV-Lageplan hinter der Sonne liegt unveraendert als assets/img/pvplan.svg und ist ueber den Umschalter Uebersicht/Anlage erreichbar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
205 lines
7.7 KiB
PHP
205 lines
7.7 KiB
PHP
<?php require_once(__DIR__ . "/energiefluss.php"); ?>
|
|
<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 -->
|
|
<!-- Energiefluss. Gezeichnet von js/solar/energiefluss.js aus dem Katalog
|
|
(energieflussKatalog.js) und den Einstellungen dieses Hauses
|
|
(Einstellungen -> Übersicht). Bis September 2026 stand hier
|
|
assets/img/realtime.svg mit festen Kreisen. -->
|
|
<div class="col-xxl-12 col-xl-12 d-flex align-items-stretch">
|
|
<div class="card p-0 mb-4" style="width:100%" id="energieflussKarte">
|
|
<div class="card-header pb-1 pt-1 d-flex align-items-center">
|
|
<h3 class="card-title me-auto">Realtime</h3>
|
|
<div class="enf-umschalter me-2" role="tablist" aria-label="Ansicht">
|
|
<button type="button" class="btn btn-sm active" role="tab" aria-selected="true" data-enf-ansicht="fluss">Übersicht</button>
|
|
<button type="button" class="btn btn-sm" role="tab" aria-selected="false" data-enf-ansicht="anlage">Anlage</button>
|
|
</div>
|
|
<div class="card-tools">
|
|
<a class="btn btn-tool" href="index.php?action=settings#energiefluss" title="Übersicht einstellen">
|
|
<i class="bi bi-sliders"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-2 p-md-3">
|
|
<div class="enf-ansicht enf-behaelter" data-enf-ansicht-flaeche="fluss" id="energiefluss"></div>
|
|
<div class="enf-ansicht" data-enf-ansicht-flaeche="anlage" hidden>
|
|
<?php readfile(__DIR__ . "/../assets/img/pvplan.svg"); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Abweichungen dieses Hauses vom Katalog, siehe restricted/energiefluss.php.
|
|
const energieflussEinstellungen = <?= json_encode((object)energieflussLaden(), JSON_UNESCAPED_UNICODE) ?>;
|
|
</script>
|
|
|
|
<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">
|
|
<canvas id="forecast-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<!-- Gefuellt von baueJahresstatistik() aus js/solar/jahresstatistik.js -
|
|
dieselbe Tabelle wie auf der Historienseite, nur einspaltig. -->
|
|
<div class="card-body statistik" id="Stats-Year"></div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</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">
|
|
<canvas id="consumption-chart"></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">
|
|
<canvas id="production-chart"></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-->
|