Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c72a779865 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -2,5 +2,6 @@ __pycache__
|
||||
devices.yml
|
||||
history.*
|
||||
data/
|
||||
*.json
|
||||
*.iso
|
||||
*.cow
|
||||
2578
Charts/data.json
2578
Charts/data.json
File diff suppressed because it is too large
Load Diff
@ -1,204 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Geräte-Diagramme</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.chart-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #1e1e1e;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.chart {
|
||||
padding: 10px;
|
||||
}
|
||||
.device-info {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.datetimepicker-container {
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.datetimepicker-container input, .datetimepicker-container button {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.datetimepicker-container button {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<!-- Lokale Kopie von Chart.js einbinden -->
|
||||
<script src="chart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Geräte-Diagramme</h1>
|
||||
<div class="datetimepicker-container">
|
||||
<input type="date" id="startDate">
|
||||
<input type="time" id="startTime">
|
||||
<input type="date" id="endDate">
|
||||
<input type="time" id="endTime">
|
||||
<button onclick="applyDateTimeRange()">Anwenden</button>
|
||||
</div>
|
||||
<div id="charts"></div>
|
||||
|
||||
<script>
|
||||
let allData = [];
|
||||
|
||||
fetch('data.json')
|
||||
.then(response => response.json())
|
||||
.then(jsonData => {
|
||||
allData = jsonData;
|
||||
console.log('Loaded data:', allData); // Konsolenausgabe für Debugging
|
||||
displayCharts(jsonData);
|
||||
})
|
||||
.catch(error => console.error('Error loading data:', error));
|
||||
|
||||
function applyDateTimeRange() {
|
||||
const startDate = new Date(document.getElementById('startDate').value);
|
||||
const startTime = document.getElementById('startTime').value;
|
||||
const endDate = new Date(document.getElementById('endDate').value);
|
||||
const endTime = document.getElementById('endTime').value;
|
||||
|
||||
// Kombinieren von Datum und Zeit zu UTC-Zeit
|
||||
const startDateTime = new Date(Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
|
||||
parseInt(startTime.substring(0, 2)), parseInt(startTime.substring(3, 5))));
|
||||
const endDateTime = new Date(Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(),
|
||||
parseInt(endTime.substring(0, 2)), parseInt(endTime.substring(3, 5))));
|
||||
|
||||
const filteredData = allData.filter(entry => {
|
||||
const entryDate = new Date(entry.data.timestamp);
|
||||
return entryDate >= startDateTime && entryDate <= endDateTime;
|
||||
});
|
||||
|
||||
console.log('Filtered data:', filteredData); // Konsolenausgabe für Debugging
|
||||
|
||||
displayCharts(filteredData);
|
||||
}
|
||||
|
||||
function displayCharts(data) {
|
||||
document.getElementById('charts').innerHTML = '';
|
||||
const deviceDataMap = new Map();
|
||||
data.forEach(entry => {
|
||||
const deviceMac = entry.device.mac;
|
||||
if (!deviceDataMap.has(deviceMac)) {
|
||||
deviceDataMap.set(deviceMac, {info: entry.device, data: []});
|
||||
}
|
||||
deviceDataMap.get(deviceMac).data.push(entry.data);
|
||||
});
|
||||
|
||||
console.log('Device data map:', deviceDataMap); // Konsolenausgabe für Debugging
|
||||
|
||||
deviceDataMap.forEach((deviceData, deviceMac) => createChart(deviceData));
|
||||
}
|
||||
|
||||
function createChart(deviceData) {
|
||||
const labels = deviceData.data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
|
||||
const temperatures = deviceData.data.map(entry => entry.temperature);
|
||||
const humidities = deviceData.data.map(entry => entry.humidity);
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'chart-container';
|
||||
|
||||
const deviceInfo = document.createElement('div');
|
||||
deviceInfo.className = 'device-info';
|
||||
deviceInfo.innerHTML = `<strong>${deviceData.info.name}</strong> (${deviceData.info.room})`;
|
||||
container.appendChild(deviceInfo);
|
||||
|
||||
const ctx = document.createElement('canvas');
|
||||
ctx.className = 'chart';
|
||||
container.appendChild(ctx);
|
||||
|
||||
document.getElementById('charts').appendChild(container);
|
||||
|
||||
// Überprüfen, ob Chart.js geladen ist, bevor das Chart-Objekt erstellt wird
|
||||
if (typeof Chart !== 'undefined') {
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperatur (°C)',
|
||||
data: temperatures,
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
yAxisID: 'y-axis-temp'
|
||||
},
|
||||
{
|
||||
label: 'Feuchtigkeit (%)',
|
||||
data: humidities,
|
||||
borderColor: 'rgba(153, 102, 255, 1)',
|
||||
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
||||
yAxisID: 'y-axis-humidity'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-axis-temp',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: 'white'
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Temperatur (°C)',
|
||||
fontColor: 'white'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'y-axis-humidity',
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: 'white'
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Feuchtigkeit (%)',
|
||||
fontColor: 'white'
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
fontColor: 'white'
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('Chart.js is not loaded.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,181 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Geräte-Diagramme</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.chart-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #1e1e1e;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.chart {
|
||||
padding: 10px;
|
||||
}
|
||||
.device-info {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.datepicker-container {
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.datepicker-container input, .datepicker-container button {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.datepicker-container button {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Geräte-Diagramme</h1>
|
||||
<div class="datepicker-container">
|
||||
<input type="date" id="startDate">
|
||||
<input type="date" id="endDate">
|
||||
<button onclick="applyDateRange()">Anwenden</button>
|
||||
</div>
|
||||
<div id="charts"></div>
|
||||
|
||||
<script>
|
||||
let allData = [];
|
||||
|
||||
fetch('history.json')
|
||||
.then(response => response.json())
|
||||
.then(jsonData => {
|
||||
allData = jsonData;
|
||||
displayCharts(jsonData);
|
||||
})
|
||||
.catch(error => console.error('Error loading data:', error));
|
||||
|
||||
function applyDateRange() {
|
||||
const startDate = new Date(document.getElementById('startDate').value);
|
||||
const endDate = new Date(document.getElementById('endDate').value);
|
||||
const filteredData = allData.filter(entry => {
|
||||
const entryDate = new Date(entry.data.timestamp);
|
||||
return entryDate >= startDate && entryDate <= endDate;
|
||||
});
|
||||
displayCharts(filteredData);
|
||||
}
|
||||
|
||||
function displayCharts(data) {
|
||||
document.getElementById('charts').innerHTML = '';
|
||||
const deviceDataMap = new Map();
|
||||
data.forEach(entry => {
|
||||
const deviceMac = entry.device.mac;
|
||||
if (!deviceDataMap.has(deviceMac)) {
|
||||
deviceDataMap.set(deviceMac, {info: entry.device, data: []});
|
||||
}
|
||||
deviceDataMap.get(deviceMac).data.push(entry.data);
|
||||
});
|
||||
|
||||
deviceDataMap.forEach((deviceData, deviceMac) => createChart(deviceData));
|
||||
}
|
||||
|
||||
function createChart(deviceData) {
|
||||
const labels = deviceData.data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
|
||||
const temperatures = deviceData.data.map(entry => entry.temperature);
|
||||
const humidities = deviceData.data.map(entry => entry.humidity);
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'chart-container';
|
||||
|
||||
const deviceInfo = document.createElement('div');
|
||||
deviceInfo.className = 'device-info';
|
||||
deviceInfo.innerHTML = `<strong>${deviceData.info.name}</strong> (${deviceData.info.room})`;
|
||||
container.appendChild(deviceInfo);
|
||||
|
||||
const ctx = document.createElement('canvas');
|
||||
ctx.className = 'chart';
|
||||
container.appendChild(ctx);
|
||||
|
||||
document.getElementById('charts').appendChild(container);
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperatur (°C)',
|
||||
data: temperatures,
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
yAxisID: 'y-axis-temp'
|
||||
},
|
||||
{
|
||||
label: 'Feuchtigkeit (%)',
|
||||
data: humidities,
|
||||
borderColor: 'rgba(153, 102, 255, 1)',
|
||||
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
||||
yAxisID: 'y-axis-humidity'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
id: 'y-axis-temp',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: 'white'
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Temperatur (°C)',
|
||||
fontColor: 'white'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'y-axis-humidity',
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
fontColor: 'white'
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Feuchtigkeit (%)',
|
||||
fontColor: 'white'
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxes: [{ // Hier war der Fehler
|
||||
ticks: {
|
||||
fontColor: 'white'
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
TAG="latest"
|
||||
CONTAINER="dasmoorhuhn/atc-mithermometer-gateway"
|
||||
CONTAINER_NAME="ATC_MiThermometer_Gateway"
|
||||
@ -157,5 +155,5 @@ while [ "$1" != "" ]; do
|
||||
esac
|
||||
done
|
||||
|
||||
# docker_run
|
||||
docker_run
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user