sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-12-22 10:25:01 +00:00
Code Issues Releases Wiki Activity

[client] Make reading type selector work

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-01-19 13:35:25 +00:00
parent fb67fa7999
commit 95f2e673e2
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
client_src/js/LayerHeatmap.mjs
View file

@ -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;

4
client_src/js/Map.mjs
View file

@ -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() {

9
client_src/js/UI.mjs
View file

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