[client] Make reading type selector work

pull/26/head
Starbeamrainbowlabs 4 years ago
parent fb67fa7999
commit 95f2e673e2
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 31
      client_src/js/LayerHeatmap.mjs
  2. 4
      client_src/js/Map.mjs
  3. 9
      client_src/js/UI.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;

@ -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(
`${Config.api_root}?action=fetch-data&datetime=2019-01-03 07:52:10&reading_type=PM10`
)));
this.heatmap.update_data(new Date(), "PM25");
}
setup_layer_control() {

@ -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)
}
]);
}

Loading…
Cancel
Save