Bürgermenu, Übersichtsseitenfilter für mobile, grauer Hintergrund

css/allPages.css

@@ -5,16 +5,55 @@ body {
     overflow-y: auto;
 }
 
+
+/* Standard elements */
+
+.hidden-html {
+    display: none;
+}
+
 .tooltip-inner {
     max-width: 350px !important;
     white-space: normal;
     line-height: 1.5;
 }
 
-.hidden-html {
-    display: none;
+.popover {
+    background-color: #f6f6f6;
+    border: 1px solid #ccc;
+}
+
+
+/* Navigation  */
+
+.custom-navbar {
+    background-color: rgb(248, 249, 250);
 }
 
+.custom-navbar .navbar-nav .nav-link {
+    padding: 0rem 0.8rem;
+    font-size: 0.9rem;
+}
+
+.custom-navbar .dropdown-menu {
+    background-color: rgb(248, 249, 250);
+    color: white;
+}
+
+.custom-navbar .dropdown-menu .dropdown-item:hover {
+    /*background-color: rgb(208, 209, 210);*/
+    background-color: rgb(208, 209, 10);
+    color: #495057;
+}
+
+.navbar-toggler {
+    /*border-color: rgb(248, 249, 250);*/
+    border-color: rgb(248, 249, 25);
+}
+
+
+/* Chart-Colors */
+
 :root {
     --datetime-color: rgb(151, 147, 147);
     --em-color: rgb(190, 110, 110);
@@ -35,8 +74,3 @@ body {
     --autarky-color: rgba(127, 181, 181, 0.6);
     --autarky-color2: rgba(97, 141, 141, 0.6);
 }
-
-.popover {
-    background-color: #f6f6f6;
-    border: 1px solid #ccc;
-}

css/overviewPage.css

@@ -10,6 +10,42 @@ h1 {
 }
 
 
+/* Summary table on top of page */
+
+.custom-navbar {
+    background-color: #f8f9fa;
+}
+
+.custom-navbar .navbar-nav .nav-link {
+    padding: 0rem 0.8rem;
+    font-size: 0.9rem;
+}
+
+.custom-navbar .navbar-nav .nav-link.active {
+    background-color: #e2e6ea;
+    color: #495057;
+}
+
+.custom-navbar .navbar-nav .nav-link:hover {
+    background-color: #e2e6ea;
+    color: #495057;
+}
+
+.custom-navbar .dropdown-menu {
+    background-color: #f8f9fa;
+    color: black;
+}
+
+.custom-navbar .dropdown-menu .dropdown-item:hover {
+    background-color: #e2e6ea;
+    color: #495057;
+}
+
+.navbar-toggler {
+    border-color: #f8f9fa;
+}
+
+
 /* Chart-Container */
 
 #autarky-chart-container,

dashboard.php

@@ -0,0 +1,33 @@
+<?php
+include_once("lib/appLibLoader.php");
+
+// Defaults
+$actualConfig = Configuration::getInstance()->monthsOverview();
+
+$startTime1 = date("Y-m-d 00:00:00");
+$endTime1 = date("Y-m-d 23:59:59");
+$timeLabelUnit = TimeHelper::prepareTimeUnit($startTime1, $endTime1);
+
+// Prepare DB
+$errorMsg = "";
+$db = Database::getInstance();
+$overviewPageService = new OverviewPageService($db->getPdoConnection());
+$overviewPageService->calculateHourData($startTime1, $endTime1);
+
+
+// configure VIEW
+
+$pageTitle = "Dashboard";
+$jsHeaderFiles = ["/js/utils.js", "js/dashboard/configureEnergyChart.js"];
+$jsFooterFiles = ["/js/dashboard/documentReady.js"];
+$cssFiles = ["/css/dasboardPage.css"];
+$jsVars = [
+    "timestampsTooltip" => json_encode($overviewPageService->getLabelsTooltip()),
+    "timestampsXAxis" => json_encode($overviewPageService->getLabelsXAxis()),
+    "data1" => json_encode($overviewPageService->getData1List()->convertToJsChartArray()),
+    "timeLabelUnit" => json_encode($timeLabelUnit),
+    "config" => $actualConfig->toJson()
+];
+
+
+include("views/partials/layout.phtml");

hoursOverview.php

@@ -8,10 +8,10 @@
 $selectedDay1 = StringHelper::formGetDate("day1", strtotime(date("d.m.Y")));
 $selectedDay2 = StringHelper::formGetDate("day2", strtotime(date("d.m.Y", strtotime('-1 day')))); 
 
-$startTime1 = date("Y-m-d", strtotime($selectedDay1))." 00:00:00";
-$endTime1 = date("Y-m-d", strtotime($selectedDay1))."  23:59:59";
-$startTime2 = date("Y-m-d", strtotime($selectedDay2))." 00:00:00";
-$endTime2 = date("Y-m-d", strtotime($selectedDay2))."  23:59:59";
+$startTime1 = date("Y-m-d 00:00:00", strtotime($selectedDay1));
+$endTime1 = date("Y-m-d 23:59:59", strtotime($selectedDay1));
+$startTime2 = date("Y-m-d 00:00:00", strtotime($selectedDay2));
+$endTime2 = date("Y-m-d 23:59:59", strtotime($selectedDay2));
 $timeLabelUnit = TimeHelper::prepareTimeUnit($startTime1, $endTime1);
 
 

js/dashboard/documentReady.js

@@ -0,0 +1,10 @@
+$(document).ready(function() {
+
+    // initialize Charts
+    ctxEnergy = document.getElementById('energyChart').getContext('2d');
+    energyChart = new Chart(
+        ctxEnergy,
+        configEnergy
+    );
+
+});

lib/datasets/energyDataSetList.php

@@ -2,7 +2,7 @@
 
 class EnergyDataSetList 
 {
-    private $items;
+    private $items = [];
 
     public function addItem(EnergyDataSet $item)
     {

lib/services/overviewPageService.php

@@ -80,7 +80,7 @@ public function calculateDayData($startTime1, $endTime1, $startTime2, $endTime2)
 
     }
 
-    public function calculateHourData($startTime1, $endTime1, $startTime2, $endTime2)
+    public function calculateHourData($startTime1, $endTime1, $startTime2=null, $endTime2=null)
     {
         $avg = 3600;  // 1 Stunde
         $this->prepareGeneralData($startTime1, $endTime1, $startTime2, $endTime2);
@@ -117,6 +117,7 @@ private function prepareGeneralData($startTime1, $endTime1, $startTime2 = null,
     private function prepareDataRange($startTime, $endTime, $avg)
     {
         $energyDataSetList = new EnergyDataSetList();
+        if ($startTime == null) return $energyDataSetList;
         for ($time = strtotime($startTime); $time <= strtotime($endTime); $time += $avg) {
             $strStart = date('Y-m-d H:i:s', $time);
             $strEnd = date('Y-m-d H:i:s', $time + $avg -1);  # -1 Sekunde für :59 Sekunden

lib/utils/timeHelper.php

@@ -71,14 +71,15 @@ public static function calculateDifferenceInDays($startDate, $endDate) {
         return $difference->days; // difference in days
     }
 
-    public static function getWeekday($date) {
+    public static function getWeekday($date, $short = false) {
         $formatter = new IntlDateFormatter(
             setlocale(LC_TIME, 0), // Locale for german
             IntlDateFormatter::FULL,
             IntlDateFormatter::NONE
         );
-        $formatter->setPattern('EEEE'); // Muster für den Wochentag
-        return $formatter->format(new DateTime($date));
+        $formatter->setPattern('EEEE'); // pattern weekday
+        $result = $formatter->format(new DateTime($date));
+        return $short ? substr($result,0,2)."." : $result;
     }    
 
     public static function getQuarterHoursBetween($start, $end) {

views/pages/overview/filter-for-hours-overview.phtml

@@ -8,29 +8,31 @@
                     <tr class="table-light">
                         <td>
                             <div class="d-flex align-items-center" style="height: 32px;">
-                                <strong class="small m-0">Auswahl 1:</strong>
+                                <strong class="small m-0 d-block d-sm-none">1:</strong>
+                                <strong class="small m-0 d-none d-sm-inline">Auswahl 1:</strong>
                             </div>
                         </td>
                         <!-- Day1 -->
                         <td>
                             <div class="d-flex align-items-center gap-2">
-                                <label for="day1" class="form-label small m-0"><strong>Tag: </strong><div class="weekday-container"><?=TimeHelper::getWeekday($selectedDay1)?>, </div></label>
+                                <label for="day1" class="form-label small m-0 d-block d-sm-none"><?=TimeHelper::getWeekday($selectedDay1, true)?></label>
+                                <label for="day1" class="form-label small m-0 d-none d-sm-inline"><strong>Tag: </strong><div class="weekday-container"><?=TimeHelper::getWeekday($selectedDay1)?>, </div></label>
                                 <input type="date-local" id="day1" name="day1" 
                                     value="<?=date("d.m.Y", strtotime($selectedDay1))?>" 
                                     class="form-control form-control-sm" style="max-width: 100px; height: 32px;">
                             </div>
                         </td>
                         <td>
-                            <div class="d-flex align-items-center gap-1">
+                            <div class="d-flex align-items-center gap-2">
                                 <!-- +1/-1 Buttons -->
-                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="subtract-day1">-1 Tag</a>
-                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="add-day1">+1 Tag</a>
+                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="subtract-day1">-1<span class="d-none d-sm-inline"> Tag</span></a>
+                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="add-day1">+1<span class="d-none d-sm-inline"> Tag</span></a>
                             </div>
                         </td>
                         <!-- Line 1 -->
                         <td>
-                            <div class="d-flex align-items-center gap-2">
-                                <label for="line1" class="form-label small m-0 line-container"><strong>Linie 1:</strong></label>
+                            <div class="d-flex align-items-center gap-4">
+                                <label for="line1" class="form-label small m-0 d-none d-sm-inline mb-0"><strong>Linie&nbsp;1:</strong></label>
                                 <select name="line1" id="line1" class="form-control form-control-sm" style="max-width: 120px; height: 32px;">
                                     <?php foreach($actualConfig->getLinePossibilities() as $val) { ?> 
                                         <option value="<?=$val?>" <?php echo ($actualConfig->getLine1() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWattHour($val)?></option>
@@ -39,32 +41,35 @@
                             </div>
                         </td>            
                     </tr>
+
                     <tr class="table-light">
                         <td>
                             <div class="d-flex align-items-center" style="height: 32px;">
-                                <strong class="small m-0">Auswahl 2:</strong>
+                            <strong class="small m-0 d-block d-sm-none">2:</strong>
+                            <strong class="small m-0 d-none d-sm-inline">Auswahl 2:</strong>
                             </div>
                         </td>
                         <!-- Day2 -->
                         <td>
                             <div class="d-flex align-items-center gap-2">
-                                <label for="day2" class="form-label small m-0"><strong>Tag: </strong><div class="weekday-container"><?=TimeHelper::getWeekday($selectedDay2)?>, </div></label>
+                                <label for="day2" class="form-label small m-0 d-block d-sm-none"><?=TimeHelper::getWeekday($selectedDay2, true)?></label>
+                                <label for="day2" class="form-label small m-0 d-none d-sm-inline"><strong>Tag: </strong><div class="weekday-container"><?=TimeHelper::getWeekday($selectedDay2)?>, </div></label>
                                 <input type="date-local" id="day2" name="day2" 
                                     value="<?=date("d.m.Y", strtotime($selectedDay2))?>" 
                                     class="form-control form-control-sm" style="max-width: 100px; height: 32px;">
                             </div>
                         </td>
                         <td>
-                            <div class="d-flex align-items-center gap-1">
+                            <div class="d-flex align-items-center gap-2">
                                 <!-- +1/-1 Buttons -->
-                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="subtract-day2">-1 Tag</a>
-                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="add-day2">+1 Tag</a>
+                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="subtract-day2">-1<span class="d-none d-sm-inline"> Tag</span></a>
+                                <a href="#" class="btn btn-sm btn-outline-secondary py-0 px-1" id="add-day2">+1<span class="d-none d-sm-inline"> Tag</span></a>
                             </div>
                         </td>
                         <!-- Line 2 -->
                         <td>
-                            <div class="d-flex align-items-center gap-2">
-                                <label for="line2" class="form-label small m-0 line-container""><strong>Linie 2:</strong></label>
+                            <div class="d-flex align-items-center gap-4">
+                            <label for="line2" class="form-label small m-0 d-none d-sm-inline"><strong>Linie&nbsp;2:</strong></label>
                                 <select name="line2" id="line2" class="form-control form-control-sm" style="max-width: 120px; height: 32px;">
                                     <?php foreach($actualConfig->getLinePossibilities() as $val) { ?> 
                                         <option value="<?=$val?>" <?php echo ($actualConfig->getLine2() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWattHour($val)?></option>