[client] Display reading types in the UI, but it doesn't do anything yet

client_src/js/Map.mjs

@@ -45,8 +45,8 @@ class Map {
 			console.info("[map] Heatmap loaded successfully.");
 		});
 		
-		this.ui = new UI(this);
-		
+		this.ui = new UI(Config, this);
+		this.ui.setup().then(() => console.log("[map] Settings initialised."));
 	}
 	
 	async setup_device_markers() {

client_src/js/UI.mjs

@@ -3,12 +3,22 @@
 import SmartSettings from 'smartsettings';
 
 import Config from './Config.mjs';
+import GetFromUrl from './Helpers/GetFromUrl.mjs';
 
 class UI {
-	constructor(in_map_manager) {
+	constructor(in_config, in_map_manager) {
+		this.config = in_config;
 		this.map_manager = in_map_manager;
 		
 		this.ui_panel = new SmartSettings("Settings");
+		// this.ui_panel.watch((event) => console.log(event));
+	}
+	
+	async setup() {
+		this.reading_types = JSON.parse(
+			await GetFromUrl(`${this.config.api_root}?action=list-reading-types`)
+		);
+		
 		this.ui_panel.loadConfig([
 			{
 				type: "range",
@@ -23,9 +33,13 @@ class UI {
 				callback: ((event) => {
 					this.map_manager.heatmap.overlay_config.radius = parseFloat(event.target.value);
 				}).bind(this)
+			},
+			{
+				// TODO: Add a setting for the different reading types here
+				type: "select",
+				items: this.reading_types.map((type) => type.friendly_text)
 			}
 		]);
-		// this.ui_panel.watch((event) => console.log(event));
 	}
 }