83 lines
No EOL
2.4 KiB
JavaScript
83 lines
No EOL
2.4 KiB
JavaScript
"use strict";
|
|
|
|
/**
|
|
* Entry Script: Initialisierung der UI und Datenvisualisierung.
|
|
* Dieses Skript ist das Einstiegspunktmodul für die Anwendung.
|
|
* Es bindet UI-Ereignisse und startet den initialen Datenabruf.
|
|
*/
|
|
|
|
/**
|
|
* Ruft Messdaten von der API-Route /data ab.
|
|
* @async
|
|
* @returns {Promise<Array<Object>>} Array von Messobjekten
|
|
*/
|
|
async function fetchMeasurements() {
|
|
try {
|
|
const response = await fetch('/data');
|
|
if (!response.ok) throw new Error(`API error: ${response.status}`);
|
|
const data = await response.json();
|
|
return Array.isArray(data) ? data : [];
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Messdaten:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rendert das Diagramm auf Basis der Messdaten.
|
|
* Placeholder-Funktion, die vom Visualisierungsmodul überschrieben werden kann.
|
|
* @param {Array<Object>} data Messobjekte
|
|
*/
|
|
function renderChart(data) {
|
|
const chartContainer = document.getElementById('chart-container');
|
|
if (!chartContainer) return;
|
|
chartContainer.textContent = `Gerenderte Datenpunkte: ${data.length}`;
|
|
}
|
|
|
|
/**
|
|
* Registriert UI-Eventhandler für Filter und Interaktionen.
|
|
* @returns {void}
|
|
*/
|
|
function bindUIEvents() {
|
|
const refreshBtn = document.getElementById('refresh-btn');
|
|
const sensorSelect = document.getElementById('sensor-select');
|
|
const timeRangeInput = document.getElementById('time-range');
|
|
|
|
if (refreshBtn) {
|
|
refreshBtn.addEventListener('click', async () => {
|
|
const data = await fetchMeasurements();
|
|
renderChart(data);
|
|
});
|
|
}
|
|
|
|
if (sensorSelect) {
|
|
sensorSelect.addEventListener('change', async () => {
|
|
const sensorId = sensorSelect.value;
|
|
const data = await fetchMeasurements();
|
|
const filtered = data.filter(d => d.sensorId === sensorId);
|
|
renderChart(filtered);
|
|
});
|
|
}
|
|
|
|
if (timeRangeInput) {
|
|
timeRangeInput.addEventListener('input', async () => {
|
|
const range = timeRangeInput.value;
|
|
const data = await fetchMeasurements();
|
|
const filtered = data.filter(d => d.timestamp >= range);
|
|
renderChart(filtered);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialisiert das UI und startet den initialen Datenabruf.
|
|
* Wird nach dem DOMContentLoaded Event aufgerufen.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async function initApp() {
|
|
bindUIEvents();
|
|
const data = await fetchMeasurements();
|
|
renderChart(data);
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', initApp); |