Air-Quality-Web/client_src/js/LayerDeviceMarkers.mjs

170 lines
5 KiB
JavaScript
Raw Normal View History

"use strict";
import L from 'leaflet';
import 'leaflet.markercluster';
// import CreateElement from 'dom-create-element-query-selector';
// We're using the git repo for now until an update is released, and rollup doesn't like that apparently
import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
import tabs from 'tabs';
2019-06-11 14:35:31 +00:00
import Emitter from 'event-emitter-es6';
import Config from './Config.mjs';
import DeviceReadingDisplay from './DeviceReadingDisplay.mjs';
import GetFromUrl from './Helpers/GetFromUrl.mjs';
2019-06-11 14:35:31 +00:00
class LayerDeviceMarkers extends Emitter {
constructor(in_map, in_device_data) {
2019-06-11 14:35:31 +00:00
super();
this.map = in_map;
this.device_data = in_device_data;
// Create a new clustering layer
2019-06-10 23:43:11 +00:00
this.layer = L.markerClusterGroup({
// this.layer = L.layerGroup({
zoomToBoundsOnClick: false
});
}
async setup() {
// Add a marker for each device
for (let device of this.device_data.devices) {
// If the device doesn't have a location, we're not interested
// FUTURE: We might be able to displaymobile devices by adding additional logic here
if(typeof device.latitude != "number" || typeof device.longitude != "number")
continue;
this.add_device_marker(device);
}
// Display this layer
this.map.addLayer(this.layer);
}
add_device_marker(device) {
// Create the marker
let marker = L.marker(
L.latLng(device.latitude, device.longitude),
{ // See https://leafletjs.com/reference-1.4.0.html#marker
title: `Device: ${device.name}`,
autoPan: true,
autoPanPadding: L.point(100, 100)
}
);
// Create the popup
let popup = L.popup({
className: "popup-device",
maxWidth: 640,
autoPanPadding: L.point(100, 100)
}).setContent("⌛ Loading..."); // TODO: Display a nice loading animation here
marker.on("popupopen", this.marker_popup_open_handler.bind(this, device.id));
marker.bindPopup(popup);
this.layer.addLayer(marker);
}
async marker_popup_open_handler(device_id, event) {
if(typeof device_id !== "number")
2019-03-29 21:03:38 +00:00
throw new Error("Error: Invalid device id passed.");
2019-01-18 23:00:04 +00:00
console.info("Fetching device info for device", device_id);
let device_info = JSON.parse(await GetFromUrl(`${Config.api_root}?action=device-info&device-id=${device_id}`));
2019-01-18 22:59:57 +00:00
device_info.location = [ device_info.latitude, device_info.longitude ];
delete device_info.latitude;
delete device_info.longitude;
event.popup.setContent(this.render_device_info(device_info));
2019-06-11 14:35:31 +00:00
this.emit("marker-popup-opened");
}
render_device_info(device_info) {
let result = document.createDocumentFragment();
// ----------------------------------
result.appendChild(CreateElement("h2.device-name",
`Device: ${device_info.name}`
));
result.querySelector(".device-name").dataset.id = device_info.id;
// ----------------------------------
2019-01-26 17:06:30 +00:00
// Select a tab by default
window.location = "#tab-data";
let tabContainer = CreateElement("div.tab-container",
CreateElement("ul.tabs",
CreateElement("li", CreateElement("a.tab", "Info")),
CreateElement("li", CreateElement("a.tab.active", "Data"))
),
CreateElement("div.tab-panes",
CreateElement("div.device-params.tab-pane")
// The tab pane for the graph is added dynamically below
)
);
result.appendChild(tabContainer);
// ----------------------------------
let params_container = tabContainer.querySelector(".device-params");
let info_list = [];
for(let property in device_info) {
// Filter out properties we're handling specially
if(["id", "name", "other"].includes(property)) continue;
2019-01-18 22:59:57 +00:00
2019-01-18 22:59:57 +00:00
// Ensure the property is a string - giving special handling to
// some property values
let value = device_info[property];
if(typeof value == "undefined" || value === null)
value = "(not specified)";
// If the value isn't a string, but is still 'truthy'
2019-01-18 22:59:57 +00:00
if(typeof value != "string") {
switch(property) {
case "location":
value = `(${value[0]}, ${value[1]})`;
break;
default: value = value.toString(); break;
2019-01-18 22:59:57 +00:00
}
}
info_list.push(CreateElement(
2019-01-18 22:59:57 +00:00
"tr.device-property",
CreateElement("th.name", property.split("_").map((word) => word[0].toUpperCase()+word.slice(1)).join(" ")),
CreateElement("td.value", value)
));
}
params_container.appendChild(
CreateElement("table.device-property-table", ...info_list)
);
params_container.appendChild(CreateElement("p.device-notes",
CreateElement("em", device_info.other || "")
2019-01-18 22:59:57 +00:00
));
// ----------------------------------
let chart_device_data = new DeviceReadingDisplay(Config, device_info.id);
chart_device_data.setup("PM25").then(() =>
console.info("[layer/markers] Device chart setup complete!")
);
chart_device_data.display.classList.add("tab-pane", "active");
tabContainer.querySelector(".tab-panes").appendChild(chart_device_data.display);
tabs(tabContainer);
// ----------------------------------
return result;
}
}
export default LayerDeviceMarkers;