[client] Make reading type selector work

client_src/js/LayerHeatmap.mjs

@@ -3,6 +3,7 @@
 import HeatmapOverlay from 'leaflet-heatmap';
 
 import Config from './Config.mjs';
+import GetFromUrl from './Helpers/GetFromUrl.mjs';
 
 
 class LayerHeatmap {
@@ -30,6 +31,36 @@ class LayerHeatmap {
 		}
 		this.layer.setData(data_object);
 	}
+	
+	async update_data(datetime, reading_type) {
+		if(!(datetime instanceof Date))
+			throw new Exception("Error: 'datetime' must be an instance of Date.");
+		if(typeof reading_type != "string")
+			throw new Exception("Error: 'reading_type' must be a string.");
+		
+		this.datetime = datetime;
+		this.reading_type = reading_type;
+		
+		console.log("[map/heatmap] Updating values to", this.reading_type, "@", this.datetime);
+		
+		this.set_data(JSON.parse(await GetFromUrl(
+			`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(this.datetime.toISOString())}&reading_type=${encodeURIComponent(this.reading_type)}`
+		)));
+	}
+	
+	
+	async update_reading_type(reading_type) {
+		await this.update_data(
+			this.datetime,
+			reading_type
+		);
+	}
+	async update_datetime(datetime) {
+		await this.update_data(
+			datetime,
+			this.reading_type
+		);
+	}
 }
 
 export default LayerHeatmap;

client_src/js/Map.mjs

@@ -60,9 +60,7 @@ class Map {
 		// TODO: Use leaflet-timedimension here
 		// TODO: Allow configuration of the different reading types here
 		
-		this.heatmap.set_data(JSON.parse(await GetFromUrl(
+		this.heatmap.update_data(new Date(), "PM25");
-			`${Config.api_root}?action=fetch-data&datetime=2019-01-03 07:52:10&reading_type=PM10`
-		)));
 	}
 	
 	setup_layer_control() {

client_src/js/UI.mjs

@@ -23,7 +23,6 @@ class UI {
 			{
 				type: "range",
 				name: "Heatmap Blob Radius",
-				help: "The radius of blobs on the heatmap.",
 				items: [
 					0.001,		// min
 					0.05,	// max
@@ -37,7 +36,13 @@ class UI {
 			{
 				// TODO: Add a setting for the different reading types here
 				type: "select",
-				items: this.reading_types.map((type) => type.friendly_text)
+				name: "Reading Type",
+				items: this.reading_types.map((type) => type.friendly_text),
+				callback: ((event) => {
+					let new_type = this.reading_types.find((type) => type.friendly_text == event.target.value).id;
+					
+					this.map_manager.heatmap.update_reading_type(new_type);
+				}).bind(this)
 			}
 		]);
 	}