update

.idea/runConfigurations/bin_www.xml

@@ -2,6 +2,7 @@
   <configuration default="false" name="bin/www" type="NodeJSConfigurationType" path-to-js-file="bin/www" working-dir="$PROJECT_DIR$">
     <envs>
       <env name="DEBUG" value="pm25:*" />
+      <env name="MONGODB_URL" value="mongodb://localhost/pm25" />
     </envs>
     <EXTENSION ID="com.jetbrains.nodejs.run.NodeStartBrowserRunConfigurationExtension">
       <browser url="http://localhost:3000/" />

public/javascripts/main.js

@@ -74,15 +74,15 @@ var chart = new Chart(ctx, {
 		datasets: [{
 			label: 'PM2.5',
 			data: [],
-			backgroundColor: 'rgba(150,160,6,0.2)',
-			borderColor: 'rgb(166,202,5)',
+			backgroundColor: 'rgba(99,113,10,0.5)',
+			borderColor: 'rgb(183,224,2)',
 			borderWidth: 2,
 			fill: false
 		}, {
 			label: 'PM10',
 			data: [],
-			backgroundColor: 'rgba(0,156,144,0.2)',
-			borderColor: 'rgb(8,135,223)',
+			backgroundColor: 'rgba(161,2,189,0.5)',
+			borderColor: 'rgb(224,10,200)',
 			borderWidth: 2,
 			fill: false
 		}]
@@ -146,6 +146,13 @@ function addData(time, pm25, pm10) {
 	// 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()
+}
 
 
 
@@ -153,7 +160,7 @@ setInterval((  ) => {
 	//addData(new Date().toLocaleTimeString(), 1+Math.floor(Math.random() *2), 3+Math.floor(Math.random() * 2));
 	loadValues();
 	loadStatus();
-}, 2000);
+}, 1000 * 60 * 3 );
 
 
 function httpGetAsync(theUrl)
@@ -173,16 +180,41 @@ function httpGetAsync(theUrl)
 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() );
-		for( let entry of data )
+
+		let newData = [];
+		let last = 0;
+		for(let i = 0; i < data.length; i++)
 		{
-			addData(new Date(entry.createdAt).toLocaleTimeString(), entry.pm25, entry.pm10)
-			pm25.innerText = "" + (Math.round(entry.pm25*100)/100);
-			pm10.innerText = "" + (Math.round(entry.pm10*100)/100);
+			if(last + 1000 * 60 * 15 < 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();
 	})
 }
@@ -197,4 +229,17 @@ function loadStatus()
 	})
 }
 loadStatus();
-loadValues();
+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();
+}

public/stylesheets/style.css

@@ -24,6 +24,15 @@ h1 {
   overflow-x: hidden;
 }
 
+#divLeft {
+  float:left;
+  font-size: 0.8em;
+}
 #lastStatus {
+}
+
+#divRight {
+  float:right;
+  margin-right: 2%;
   font-size: 0.8em;
 }

routes/index.js

@@ -11,8 +11,6 @@ router.get('/', function(req, res, next) {
 
 
 router.get('/data/:timestamp', async (req,res) => {
-  let date = new Date(req.params.timestamp);
-
   try {
     let entries = await PMEntry.find({ updatedAt: {$gt: req.params.timestamp} });
     res.json(entries);

views/index.pug

@@ -1,7 +1,22 @@
 extends layout
 
 block content
-  h1 PM2.5 [<span id="pm25"></span>] & PM10 [<span id="pm10"></span>]
-  p#lastStatus
+  h1 PM2.5 [<span id="pm25">0</span>] & PM10 [<span id="pm10">0</span>]
+  div#divLeft
+    p#lastStatus
+  div#divRight
+    span Daten-Zeitspanne:
+    br
+    select#timespan_selector
+      option(value="1") 1 Stunde
+      option(value="5") 5 Stunden
+      option(value="12") 12 Stunden
+      option(value="24" selected) 1 Tag
+      option(value="72") 3 Tage
+      option(value="168") 7 Tage
+      option(value="672") 1 Monat (viele Daten!)
+      option(value="2016") 3 Monate (sehr viele Daten!)
+      option(value="8064") 1 Jahr (extrem viele Daten!)
+      option(value="99999999") Alles (unmengen an Daten!)
   div(style="width:100%; height:75vh;")
     canvas#chart