Browse Source

[client] Get basic device marker popups working

pull/26/head
Starbeamrainbowlabs 3 years ago
parent
commit
19029a942b
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 4
      client_src/css/main.css
  2. 47
      client_src/js/LayerDeviceMarkers.mjs
  3. 2
      client_src/js/UI.mjs
  4. 4
      package-lock.json
  5. 1
      package.json

4
client_src/css/main.css

@ -43,3 +43,7 @@ main { @@ -43,3 +43,7 @@ main {
top: initial !important; bottom: 0;
z-index: 100 !important;
}
.device-property-list {
margin: 0; padding: 0 0 0 1em;
}

47
client_src/js/LayerDeviceMarkers.mjs

@ -2,6 +2,9 @@ @@ -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 { @@ -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 { @@ -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;

2
client_src/js/UI.mjs

@ -25,7 +25,7 @@ class UI { @@ -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

@ -649,6 +649,10 @@ @@ -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",

1
package.json

@ -17,6 +17,7 @@ @@ -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…
Cancel
Save