[client] Add settings panel!

client_src/css/main.css

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

client_src/js/LayerHeatmap.mjs

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

client_src/js/Map.mjs

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

client_src/js/UI.mjs

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

package-lock.json

@@ -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",

package.json

@@ -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",