From 634f51a64bf70b20183050d7180f8c4c1575fe2a Mon Sep 17 00:00:00 2001 From: SvenoF54 <190880593+SvenoF54@users.noreply.github.com> Date: Fri, 17 Jan 2025 20:45:39 +0100 Subject: [PATCH] =?UTF-8?q?B=C3=BCrgermenu,=20=C3=9Cbersichtsseitenfilter?= =?UTF-8?q?=20f=C3=BCr=20mobile,=20grauer=20Hintergrund?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/allPages.css | 48 ++++++-- css/overviewPage.css | 36 ++++++ dashboard.php | 33 ++++++ hoursOverview.php | 8 +- js/dashboard/documentReady.js | 10 ++ lib/datasets/energyDataSetList.php | 2 +- lib/services/overviewPageService.php | 3 +- lib/utils/timeHelper.php | 7 +- .../overview/filter-for-hours-overview.phtml | 33 +++--- views/pages/overview/filter-summary.phtml | 103 ++++++++---------- views/partials/navigation.phtml | 69 +++++++----- 11 files changed, 240 insertions(+), 112 deletions(-) create mode 100644 dashboard.php create mode 100644 js/dashboard/documentReady.js diff --git a/css/allPages.css b/css/allPages.css index f1499e1..15511a7 100644 --- a/css/allPages.css +++ b/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; -} diff --git a/css/overviewPage.css b/css/overviewPage.css index 8ff5859..0fa5124 100644 --- a/css/overviewPage.css +++ b/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, diff --git a/dashboard.php b/dashboard.php new file mode 100644 index 0000000..e2a4d4f --- /dev/null +++ b/dashboard.php @@ -0,0 +1,33 @@ +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"); diff --git a/hoursOverview.php b/hoursOverview.php index 6a4247b..0563c3e 100644 --- a/hoursOverview.php +++ b/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); diff --git a/js/dashboard/documentReady.js b/js/dashboard/documentReady.js new file mode 100644 index 0000000..91df23a --- /dev/null +++ b/js/dashboard/documentReady.js @@ -0,0 +1,10 @@ +$(document).ready(function() { + + // initialize Charts + ctxEnergy = document.getElementById('energyChart').getContext('2d'); + energyChart = new Chart( + ctxEnergy, + configEnergy + ); + +}); diff --git a/lib/datasets/energyDataSetList.php b/lib/datasets/energyDataSetList.php index 8e72ba6..16be459 100644 --- a/lib/datasets/energyDataSetList.php +++ b/lib/datasets/energyDataSetList.php @@ -2,7 +2,7 @@ class EnergyDataSetList { - private $items; + private $items = []; public function addItem(EnergyDataSet $item) { diff --git a/lib/services/overviewPageService.php b/lib/services/overviewPageService.php index 55afe82..b811fbf 100644 --- a/lib/services/overviewPageService.php +++ b/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 diff --git a/lib/utils/timeHelper.php b/lib/utils/timeHelper.php index f81c467..c89dbdc 100644 --- a/lib/utils/timeHelper.php +++ b/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) { diff --git a/views/pages/overview/filter-for-hours-overview.phtml b/views/pages/overview/filter-for-hours-overview.phtml index d1c2342..d7b3dc5 100644 --- a/views/pages/overview/filter-for-hours-overview.phtml +++ b/views/pages/overview/filter-for-hours-overview.phtml @@ -8,29 +8,31 @@
- Auswahl 1: + 1: + Auswahl 1:
- + + " class="form-control form-control-sm" style="max-width: 100px; height: 32px;">
-
+
- -1 Tag - +1 Tag + -1 Tag + +1 Tag
-
- +
+ " class="form-control form-control-sm" style="max-width: 100px; height: 32px;">
-
+
- -1 Tag - +1 Tag + -1 Tag + +1 Tag
-
- +
+