puffer service

Heizung/WEBROOT/src/MVC/Controller/PufferController.php

@@ -3,16 +3,56 @@
 namespace MVC\Controller;
 
 use MVC\Core\Controller;
-// use MVC\Model\YourModel; // Importiere dein Model
+use MVC\Model\Messungen;
 
 class PufferController extends Controller {
+
     public function puffer() {
-        // Nutze Models für den Datenbankzugriff
-        // $data = YourModel::all();
+
+        // Tag holen
+        $day = $_GET['day'] ?? date('Y-m-d');
+
+        // Validierung
+        $datum = \DateTime::createFromFormat('Y-m-d', $day);
+        if (!$datum) {
+            $day = date('Y-m-d');
+        }
+
+        // Daten laden
+        $array = Messungen::getPufferByDay($day);
+
+        // Chart Daten vorbereiten
+        $labels = [];
+        $pufferOben = [];
+        $pufferUnten = [];
+
+        foreach ($array as $row) {
+
+            // Zeit kürzen für Chart
+            $labels[] = date('H:i:s', strtotime($row['ts']));
+
+            $pufferOben[] = (float)$row['kessel_oben'];
+            $pufferUnten[] = (float)$row['kessel_unten'];
+        }
+
+        // Navigation
+        $prevDay = date('Y-m-d', strtotime($day . ' -1 day'));
+        $nextDay = date('Y-m-d', strtotime($day . ' +1 day'));
 
         return $this->render('puffer', [
-            'title' => 'Puffer Modul',
-            'message' => 'Willkommen in deinem neuen Modul Puffer!'
+            'title' => 'Puffer Übersicht',
+            'xtitle' => 'Zeit',
+            'ytitle' => 'Temperatur',
+
+            'array' => $array,
+
+            'labels' => $labels,
+            'pufferOben' => $pufferOben,
+            'pufferUnten' => $pufferUnten,
+
+            'day' => $day,
+            'prevDay' => $prevDay,
+            'nextDay' => $nextDay,
         ]);
     }
 }

Heizung/WEBROOT/src/MVC/Model/Messungen.php

@@ -29,4 +29,9 @@ class Messungen extends Model {
         $sql = "SELECT ts, vorlauf_ist, vorlauf_soll FROM " . self::$table . " WHERE ts LIKE '$day%' ORDER BY ts ASC";
         return self::query($sql)->fetch_all(MYSQLI_ASSOC);
     }
+
+    public static function getPufferByDay($day) {
+        $sql = "SELECT ts, kessel_oben, kessel_unten FROM " . self::$table . " WHERE ts LIKE '$day%' ORDER BY ts ASC";
+        return self::query($sql)->fetch_all(MYSQLI_ASSOC);
+    }
 }

Heizung/WEBROOT/src/MVC/View/puffer.php

@@ -1,14 +1,123 @@
-<h2><?= htmlspecialchars($title) ?></h2>
-<div class="card">
-    <p><?= htmlspecialchars($message) ?></p>
-    <p>Hier kannst du nun dein Projekt aufbauen.</p>
+<?php
+
+/**
+ * @var array $array
+ * @var string $prevDay
+ * @var string $nextDay
+ * @var string $day
+ * @var string $title
+ * @var string $xtitle
+ * @var string $ytitle
+ */
+
+$labels = [];
+$pufferOben = [];
+$pufferUnten = [];
+
+foreach ($array as $row) {
+    $labels[] = date('H:i:s', strtotime($row['ts']));
+    $pufferOben[] = (float)$row['kessel_oben'];
+    $pufferUnten[] = (float)$row['kessel_unten'];
+}
+?>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
+
+<div style="height:800px;">
+    <canvas id="logChart"></canvas>
 </div>
 
-<style>
-    .card {
-        background: var(--card-bg);
-        padding: 20px;
-        border-radius: 8px;
-        border: 1px solid var(--card-border);
+<script>
+const ctx = document.getElementById('logChart').getContext('2d');
+
+new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: <?php echo json_encode($labels); ?>,
+
+        datasets: [
+            {
+                label: 'Puffer Oben',
+                data: <?php echo json_encode($pufferOben); ?>,
+                borderColor: 'rgba(54, 162, 235, 1)',
+                backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                tension: 0.2,
+                fill: false
+            },
+            {
+                label: 'Puffer Unten',
+                data: <?php echo json_encode($pufferUnten); ?>,
+                borderColor: 'rgba(255, 99, 132, 1)',
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                tension: 0.2,
+                fill: false
+            }
+        ]
+    },
+
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+
+        plugins: {
+            title: {
+                display: true,
+                text: '<?= $title ?>'
+            },
+
+            legend: {
+                display: true,
+                position: 'top'
+            },
+
+            zoom: {
+                pan: {
+                    enabled: true,
+                    mode: 'x'
+                },
+                zoom: {
+                    wheel: {
+                        enabled: true
+                    },
+                    pinch: {
+                        enabled: true
+                    },
+                    mode: 'x'
+                }
+            }
+        },
+
+        interaction: {
+            mode: 'index',
+            intersect: false
+        },
+
+        scales: {
+            x: {
+                title: {
+                    display: true,
+                    text: '<?=  $xtitle ?>'
+                }
+            },
+            y: {
+                title: {
+                    display: true,
+                    text: '<?= $ytitle ?>'
+                },
+                beginAtZero: false
+            }
+        }
     }
-</style>
+});
+</script>
+
+<div style="margin-bottom:20px;">
+    <a href="?service=puffer&day=<?php echo $prevDay; ?>">← Vorheriger Tag</a>
+
+    <strong style="margin:0 20px;">
+        <?php echo $day; ?>
+    </strong>
+
+    <a href="?service=puffer&day=<?php echo $nextDay; ?>">Nächster Tag →</a>
+</div>