[client] Fix some bugs in the device chart, but there are a bunch still to go.

client_src/js/DeviceReadingDisplay.mjs

@@ -13,31 +13,56 @@ import Postify from './Helpers/Postify.mjs';
 
 
 class DeviceReadingDisplay {
-	constructor(in_config, in_device_id, in_reading_type) {
+	constructor(in_config, in_device_id) {
 		this.config = in_config;
-		/** @type {int} */
+		/** The ID of the device to display a graph for. @type {int} */
 		this.device_id = in_device_id;
-		// TODO: Allow the user to change this
+		/** The current reading type to display a graph for. @type {Object} */
-		/** @type {Object} */
+		this.reading_type = null;
-		this.reading_type = in_reading_type;
-		
-		this.setup_display();
 	}
 	
-	async setup_display() {
+	async setup(default_reading_type) {
+		// Create the display element first, as we need it to be immediately available for inclusion in the popup window
+		
 		/** @type {HTMLElement} */
 		this.display = CreateElement("div.chart-device-data",
 			CreateElement("canvas.canvas-chart"),
 			CreateElement("ul.reading-types")
 		);
 		
+		await this.fetch_reading_types();
+		this.reading_type = this.reading_types.find((type) => type.id == default_reading_type);
+		
+		let reading_type_list = this.display.querySelector(".reading-types");
+		for(let reading_type of this.reading_types) {
+			let new_element = CreateElement("li", reading_type.friendly_text);
+			new_element.dataset.id = reading_type.id;
+			reading_type_list.appendChild(new_element);
+		}
+		
+		// ----------------------------------------------------
+		
+		let data = null;
+		try {
+			data = await this.get_data();
+		} catch(error) {
+			// TODO: Display a nice error message here instead of an alert()
+			alert(error);
+			console.error(error);
+			return false;
+		}
+		
+		this.setup_chart(data);
+	}
+	
+	setup_chart(data) {
 		this.chart = new Chart(
 			this.display.querySelector("canvas").getContext("2d"), {
 				type: "line",
 				data: {
 					datasets: [{
 						label: this.reading_type.friendly_text,
-						data: await this.get_data
+						data
 					}]
 				},
 				options: {
@@ -52,8 +77,9 @@ class DeviceReadingDisplay {
 			action: "device-data",
 			"device-id": this.device_id,
 			"reading-type": this.reading_type.id,
-			start: (new Date()).toISOString(),
+			// Need to work in milliseconds here, not seconds
-			end: new Date(new Date - 60*60*24),
+			start: new Date(new Date - 1000*60*60*24).toISOString(),
+			end: (new Date()).toISOString(),
 			"average-seconds": 3600
 		})));
 		
@@ -62,6 +88,10 @@ class DeviceReadingDisplay {
 			y: data_point.value
 		}});
 	}
+	
+	async fetch_reading_types() {
+		this.reading_types = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=list-reading-types`));
+	}
 }
 
 export default DeviceReadingDisplay;

client_src/js/LayerDeviceMarkers.mjs

@@ -123,8 +123,10 @@ class LayerDeviceMarkers {
 		// ----------------------------------
 		
 		// TODO: Allow the user to change the reading type
-		let chart_device_data = new DeviceReadingDisplay(Config, device_info.id, "PM25");
+		let chart_device_data = new DeviceReadingDisplay(Config, device_info.id);
-		
+		chart_device_data.setup("PM25").then(() => 
+			console.info("[layer/markers] Device chart setup complete!")
+		);
 		data_container.appendChild(chart_device_data.display);
 		
 		// ----------------------------------