Frontend Demoboard
This commit is contained in:
246
server/index.html
Normal file
246
server/index.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user