mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-11-10 04:43:00 +00:00
[client] Get basic device marker popups working
This commit is contained in:
parent
11f54d1bd5
commit
19029a942b
5 changed files with 57 additions and 1 deletions
|
@ -43,3 +43,7 @@ main {
|
|||
top: initial !important; bottom: 0;
|
||||
z-index: 100 !important;
|
||||
}
|
||||
|
||||
.device-property-list {
|
||||
margin: 0; padding: 0 0 0 1em;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
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 Config from './Config.mjs';
|
||||
import GetFromUrl from './Helpers/GetFromUrl.mjs';
|
||||
|
@ -31,6 +34,7 @@ class LayerDeviceMarkers {
|
|||
}
|
||||
|
||||
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
|
||||
|
@ -39,8 +43,51 @@ class LayerDeviceMarkers {
|
|||
autoPanPadding: L.point(100, 100)
|
||||
}
|
||||
);
|
||||
// Create the popup
|
||||
let popup = L.popup({
|
||||
className: "popup-device",
|
||||
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")
|
||||
throw new Exception("Error: Invalid device id passed.");
|
||||
|
||||
let device_info = JSON.parse(await GetFromUrl(`${Config.api_root}?action=device-info&device-id=${device_id}`));
|
||||
|
||||
event.popup.setContent(this.render_device_info(device_info));
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
|
||||
let info_list = [];
|
||||
for(let property in device_info) {
|
||||
// Filter out properties we're handling specially
|
||||
if(["id"].includes(property)) continue;
|
||||
|
||||
info_list.push(CreateElement(
|
||||
"li.device-property",
|
||||
`${property.split("_").map((word) => word[0].toUpperCase()+word.slice(1)).join(" ")}: ${device_info[property]}`
|
||||
));
|
||||
}
|
||||
result.appendChild(CreateElement("ul.device-property-list", ...info_list));
|
||||
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export default LayerDeviceMarkers;
|
||||
|
|
|
@ -25,7 +25,7 @@ class UI {
|
|||
}).bind(this)
|
||||
}
|
||||
]);
|
||||
this.ui_panel.watch((event) => console.log(event));
|
||||
// this.ui_panel.watch((event) => console.log(event));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
4
package-lock.json
generated
4
package-lock.json
generated
|
@ -649,6 +649,10 @@
|
|||
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
|
||||
"dev": true
|
||||
},
|
||||
"dom-create-element-query-selector": {
|
||||
"version": "github:hekigan/dom-create-element-query-selector#39afc3fb24cc06d280ef81e167acf3d21513e3a2",
|
||||
"from": "github:hekigan/dom-create-element-query-selector"
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.103",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.103.tgz",
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/sbrl/ConnectedHumber-Air-Quality-Interface#readme",
|
||||
"dependencies": {
|
||||
"dom-create-element-query-selector": "github:hekigan/dom-create-element-query-selector",
|
||||
"leaflet": "^1.4.0",
|
||||
"leaflet-fullscreen": "^1.0.2",
|
||||
"leaflet-timedimension": "^1.1.0",
|
||||
|
|
Loading…
Reference in a new issue