From 5687acbf6693bbee0bac44b9787e5c6ac880f2b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20H=C3=A4fliger?= <dh@belevo.ch>
Date: Fri, 19 Apr 2024 16:48:55 +0200
Subject: [PATCH] Frontend Demoboard

---
 server/index.html | 246 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 server/index.html
diff --git a/server/index.html b/server/index.html
new file mode 100644
index 0000000..c0c08bb
--- /dev/null
+++ b/server/index.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>E-Manager Demoboard</title>
+    <!-- Lade die Highcharts-Bibliothek -->
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px; /* Änderung: Hinzufügen von Margin rund um die Seite */
+            padding: 20px;
+            background-color: #f4f4f4;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background-color: #ffffff;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        th, td {
+            border: 1px solid #dddddd;
+            text-align: left;
+            padding: 12px;
+        }
+        th {
+            background-color: #f2f2f2;
+        }
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        @media screen and (max-width: 600px) {
+            table {
+                overflow-x: auto;
+                display: block;
+            }
+            th, td {
+                white-space: nowrap;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<h1>E-Manager Demoboard</h1> <!-- Änderung: Hinzufügen des Titels -->
+
+<div id="container" style="width:80%; margin-left:10%;  height:400px;"></div>
+
+<script>
+// Lade die JSON-Daten
+fetch('data/BasToken.json')
+  .then(response => response.json())
+  .then(data => {
+    // Extrahiere die Zeitstempel und Werte für verschiedene Elemente
+    const timestamps = Object.keys(data);
+    const seriesData = timestamps.map(timestamp => {
+      const values = data[timestamp];
+      return {
+        x: new Date(timestamp).getTime(), // Zeitstempel in Millisekunden umwandeln
+        day_energy: values.producer_values.Producer_sum.day_energy,
+        pac: values.producer_values.Producer_sum.pac,
+        total_energy: values.producer_values.Producer_sum.total_energy,
+        year_energy: values.producer_values.Producer_sum.year_energy,
+        meter_phase_1: values.meter_values.Meter_Sum.Current_AC_Phase_1,
+        meter_phase_2: values.meter_values.Meter_Sum.Current_AC_Phase_2,
+        meter_phase_3: values.meter_values.Meter_Sum.Current_AC_Phase_3,
+        meter_real_power: values.meter_values.Meter_Sum.PowerReal_P_Sum
+      };
+    });
+
+    // Konfiguriere Highcharts
+    Highcharts.chart('container', {
+      chart: {
+        type: 'line'
+      },
+      title: {
+        text: 'Energiedaten'
+      },
+      xAxis: {
+        type: 'datetime',
+        title: {
+          text: 'Zeit'
+        }
+      },
+      yAxis: [{
+        title: {
+          text: 'Energie (Wh)'
+        }
+      }, {
+        title: {
+          text: 'Strom (A)'
+        },
+        opposite: true
+      }],
+      series: [{
+        name: 'Tagesenergie',
+        data: seriesData.map(entry => [entry.x, entry.day_energy]),
+        yAxis: 0
+      }, {
+        name: 'PAC',
+        data: seriesData.map(entry => [entry.x, entry.pac]),
+        yAxis: 0
+      }, {
+        name: 'Gesamtenergie',
+        data: seriesData.map(entry => [entry.x, entry.total_energy]),
+        yAxis: 0
+      }, {
+        name: 'Jahresenergie',
+        data: seriesData.map(entry => [entry.x, entry.year_energy]),
+        yAxis: 0
+      }, {
+        name: 'Meter Phase 1',
+        data: seriesData.map(entry => [entry.x, entry.meter_phase_1]),
+        yAxis: 1
+      }, {
+        name: 'Meter Phase 2',
+        data: seriesData.map(entry => [entry.x, entry.meter_phase_2]),
+        yAxis: 1
+      }, {
+        name: 'Meter Phase 3',
+        data: seriesData.map(entry => [entry.x, entry.meter_phase_3]),
+        yAxis: 1
+      }, {
+        name: 'Meter Real Power',
+        data: seriesData.map(entry => [entry.x, entry.meter_real_power]),
+        yAxis: 1
+      }]
+    });
+  })
+  .catch(error => {
+    console.error('Fehler beim Laden der Daten:', error);
+  });
+</script>
+<h2>Config Table</h2>
+<table id="configTable" style="width:80%; margin-left:10%;  height:200px;">
+    <thead>
+        <tr>
+            <th>Type</th>
+            <th>ID</th>
+            <th>User Priority</th>
+            <th>Lock Priority</th>
+            <!-- Additional fields for specific types -->
+            <th>Shelly IP</th>
+            <th>Boiler Power</th>
+            <th>Temperature</th>
+            <th>IP/Address</th>
+        </tr>
+    </thead>
+    <tbody>
+        <!-- Table body will be generated dynamically using JavaScript -->
+    </tbody>
+</table>
+
+<script>
+    // JSON configuration data
+    var jsonData = {
+        "metadata":{"config_has_changed" : "1"},
+        "users": [
+            {"type": "User1", "config": {"ID":"Umod1","user_prio":1,"lock_prio":2}},
+            {"type": "User1", "config": {"ID":"Umod3","user_prio":3,"lock_prio":4}},
+            {"type": "User1", "config": {"ID":"Umod2.0","user_prio":2,"lock_prio":3}},
+            {"type": "User1", "config": {"ID":"Umod2.1","user_prio":2,"lock_prio":3}},
+            {"type": "User1", "config": {"ID":"Umod2.2","user_prio":2,"lock_prio":3}},
+            {"type": "User1", "config": {"ID":"Umod2.3","user_prio":2,"lock_prio":3}},
+            {"type": "User2", "config": {"ID":"Usta2.0","user_prio":2,"lock_prio":6}},
+            {"type": "Boiler_1Stufig_Shelly", "config": {"ID":"shelly_Boiler","user_prio":2,"lock_prio":6, "shelly_ip" : "192.168.20.233", "boilerpower": 5000, "temperatur": 38}}
+        ],
+        "producers": [
+            {"type": "Fronius", "config": {"ID":"Fronius_15kW","IP":"192.168.20.51","Adr":1}},
+            {"type": "Fronius", "config": {"ID":"Fronius_20kW","IP":"192.168.20.51","Adr":2}}
+        ], 
+        "meters": [
+            {"type": "Fronius", "config": {"ID":"Meter_Fronius","IP":"192.168.20.51","Adr":1}}
+        ]
+    };
+
+    // Function to generate table rows
+    function generateRows() {
+        var tableBody = document.querySelector('#configTable tbody');
+
+        // Clear existing rows
+        tableBody.innerHTML = '';
+
+        // Generate rows for users
+        jsonData.users.forEach(function(user) {
+            var row = '<tr>';
+            row += '<td>' + user.type + '</td>';
+            row += '<td>' + user.config.ID + '</td>';
+            row += '<td>' + user.config.user_prio + '</td>';
+            row += '<td>' + user.config.lock_prio + '</td>';
+            // Add empty cells for additional fields
+            row += '<td></td>';
+            row += '<td></td>';
+            row += '<td></td>';
+            row += '<td></td>';
+            row += '</tr>';
+            tableBody.innerHTML += row;
+        });
+
+        // Generate rows for producers
+        jsonData.producers.forEach(function(producer) {
+            var row = '<tr>';
+            row += '<td>' + producer.type + '</td>';
+            row += '<td>' + producer.config.ID + '</td>';
+            row += '<td></td>'; // Empty cell for user priority
+            row += '<td></td>'; // Empty cell for lock priority
+            row += '<td></td>'; // Empty cell for additional field
+            row += '<td></td>'; // Empty cell for additional field
+            row += '<td></td>'; // Empty cell for additional field
+            row += '<td>' + producer.config.IP + '</td>';
+            row += '</tr>';
+            tableBody.innerHTML += row;
+        });
+
+        // Generate rows for meters
+        jsonData.meters.forEach(function(meter) {
+            var row = '<tr>';
+            row += '<td>' + meter.type + '</td>';
+            row += '<td>' + meter.config.ID + '</td>';
+            row += '<td></td>'; // Empty cell for user priority
+            row += '<td></td>'; // Empty cell for lock priority
+            row += '<td></td>'; // Empty cell for additional field
+            row += '<td></td>'; // Empty cell for additional field
+            row += '<td></td>'; // Empty cell for additional field
+            row += '<td>' + meter.config.IP + '</td>';
+            row += '</tr>';
+            tableBody.innerHTML += row;
+        });
+    }
+
+    // Call the function to generate table rows
+    generateRows();
+</script>
+
+</body>
+</html>
