Echtzeitübersicht: Styling für mobile Ansichten.

Übersichtsseiten: kleinere optische Verbesserungen.
SvenoF54 · Jan 23, 2025 · 5799330 · 5799330
1 parent ee9ca57
commit 5799330
Show file tree

Hide file tree

Showing 17 changed files with 214 additions and 214 deletions.
diff --git a/css/realtimePage.css b/css/realtimePage.css
@@ -39,6 +39,17 @@
     }
 }
 
+.btn-mising-values {
+    padding: 0.01rem 0.01rem;
+    font-size: 0.75rem;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+}
+
+.nav-burger-menu {
+    width: 120px;
+}
+
 
 /* Realtime-Chart */
 

diff --git a/js/overview-pages/configureDataTable.js b/js/overview-pages/configureDataTable.js
@@ -5,9 +5,9 @@ $(document).ready(function() {
         "searching": false,
         "ordering": true,
         "orderMulti": false,
-        "autoWidth": false,
+        //"autoWidth": true, // needed for responsive
         "scrollX": false,
-        "orderCellsTop": false,
+        "orderCellsTop": true,
         "pageLength": config.energy1.tablePageLength || 10,
         "responsive": true,
         "columnDefs": [{

diff --git a/js/realtime-page/configureRealtimeChart.js b/js/realtime-page/configureRealtimeChart.js
@@ -39,7 +39,7 @@ const scalesRealtime = {
         },
         ticks: {
             callback: function(value, index, values) {
-                return formatNumber(Number(value)) + ' W';
+                return formatCurrent(Number(value));
             }
         }
     }

diff --git a/js/utils.js b/js/utils.js
@@ -23,7 +23,7 @@ function formatCurrent(val, suffix = "") {
         return formattedValue + " mW" + suffix;
     } else if (Math.abs(val) >= 1000) {
         // For kW
-        formattedValue = (val / 1000).toFixed(2).replace('.', ',');
+        formattedValue = (val / 1000).toFixed(1).replace('.', ',');
         if ((val / 1000) % 1 === 0) {
             formattedValue = (val / 1000).toFixed(0).replace('.', ',');
         }

diff --git a/lib/utils/htmlHelper.php b/lib/utils/htmlHelper.php
@@ -26,7 +26,7 @@ public static function formatEnergyInWattAndCurrency(EnergyAndPriceTuple $energy
         $result = StringHelper::formatEnergyInWattHour($energyData->getEnergyInWatt());
         $inner = StringHelper::formatCurrency($energyData->getEnergyPriceInCent());
         $inner = $autarkyInPercent != null ? $inner." | ".StringHelper::formatNumber($autarkyInPercent, 0)."%" : $inner;
-        $result .= "&nbsp;(".$inner.")";
+        $result .= " (".$inner.")";
 
         return $result;
 
@@ -42,10 +42,10 @@ public static function formatFailureValue($titel, $nullRows, $rowCount)
 
     public static function formatFailureForPopover($title, $nullRows, $failurePercent)
     {
-        $result = '<div class="me-3 text-'.HtmlHelper::prepareFailureStyle($failurePercent).'"><strong>'.$title.'</strong></div>';
+        $result = '<div class="small me-3 text-'.HtmlHelper::prepareFailureStyle($failurePercent).'"><strong>'.$title.'</strong></div>';
         $text = ($nullRows == 0 ? '/' : StringHelper::formatIntNumber($nullRows));
-        $result.= '<div class="me-1 text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">'.$text.'</div>';
-        $result.= '<div class="text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">(' . $failurePercent . '%)</div>';        
+        $result.= '<div class="small me-1 text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">'.$text.'</div>';
+        $result.= '<div class="small text-'.HtmlHelper::prepareFailureStyle($failurePercent).'">(' . $failurePercent . '%)</div>';        
 
         return $result;
     }

diff --git a/realtimeOverview.php b/realtimeOverview.php
@@ -65,7 +65,7 @@
     "config" => $actualConfig->toJson()
 ];
 
-$partialTop = "views/pages/realtime/filter.phtml";
+$partialTop = "views/pages/realtime/filter-for-realtime.phtml";
 $partialBottom = "views/partials/chart-canvas.phtml";
 
 

diff --git a/views/pages/overview/filter-for-days-overview.phtml b/views/pages/overview/filter-for-days-overview.phtml
@@ -1,7 +1,7 @@
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-xxl-8">
         <?php include("views/pages/overview/filter-summary.phtml")?>
-        <table class="table table-sm table-borderless">
+        <table class="table table-sm table-borderless m-0">
         <form method="post" id="date-range-form" action="">                
             <input type="hidden" name="year1" id="year1" value="<?=$selectedYear1?>">                
             <input type="hidden" name="year2" id="year2" value="<?=$selectedYear2?>">

diff --git a/views/pages/overview/filter-for-hours-overview.phtml b/views/pages/overview/filter-for-hours-overview.phtml
@@ -1,7 +1,7 @@
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-xxl-8">
         <?php include("views/pages/overview/filter-summary.phtml")?>
-        <table class="table table-sm table-borderless w-auto" style="table-layout: flex;">
+        <table class="table table-sm table-borderless w-auto m-0" style="table-layout: flex;">
         <form method="post" id="date-range-form" action="">
             <?php include_once("filter-hidden-config-values.phtml"); ?>
             <tbody>

diff --git a/views/pages/overview/filter-for-months-overview.phtml b/views/pages/overview/filter-for-months-overview.phtml
@@ -1,7 +1,7 @@
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-xxl-8">
         <?php include("views/pages/overview/filter-summary.phtml")?>
-        <table class="table table-sm table-borderless w-auto" style="table-layout: flex;">
+        <table class="table table-sm table-borderless w-auto m-0" style="table-layout: flex;">
         <form method="post" id="date-range-form" action="">
             <input type="hidden" name="year1" id="year1" value="<?=$selectedYear1?>">
             <input type="hidden" name="year2" id="year2" value="<?=$selectedYear2?>">

diff --git a/views/pages/overview/filter-summary.phtml b/views/pages/overview/filter-summary.phtml
@@ -1,5 +1,5 @@
 
-    <table class="table table-sm w-100">
+    <table class="table table-sm w-100 m-0 mb-sm-1 mb-md-2">
         <tbody>
             <!-- Header -->
             <tr class="table-secondary">
@@ -76,6 +76,8 @@
             <?php } ?>
         </tbody>
     </table>
+    <div class="p-1"></div>
+
 
 <!-- Popover content for missing values 1+2 -->
  <?=HtmlHelper::renderPopoverFailureTemplate($overviewPageService->getMissingRowSet1(), "missingRowSetTable1");?>

diff --git a/views/pages/realtime/filter-for-realtime.phtml b/views/pages/realtime/filter-for-realtime.phtml
@@ -0,0 +1,110 @@
+<div class="row justify-content-center">
+    <div class="col-12 col-md-10 col-xxl-8">
+        <form method="post" id="date-range-form" action="" >
+        <input type="hidden" id="realtime_chartShowEM" name="realtime_chartShowEM" value="<?=$actualConfig->configRealtime()->getChartShowEM()?>">
+        <input type="hidden" id="realtime_chartShowPMTotal" name="realtime_chartShowPMTotal" value="<?=$actualConfig->configRealtime()->getChartShowPMTotal()?>">
+        <input type="hidden" id="realtime_chartShowPM1" name="realtime_chartShowPM1" value="<?=$actualConfig->configRealtime()->getChartShowPM1()?>">
+        <input type="hidden" id="realtime_chartShowPM2" name="realtime_chartShowPM2" value="<?=$actualConfig->configRealtime()->getChartShowPM2()?>">
+        <input type="hidden" id="realtime_chartShowPM3" name="realtime_chartShowPM3" value="<?=$actualConfig->configRealtime()->getChartShowPM3()?>">
+        <table class="table table-sm w-100 m-0 mb-sm-1 mb-md-2">
+            <thead>
+                <tr>
+                    <th class="table-active"style="text-align: left;">Filter</th>                
+                    <th class="table-active"></th>
+                    <th class="table-active"></th>                                        
+                    <th class="table-active"></th>                                        
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="table-light">
+                    <!-- From time -->
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <label for="from-date" class="form-label small m-0 d-none d-sm-inline mb-0"><strong>Von:</strong></label>
+                            <input type="datetime-local" id="from-date" name="from-date" 
+                                value="<?=substr($startTime, 0, 16)?>" 
+                                class="form-control form-control-sm" style="max-width: 170px;">
+                        </div>
+                    </td>
+                    <!-- Line 1 -->
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <label for="line1" class="form-label small m-0 d-none d-sm-inline mb-0"><strong class="d-none d-sm-inline">Linie&nbsp;1:</strong></label>
+                            <select name="line1" id="line1" class="form-control form-control-sm" style="max-width: 120px;">
+                                <?php foreach($actualConfig->getLinePossibilities() as $val) { ?>
+                                    <option value="<?=$val?>" <?php echo ($actualConfig->getLine1() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWatt($val)?></option>
+                                <?php } ?>
+                            </select>
+                        </div>
+                        </div>
+                    </td>
+                    <!-- Resolution -->
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <label for="averagePossibility" class="form-label small m-0"><i class="bi bi-activity d-inline d-md-none"></i><strong class="d-none d-md-inline">Auflösung:</strong></label>
+                            <select name="averagePossibility" id="averagePossibility" class="form-control form-control-sm" style="max-width: 170px;">
+                                <?php foreach ($actualConfig->getAveragePossibilitiesInSec() as $val): ?>
+                                    <option value="<?=$val?>" <?=($actualConfig->getAveragePossibility() == $val) ? 'selected' : '';?>>
+                                        <?=TimeHelper::convertSecondsToLabel($val)?>
+                                    </option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                    </td>
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
+                            <div class="form-check m-0">
+                                <input type="checkbox" class="form-check-input" id="reloadCheckbox" name="reloadCheckbox" 
+                                    <?php if (isset($_REQUEST["reloadCheckbox"])) echo 'checked="checked"'; ?>>
+                                <label for="reloadCheckbox" class="form-check-label small"><i class="bi bi-arrow-repeat d-inline d-md-none"></i><span class="d-none d-md-inline">Autorefresh</span></label>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+                <tr class="table-light">
+                    <!-- To time-->
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <label for="to-date" class="form-label small m-0 d-none d-sm-inline mb-0"><strong>Bis:</strong></label>
+                            <input type="datetime-local" id="to-date" name="to-date" 
+                                value="<?=substr($endTime, 0, 16)?>" 
+                                class="form-control form-control-sm" style="max-width: 170px;">
+                        </div>
+                    </td>
+                    <!-- Line 2 -->
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <label for="line2" class="form-label small m-0 d-none d-sm-inline"><strong class="d-none d-sm-inline">Linie&nbsp;2:</strong></label>
+                                <select name="line2" id="line2" class="form-control form-control-sm" style="max-width: 120px;">
+                                    <?php foreach($actualConfig->getLinePossibilities() as $val) { ?>
+                                        <option value="<?=$val?>" <?php echo ($actualConfig->getLine2() == $val) ? 'selected' : ''; ?>><?=StringHelper::formatEnergyInWatt($val)?></option>
+                                    <?php } ?>
+                                </select>
+                            </label>
+                        </div>
+                    </td>
+                    <!-- Time range -->
+                    <td>
+                        <div style="display: flex; align-items: center; gap: 4px;">
+                            <label for="pastperiod" class="form-label small m-0"><i class="bi bi-clock d-inline d-md-none"></i><strong class="d-none d-md-inline">Zeitraum:</strong></label>
+                            <select name="pastperiod" id="pastperiod" class="form-control form-control-sm" style="max-width: 170px;">
+                                <option value="0">(?)</option>
+                                <?php foreach ($actualConfig->GetPastPeriodPossibilities() as $val): ?>
+                                    <option value="<?=$val?>" <?=($actualConfig->getPastPeriod() == $val) ? 'selected' : '';?>>
+                                    <?=TimeHelper::convertSecondsToLabel($val * 3600, "<", "<")?>
+                                    </option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                    </td>
+                    <td>
+                        <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-arrow-clockwise d-inline d-md-none"></i><span class="d-none d-md-inline">Aktualisieren</span></label></button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        </form>
+        <div class="p-1"></div>
+        <?php include("views/pages/realtime/filter-summary.phtml")?>
+    </div>
+</div>
diff --git a/views/pages/realtime/filter-savings.phtml b/views/pages/realtime/filter-savings.phtml
diff --git a/views/pages/realtime/filter-summary.phtml b/views/pages/realtime/filter-summary.phtml
@@ -0,0 +1,46 @@
+<table class="table table-sm w-100">
+    <tbody>
+        <!-- Header -->
+        <tr class="table-light">
+        <td class="small">
+                <div class="small" style="text-align: left;"><strong><span class="d-none d-sm-inline">Einkauf</span> < <?=$actualConfig->getLine1()?> W: <strong>
+                <?php $textLine1 = "Einkauf < {$actualConfig->getLine1()} W: ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyUnderX1()) ?>
+                <?php $textLine1 .= "<br> Einkauf > {$actualConfig->getLine1()} W: ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyOverX1()) ?>
+                <?php $textLine1 .= "<br> Einkauf {$actualConfig->getLine1()} bis {$actualConfig->getLine2()} W: ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyBetweenX1AndX2()) ?>
+                <?php $textLine1 .= "<br class='small'>(Nur der Anteil über bzw. unter {$actualConfig->getLine1()} W.)";?>
+                <i class="bi bi-info-circle text-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<?=$textLine1?>"></i><div>
+            </td>
+            <td class="small">
+                <div class="small" style="text-align: left;"><strong><span class="d-none d-sm-inline">Einkauf</span> > <?=$actualConfig->getLine2()?> W: <strong>
+                <?php $textLine2 = "Einkauf < {$actualConfig->getLine2()} W: ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyUnderX2()) ?>
+                <?php $textLine2 .= "<br>Einkauf > {$actualConfig->getLine2()} W: ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyOverX2()) ?>
+                <?php $textLine2 .= "<br> Einkauf {$actualConfig->getLine1()} bis {$actualConfig->getLine2()} W: ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyBetweenX1AndX2()) ?>
+                <?php $textLine2 .= "<br class='small'>(Nur der Anteil über bzw. unter {$actualConfig->getLine2()} W.)";?>
+                <i class="bi bi-info-circle text-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<?=$textLine2?>"></i><div>
+            </td>
+            <td class="small">
+                <div class="small" style="text-align: left;"><strong><span class="d-none d-sm-inline">Einkauf</span> > 0: <strong>
+                <?php $textEm = "Einspeisung (< 0W): ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyUnderZero()) ?>
+                <?php $textEm .= "<br>Einkauf (> 0 W): ".HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyOverZero()) ?>
+                <i class="bi bi-info-circle text-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<?=$textEm?>"></i><div>
+            </td>
+            <td class="small">
+                <div class="small" style="text-align: left;"><strong>Ertrag: <strong><div>
+            </td>
+        </tr>
+        <tr class="table-light">
+            <td class="small">
+                <div class="small" style="text-align: left;"><?=HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyUnderX1())?><div>
+            </td>
+            <td class="small">
+                <div class="small" style="text-align: left;"><?=HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyOverX2())?><div>
+            </td>
+            <td class="small">
+                <div class="small" style="text-align: left;"><?=HtmlHelper::formatEnergyInWattAndCurrency($energyData->getEnergyOverZero())?><div>
+            </td>
+            <td class="small">
+                <div class="small" style="text-align: left;"><?=HtmlHelper::formatEnergyInWattAndCurrency($energyData->getSavings())?><div>
+            </td>
+        </tr>
+    </tbody>
+</table>