[client] Add settings panel!

pull/26/head
Starbeamrainbowlabs 4 years ago
parent a21cb1c3eb
commit a0130a72c9
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 5
      client_src/css/main.css
  2. 5
      client_src/js/LayerHeatmap.mjs
  3. 4
      client_src/js/Map.mjs
  4. 32
      client_src/js/UI.mjs
  5. 5
      package-lock.json
  6. 3
      package.json

@ -38,3 +38,8 @@ main {
z-index: 50;
}
.sms-panel {
top: initial !important; bottom: 0;
z-index: 100 !important;
}

@ -9,7 +9,7 @@ class LayerHeatmap {
constructor(in_map) {
this.map = in_map;
this.layer = new HeatmapOverlay({
this.overlay_config = {
radius: Config.heatmap.blob_radius,
maxOpacity: 0.8,
scaleRadius: true,
@ -18,7 +18,8 @@ class LayerHeatmap {
latField: "latitude",
lngField: "longitude",
valueField: "value"
});
};
this.layer = new HeatmapOverlay(this.overlay_config);
this.map.addLayer(this.layer);
}

@ -9,9 +9,11 @@ import GetFromUrl from './Helpers/GetFromUrl.mjs';
import Config from './Config.mjs';
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
import LayerHeatmap from './LayerHeatmap.mjs';
import UI from './UI.mjs';
class Map {
constructor() {
}
setup() {
@ -43,6 +45,8 @@ class Map {
console.info("[map] Heatmap loaded successfully.");
});
this.ui = new UI(this);
}
async setup_device_markers() {

@ -0,0 +1,32 @@
"use strict";
import SmartSettings from 'smartsettings';
import Config from './Config.mjs';
class UI {
constructor(in_map_manager) {
this.map_manager = in_map_manager;
this.ui_panel = new SmartSettings("Settings");
this.ui_panel.loadConfig([
{
type: "range",
name: "Heatmap Blob Radius",
help: "The radius of blobs on the heatmap.",
items: [
0.001, // min
0.05, // max
Config.heatmap.blob_radius, // initial value
0.001 // step
],
callback: ((event) => {
this.map_manager.heatmap.overlay_config.radius = parseFloat(event.target.value);
}).bind(this)
}
]);
this.ui_panel.watch((event) => console.log(event));
}
}
export default UI;

5
package-lock.json generated

@ -3482,6 +3482,11 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
},
"smartsettings": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/smartsettings/-/smartsettings-1.2.3.tgz",
"integrity": "sha512-IPylE5IllnSAwKoA2To1otDrs40fdaQOnxCDXwjUCwnIHPr27Z+pjGpkbQqwhObb0poDnzldpbwa+5TYK107/g=="
},
"sort-keys": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",

@ -20,7 +20,8 @@
"leaflet": "^1.4.0",
"leaflet-fullscreen": "^1.0.2",
"leaflet-timedimension": "^1.1.0",
"leaflet.markercluster": "^1.4.1"
"leaflet.markercluster": "^1.4.1",
"smartsettings": "^1.2.3"
},
"devDependencies": {
"@types/leaflet": "^1.2.14",

Loading…
Cancel
Save