pm-feinstaub/public/javascripts/main.js

const lastStatus = document.getElementById("lastStatus");

const pm10 = document.getElementById("pm10");
const pm25 = document.getElementById("pm25");


// Define color ranges for the different value ranges
const colorRanges = {
	good: 'rgba(154, 204, 91, 0.5)',
	moderate: 'rgba(255, 235, 59, 0.5)',
	unhealthySensitive: 'rgba(255, 152, 0, 0.5)',
	unhealthy: 'rgba(255, 59, 59, 0.5)',
	veryUnhealthy: 'rgba(143, 63, 151, 0.5)',
	hazardous: 'rgba(126, 10, 2, 0.5)',
};

// Define the annotations
const annotations = {
	annotations:
	[
		{
			type: 'box',
			yMin: 0,
			yMax: 12,
			backgroundColor: colorRanges.good,
		},
		{
			type: 'box',

			yMin: 12.1,
			yMax: 35.4,
			backgroundColor: colorRanges.moderate,
		},
		{
			type: 'box',

			yMin: 35.5,
			yMax: 55.4,
			backgroundColor: colorRanges.unhealthySensitive,
		},
		{
			type: 'box',

			yMin: 55.5,
			yMax: 150.4,
			backgroundColor: colorRanges.unhealthy,
		},
		{
			type: 'box',

			yMin: 150.5,
			yMax: 250.4,
			backgroundColor: colorRanges.veryUnhealthy,
		},
		{
			type: 'box',
			yMin: 250.5,
			yMax: 800.4,
			backgroundColor: colorRanges.hazardous,
		},
		]
};


// Initialisiere das Chart-Objekt
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
	// Art des Diagramms
	type: 'line',

	// Daten
	data: {
		labels: [],
		datasets: [{
			label: 'PM2.5',
			data: [],
			backgroundColor: 'rgba(99,113,10,0.5)',
			borderColor: 'rgb(183,224,2)',
			borderWidth: 2,
			fill: false
		}, {
			label: 'PM10',
			data: [],
			backgroundColor: 'rgba(161,2,189,0.5)',
			borderColor: 'rgb(224,10,200)',
			borderWidth: 2,
			fill: false
		}]
	},

	// Konfigurationsoptionen
	options: {
		maintainAspectRatio: false,
		responsive: true,
		title: {
			display: true,
			text: 'Feinstaubwerte'
		},
		scales: {
			x: {
				/*type: 'time',
				time: {
					unit: 'hour',
					displayFormats: {
						hour: 'MMM D, hA'
					}
				},*/
				display: true,
			},
			y: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'µg/m³'
				},
				beginAtZero: true,
				suggestedMin: 0,
				suggestedMax: 10
			}
		},
		plugins: {
			annotation: annotations
		},
	},

});

// Funktion zum Hinzufügen neuer Datenpunkte
function addData(time, pm25, pm10) {
	// Füge die neuen Datenpunkte hinzu
	chart.data.labels.push(time);
	chart.data.datasets[0].data.push(pm25);
	chart.data.datasets[1].data.push(pm10);

	// Begrenze die Anzahl der Datenpunkte auf 100 oder die letzten 12 Stunden
	var maxPoints = 60;
	var maxTime = new Date();
	maxTime.setHours(maxTime.getHours() - 12);

	while (chart.data.labels.length > maxPoints || (chart.data.labels.length > 0 && new Date(chart.data.labels[0]) < maxTime)) {
		chart.data.labels.shift();
		chart.data.datasets[0].data.shift();
		chart.data.datasets[1].data.shift();
	}

	// Aktualisiere das Chart
	chart.update();
}
function removeData()
{
	chart.data.labels.length = 0;
	chart.data.datasets[0].data.length = 0;
	chart.data.datasets[1].data.length = 0;
	chart.update()
}



setInterval((  ) => {
	//addData(new Date().toLocaleTimeString(), 1+Math.floor(Math.random() *2), 3+Math.floor(Math.random() * 2));
	loadValues();
	loadStatus();
}, 1000 * 60 * 3 );


function httpGetAsync(theUrl)
{
	return new Promise( (resolve) => {
		const xmlHttp = new XMLHttpRequest();
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
				resolve(JSON.parse(xmlHttp.responseText));
		}
		xmlHttp.open("GET", theUrl, true); // true for asynchronous
		xmlHttp.send(null);
	})
}


let last_request = new Date();
last_request.setDate(last_request.getDate()-1);


function loadValues()
{
	return new Promise( async () => {
		let data = await httpGetAsync("/data/" + last_request.getTime() );

		let newData = [];
		let last = 0;
		for(let i = 0; i < data.length; i++)
		{
			if(!(last + 900000 > new Date(data[i].createdAt).getTime()) )
			{
				newData.push(data[i]);
				last = new Date(data[i].createdAt).getTime();
			}
		}

		for( let entry of newData )
		{
			let d = new Date(entry.createdAt);
			addData(d.toLocaleDateString() + " " + d.toLocaleTimeString(), entry.pm25, entry.pm10)
		}

		let entry = data[data.length-1];
		pm25.innerText = "" + (Math.round(entry.pm25*100)/100);
		pm10.innerText = "" + (Math.round(entry.pm10*100)/100);

		if(entry.pm25 > 100 )
			pm25.style.color = "red";
		else
			pm25.style.color = "black";

		if(entry.pm10 > 100 )
			pm10.style.color = "red";
		else
			pm10.style.color = "black";

		last_request = new Date();
	})
}
function loadStatus()
{
	return new Promise( async () => {
		let data = await httpGetAsync("/status" );
		if( data.sleeping )
			lastStatus.innerHTML = "Letzter Status:<br>Schläft | " + (new Date(data.createdAt).toLocaleTimeString()) + "<br>Status: " + (data["error"] ? "Fehler!" : "OK");
		else
			lastStatus.innerHTML = "Letzter Status:<br>Misst | " + (new Date(data.createdAt).toLocaleTimeString()) + "<br>Status: " + (data["error"] ? "Fehler!" : "OK");
	})
}
loadStatus();
loadValues();


let selector = document.getElementById("timespan_selector");
selector.value = "24";
selector.onchange = () => {
	let val = Number.parseInt(selector.value);

	removeData();
	last_request = new Date();
	last_request.setHours(last_request.getHours()-val);
	console.log("got", last_request);
	loadValues();
}