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

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>