diff --git a/client_src/js/DeviceReadingDisplay.mjs b/client_src/js/DeviceReadingDisplay.mjs index 510da0c..f8f74fc 100644 --- a/client_src/js/DeviceReadingDisplay.mjs +++ b/client_src/js/DeviceReadingDisplay.mjs @@ -7,35 +7,58 @@ import CreateElement from '../../node_modules/dom-create-element-query-selector/ import Chart from 'chart.js'; import GetFromUrl from './Helpers/GetFromUrl.mjs'; +import Postify from './Helpers/Postify.mjs'; class DeviceReadingDisplay { - get device_id() { return this._device_id; } - set device_id(value) { - this._device_id = value; - this.update_display(); - } - - constructor(in_config, in_device_id) { - this.setup_display(); - + constructor(in_config, in_device_id, in_reading_type) { this.config = in_config; - this._device_id = in_device_id; // We don't want to update until we have everything we need + /** @type {int} */ + this.device_id = in_device_id; + // TODO: Allow the user to change this + /** @type {Object} */ + this.reading_type = in_reading_type; + + this.setup_display(); } - setup_display() { + async setup_display() { + /** @type {HTMLElement} */ this.display = CreateElement("div.chart-device-data", CreateElement("canvas.canvas-chart"), CreateElement("ul.reading-types") ); - } - set_reading_types(new_reading_types, starting_index) { - this.reading_types = new_reading_types; - this.selected_reading_type = this.reading_types[starting_index]; + + 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 + }] + }, + options: { + + } + } + ); } - async update_display() { - let new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=`)) + async get_data() { + let new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({ + action: "device-data", + "device-id": this.device_id, + "reading-type": this.reading_type.id, + start: (new Date()).toISOString(), + end: new Date(new Date - 60*60*24), + "average-seconds": 3600 + }))); + + return new_data.map((data_point) => { return { + x: new Date(data_point.datetime), + y: data_point.value + }}); } } diff --git a/client_src/js/Helpers/Postify.mjs b/client_src/js/Helpers/Postify.mjs new file mode 100644 index 0000000..e465acd --- /dev/null +++ b/client_src/js/Helpers/Postify.mjs @@ -0,0 +1,9 @@ +"use strict"; + +function Postify(obj) { + return Object.keys(obj).map(function (key) { + return [key, encodeURIComponent(obj[key])].join("="); + }).join("&"); +} + +export default Postify; diff --git a/client_src/js/LayerDeviceMarkers.mjs b/client_src/js/LayerDeviceMarkers.mjs index 2d87e4c..5a5bf8e 100644 --- a/client_src/js/LayerDeviceMarkers.mjs +++ b/client_src/js/LayerDeviceMarkers.mjs @@ -7,6 +7,7 @@ import 'leaflet.markercluster'; import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js'; import Config from './Config.mjs'; +import DeviceReadingDisplay from './DeviceReadingDisplay.mjs'; import GetFromUrl from './Helpers/GetFromUrl.mjs'; class LayerDeviceMarkers { @@ -108,6 +109,11 @@ class LayerDeviceMarkers { CreateElement("em", device_info.other) )); + // TODO: Allow the user to change the reading type + let chart_device_data = new DeviceReadingDisplay(Config, device_info.id, "PM25"); + + result.appendChild(chart_device_data.display); + return result; } } diff --git a/client_src/js/Map.mjs b/client_src/js/MapManager.mjs similarity index 99% rename from client_src/js/Map.mjs rename to client_src/js/MapManager.mjs index 0852c0d..cd0b179 100644 --- a/client_src/js/Map.mjs +++ b/client_src/js/MapManager.mjs @@ -11,7 +11,7 @@ import LayerDeviceMarkers from './LayerDeviceMarkers.mjs'; import LayerHeatmap from './LayerHeatmap.mjs'; import UI from './UI.mjs'; -class Map { +class MapManager { constructor() { } diff --git a/client_src/js/index.mjs b/client_src/js/index.mjs index 4f52fd5..e3a803e 100644 --- a/client_src/js/index.mjs +++ b/client_src/js/index.mjs @@ -4,9 +4,9 @@ import '../css/main.css'; // ---------------------------------------------------------------------------- -import Map from './Map.mjs'; +import MapManager from './MapManager.mjs'; window.addEventListener("load", function(_event) { - window.map = new Map(); + window.map = new MapManager(); window.map.setup(); });