Eigene Stromwerte: Tabelle Responsive

SvenoF54 · Jan 27, 2025 · 8256d44 · 8256d44
1 parent 1764082
commit 8256d44
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 23 deletions.
diff --git a/css/optionsPages.css b/css/optionsPages.css
@@ -0,0 +1,15 @@
+#customEnergyValues {
+    width: 100% !important;
+    table-layout: auto !important;
+    font-family: Arial, sans-serif;
+    font-size: 0.75rem;
+}
+
+#customEnergyValues_info,
+#customEnergyValues_paginate .dt-paging-button,
+.dt-length,
+.dt-search,
+.dt-paging {
+    font-family: Arial, sans-serif !important;
+    font-size: 0.75rem !important;
+}
diff --git a/customEnergyValues.php b/customEnergyValues.php
@@ -63,7 +63,7 @@
 $pageTitle = "Eigene Stromdaten";
 $jsHeaderFiles = ["/js/utils.js"];
 $jsFooterFiles = ["/js/custom-energy-values/documentReady.js"];
-$cssFiles = [];
+$cssFiles = ["/css/optionsPages.css"];
 $jsVars = [];
 
 $partialTop = "views/pages/custom-energy-values/inputform.phtml";

diff --git a/js/custom-energy-values/documentReady.js b/js/custom-energy-values/documentReady.js
@@ -72,10 +72,14 @@ $(document).ready(function() {
         "paging": true,
         "searching": true,
         "ordering": true,
+        "orderMulti": false,
+        "scrollX": false,
+        "orderCellsTop": false,
         "order": [
             [0, 'asc']
         ],
         "pageLength": 25,
+        "responsive": true,
         "columnDefs": [{
             "targets": 0,
             "orderDataType": "dom-text", // Sort for "data-sort"-Attribute
@@ -90,4 +94,4 @@ $(document).ready(function() {
             search: "Suchen:",
         }
     });
-});
+});
diff --git a/js/custom-price-values/documentReady.js b/js/custom-price-values/documentReady.js
@@ -36,10 +36,14 @@ $(document).ready(function() {
         "paging": true,
         "searching": true,
         "ordering": true,
+        "orderMulti": false,
+        "scrollX": false,
+        "orderCellsTop": false,
         "order": [
             [0, 'asc']
         ],
         "pageLength": 25,
+        "responsive": true,
         "columnDefs": [{
             "targets": 0,
             "orderDataType": "dom-text", // Sort for "data-sort"-Attribute

diff --git a/views/pages/custom-energy-values/inputform.phtml b/views/pages/custom-energy-values/inputform.phtml
@@ -13,7 +13,7 @@
             <div class="row g-2">
                 <!-- Zeitstempel mit Monats-/Tagesauswahl -->
                 <div class="col-md-2 col-sm-12 align-top">
-                    <label for="timestamp" class="form-label small fw-bold">Zeitstempel<br>&nbsp;</label>
+                    <label for="timestamp" class="form-label small fw-bold"><span class="d-none d-xl-inline">Zeitstempel</span><span class="d-inline d-xl-none">Zeit</span><br>&nbsp;</label>
                     <div id="timestamp-wrapper">
                         <input type="<?=$dateOrMonth?>" class="form-control form-control-sm" id="timestamp" name="timestamp" required value="<?=isset($timestamp) ? $timestamp : ""?>">
                     </div>
@@ -33,51 +33,51 @@
 
                 <!-- Einkauf in kWh -->
                 <div class="col-md-2 col-sm-12 align-top">
-                    <label for="consumption" class="form-label small fw-bold">Einkauf<br>(kWh)</label>
+                    <label for="consumption" class="form-label small fw-bold"><span class="d-none d-xl-inline">Einkauf</span><span class="d-inline d-xl-none">Einkauf</span><br>(kWh)</label>
                     <input type="number" class="form-control form-control-sm" id="consumption" name="consumption" step="0.001" min="0" value="<?=isset($consumptionKwh) ? $consumptionKwh : ""?>">
                 </div>
 
                 <!-- Einspeisung in kWh (breiter) -->
                 <div class="col-md-3 col-sm-12 align-top">
-                    <label for="producedPower" class="form-label small fw-bold">Stromproduktion<br>(kWh)</label>
+                    <label for="producedPower" class="form-label small fw-bold"><span class="d-none d-xl-inline">Stromproduktion</span><span class="d-inline d-xl-none">Produktion</span><br>(kWh)</label>
                     <input type="number" class="form-control form-control-sm" id="producedPower" name="producedPower" step="0.001" min="0" value="<?=isset($producedPowerKwh) ? $producedPowerKwh : ""?>">
                     <div class="d-flex gap-2 mt-1">
                         <div class="form-check form-check-inline">
                             <label class="form-check-label small">
                             <input class="form-check-input" type="checkbox" id="phase1" name="phases[]" value="1" <?=isset($producedPowerPhases) && in_array(1, $producedPowerPhases) ? "checked" : ""?>>
-                            Phase 1
+                            <span class="d-none d-xl-inline">Phase 1</span><span class="d-inline d-xl-none">P1</span>
                         </label>
                         </div>
                         <div class="form-check form-check-inline">
                             <label class="form-check-label small" for="phase2">
                             <input class="form-check-input" type="checkbox" id="phase2" name="phases[]" value="2" <?=isset($producedPowerPhases) && in_array(2, $producedPowerPhases)? "checked" : ""?>>
-                            Phase 2
+                            <span class="d-none d-xl-inline">Phase 2</span><span class="d-inline d-xl-none">P2</span>
                             </label>
                         </div>
                         <div class="form-check form-check-inline">
                             <label class="form-check-label small" for="phase3">
                             <input class="form-check-input" type="checkbox" id="phase3" name="phases[]" value="3" <?=isset($producedPowerPhases) && in_array(3, $producedPowerPhases)? "checked" : ""?>>
-                            Phase 3
+                            <span class="d-none d-xl-inline">Phase 3</span><span class="d-inline d-xl-none">P3</span>
                             </label>
                         </div>
                     </div>
                 </div>
 
                 <!-- Power production in kWh -->
                 <div class="col-md-2 col-sm-12 align-top">
-                    <label for="feedIn" class="form-label small fw-bold">Einspeisung<br>(kWh)</label>
+                    <label for="feedIn" class="form-label small fw-bold"><span class="d-none d-xl-inline">Einspeisung</span><span class="d-inline d-xl-none">Einsp.</span><br>(kWh)</label>
                     <input type="number" class="form-control form-control-sm" id="feedIn" name="feedIn" step="0.001" min="0" value="<?=isset($feedInKwh) ? $feedInKwh : ""?>">
                 </div>
 
                 <!-- Purchase price -->
                 <div class="col-md-1 col-sm-12 align-top">
-                    <label for="price" class="form-label small fw-bold">Einkaufspreis<br>(Ct / kWh)</label>
+                    <label for="price" class="form-label small fw-bold"><span class="d-none d-xl-inline">Einkaufspreis</span><span class="d-inline d-xl-none">Eink.</span><br>(Ct / kWh)</label>
                     <input type="number" class="form-control form-control-sm" id="outCentPricePerKwh" name="outCentPricePerKwh" step="0.01" min="0" value="<?=isset($outCentPricePerKwh) ? $outCentPricePerKwh : ""?>" required>
                 </div>
 
                 <!-- Selling price -->
                 <div class="col-md-1 col-sm-12 align-top">
-                    <label for="price" class="form-label small fw-bold">Einspeisepreis<br>(Ct / kWh)</label>
+                    <label for="price" class="form-label small fw-bold"><span class="d-none d-xl-inline">Einspeisepreis</span><span class="d-inline d-xl-none">Einsp.</span><br>(Ct / kWh)</label>
                     <input type="number" class="form-control form-control-sm" id="inCentPricePerKwh" name="inCentPricePerKwh" step="0.01" min="0" value="<?=isset($inCentPricePerKwh) ? $inCentPricePerKwh : ""?>" required>
                     <div class="d-flex justify-content-end mt-2">
                         <button type="submit" class="btn btn-sm btn-primary">Speichern</button>

diff --git a/views/pages/custom-energy-values/values-list.phtml b/views/pages/custom-energy-values/values-list.phtml
@@ -5,21 +5,21 @@
             <tr>
                 <th class="table-active">Datum</th>
                 <th class="table-active">Einkauf</th>
-                <th class="table-active" colspan="3">Stromproduktion (kWh)</th>
-                <th class="table-active">Einspeisung</th>                
-                <th class="table-active">Einkaufspreis</th>
-                <th class="table-active">Einspeisepreis</th>
+                <th class="table-active" colspan="3"><span class="d-none d-xl-inline">Stromproduktion</span><span class="d-inline d-xl-none">Produktion</span> (kWh)</th>
+                <th class="table-active"><span class="d-none d-md-inline">Einspeisung</span></th>
+                <th class="table-active"><span class="d-none d-md-inline">Einkaufspreis</span></th>
+                <th class="table-active"><span class="d-none d-md-inline">Einspeisepreis</span></th>
                 <th class="table-active">Aktionen</th>
             </tr>
             <tr>
                 <th class="table-active"></th>
                 <th class="table-active">(kWh)</th>
-                <th class="table-active">Phase 1</th>
-                <th class="table-active">Phase 2</th>
-                <th class="table-active">Phase 3</th>
-                <th class="table-active">(kWh)</th>                
-                <th class="table-active">(Ct / kWh)</th>
-                <th class="table-active">(Ct / kWh)</th>
+                <th class="table-active"><span class="d-none d-xl-inline">Phase 1</span><span class="d-inline d-xl-none">P1</span></th>
+                <th class="table-active"><span class="d-none d-xl-inline">Phase 2</span><span class="d-inline d-xl-none">P2</span></th>
+                <th class="table-active"><span class="d-none d-xl-inline">Phase 3</span><span class="d-inline d-xl-none">P3</span></th>
+                <th class="table-active"><span class="d-none d-md-inline">(kWh)</span><span class="d-inline d-md-none">Einspeisung (kWh)</span></th>
+                <th class="table-active"><span class="d-none d-md-inline">(Ct / kWh)</span><span class="d-inline d-md-none">Einkaufspreis (Ct / kWh)</span></th>
+                <th class="table-active"><span class="d-none d-md-inline">(Ct / kWh)</span><span class="d-inline d-md-none">Einspeisepreis (Ct / kWh)</span></th>
                 <th class="table-active"></th>
             </tr>
         </thead>
@@ -52,10 +52,10 @@
                 <td class="text-end"><?=StringHelper::formatNumber($customData->getInCentPricePerWh() * 1000, 5)?></td>
                 <td>
                     <button class="btn btn-sm btn-primary edit-btn" title="Bearbeiten">
-                        <i class="bi bi-pencil-square"></i> Bearbeiten
+                        <i class="bi bi-pencil-square"></i> <span class="small m-0 d-none d-xl-inline">Bearbeiten</span>
                     </button>
                     <button class="btn btn-sm btn-danger delete-btn" title="Löschen">
-                        <i class="bi bi-trash"></i> Löschen
+                        <i class="bi bi-trash"></i> <span class="small m-0 d-none d-xl-inline">Löschen</span>
                     </button>
                 </td>
             </tr>