DasMoorhuhn/atc_mithermometer_gateway
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make docker image from 1GB to around 100MB

Browse Source
This commit is contained in:
DasMoorhuhn
2024-06-27 00:42:25 +02:00
parent 72762340ce
commit 9581a3ce2c
16 changed files with 2693 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2594
Charts/data.json
View File

File diff suppressed because it is too large Load Diff

205
Charts/index.html
View File

@@ -25,30 +25,88 @@
.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>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 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 => {
const deviceDataMap = new Map();
jsonData.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));
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);
@@ -68,75 +126,78 @@
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: [
// Ü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: [
{
id: 'y-axis-temp',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true,
fontColor: 'white'
},
scaleLabel: {
display: true,
labelString: 'Temperatur (°C)',
fontColor: 'white'
}
label: 'Temperatur (°C)',
data: temperatures,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
yAxisID: 'y-axis-temp'
},
{
id: 'y-axis-humidity',
type: 'linear',
position: 'right',
ticks: {
beginAtZero: true,
fontColor: 'white'
},
scaleLabel: {
display: true,
labelString: 'Feuchtigkeit (%)',
fontColor: 'white'
}
}
],
xAxes: [
{
ticks: {
fontColor: 'white'
}
label: 'Feuchtigkeit (%)',
data: humidities,
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.2)',
yAxisID: 'y-axis-humidity'
}
]
},
legend: {
labels: {
fontColor: 'white'
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>

107
Charts/script.js
View File

@@ -1,107 +0,0 @@
document.addEventListener('DOMContentLoaded', function () {
fetch('data.json')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
const devices = {};
data.forEach(entry => {
const mac = entry.device.mac;
if (!devices[mac]) {
devices[mac] = {
temperatureData: [],
humidityData: [],
labels: [],
name: entry.device.name,
room: entry.device.room
};
}
devices[mac].labels.push(new Date(entry.data.timestamp));
devices[mac].temperatureData.push(entry.data.temperature);
devices[mac].humidityData.push(entry.data.humidity);
});
const chartsContainer = document.getElementById('chartsContainer');
Object.keys(devices).forEach(mac => {
const device = devices[mac];
const chartContainer = document.createElement('div');
chartContainer.className = 'chart-container';
const canvas = document.createElement('canvas');
canvas.id = `chart-${mac}`;
const title = document.createElement('h3');
title.textContent = `Device ${device.name} in ${device.room}`;
chartContainer.appendChild(title);
chartContainer.appendChild(canvas);
chartsContainer.appendChild(chartContainer);
const ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: device.labels,
datasets: [
{
label: 'Temperatur (°C)',
data: device.temperatureData,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderWidth: 1,
yAxisID: 'y1'
},
{
label: 'Luftfeuchtigkeit (%)',
data: device.humidityData,
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderWidth: 1,
yAxisID: 'y2'
}
]
},
options: {
responsive: true,
scales: {
x: {
type: 'time',
time: {
unit: 'minute',
tooltipFormat: 'll HH:mm'
}
},
y1: {
type: 'linear',
position: 'left',
beginAtZero: true,
title: {
display: true,
text: 'Temperatur (°C)'
}
},
y2: {
type: 'linear',
position: 'right',
beginAtZero: true,
title: {
display: true,
text: 'Luftfeuchtigkeit (%)'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
});
})
.catch(error => console.error('Error loading JSON data:', error));
});

20
Charts/styles.css
View File

@@ -1,20 +0,0 @@
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.chart-container {
width: 80%;
margin: 20px 0;
}
canvas {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}