Settings ui and service

Controllers/SettingsController.cs

@@ -0,0 +1,75 @@
+using Microsoft.AspNetCore.Mvc;
+using System.IO;
+using System.Text.Json;
+
+[ApiController]
+[Route("api/settings")]
+public class SettingsController : ControllerBase
+{
+    private const string SettingsFilePath = "settings.json";
+
+    [HttpGet]
+    public ActionResult<Settings> GetSettings()
+    {
+        if (!System.IO.File.Exists(SettingsFilePath))
+        {
+            return new Settings();
+        }
+
+        var json = System.IO.File.ReadAllText(SettingsFilePath);
+        return JsonSerializer.Deserialize<Settings>(json);
+    }
+
+    [HttpPost]
+    public IActionResult SaveSettings([FromBody] Settings settings)
+    {
+        var json = JsonSerializer.Serialize(settings);
+        System.IO.File.WriteAllText(SettingsFilePath, json);
+        return Ok();
+    }
+}
+
+public class Settings
+{
+    public Updating Updating { get; set; }
+    public Scanning Scanning { get; set; }
+    public Counting Counting { get; set; }
+    public Filtering Filtering { get; set; }
+    public Calibration Calibration { get; set; }
+}
+
+public class Updating
+{
+    public bool AutoUpdate { get; set; }
+    public bool PreRelease { get; set; }
+}
+
+public class Scanning
+{
+    public int? ForgetAfterMs { get; set; }
+}
+
+public class Counting
+{
+    public string IdPrefixes { get; set; }
+    public double? StartCountingDistance { get; set; }
+    public double? StopCountingDistance { get; set; }
+    public int? IncludeDevicesAge { get; set; }
+}
+
+public class Filtering
+{
+    public string IncludeIds { get; set; }
+    public string ExcludeIds { get; set; }
+    public double? MaxReportDistance { get; set; }
+    public double? EarlyReportDistance { get; set; }
+    public int? SkipReportAge { get; set; }
+}
+
+public class Calibration
+{
+    public int? RssiAt1m { get; set; }
+    public int? RssiAdjustment { get; set; }
+    public double? AbsorptionFactor { get; set; }
+    public int? IBeaconRssiAt1m { get; set; }
+}

src/Controllers/SettingsController.cs

@@ -0,0 +1,75 @@
+using Microsoft.AspNetCore.Mvc;
+using System.IO;
+using System.Text.Json;
+
+[ApiController]
+[Route("api/settings")]
+public class SettingsController : ControllerBase
+{
+    private const string SettingsFilePath = "settings.json";
+
+    [HttpGet]
+    public ActionResult<Settings> GetSettings()
+    {
+        if (!System.IO.File.Exists(SettingsFilePath))
+        {
+            return new Settings();
+        }
+
+        var json = System.IO.File.ReadAllText(SettingsFilePath);
+        return JsonSerializer.Deserialize<Settings>(json);
+    }
+
+    [HttpPost]
+    public IActionResult SaveSettings([FromBody] Settings settings)
+    {
+        var json = JsonSerializer.Serialize(settings);
+        System.IO.File.WriteAllText(SettingsFilePath, json);
+        return Ok();
+    }
+}
+
+public class Settings
+{
+    public UpdatingSettings Updating { get; set; } = new UpdatingSettings();
+    public ScanningSettings Scanning { get; set; } = new ScanningSettings();
+    public CountingSettings Counting { get; set; } = new CountingSettings();
+    public FilteringSettings Filtering { get; set; } = new FilteringSettings();
+    public CalibrationSettings Calibration { get; set; } = new CalibrationSettings();
+}
+
+public class UpdatingSettings
+{
+    public bool? AutoUpdate { get; set; }
+    public bool? PreRelease { get; set; }
+}
+
+public class ScanningSettings
+{
+    public int? ForgetAfterMs { get; set; }
+}
+
+public class CountingSettings
+{
+    public string IdPrefixes { get; set; }
+    public double? StartCountingDistance { get; set; }
+    public double? StopCountingDistance { get; set; }
+    public int? IncludeDevicesAge { get; set; }
+}
+
+public class FilteringSettings
+{
+    public string IncludeIds { get; set; }
+    public string ExcludeIds { get; set; }
+    public double? MaxReportDistance { get; set; }
+    public double? EarlyReportDistance { get; set; }
+    public int? SkipReportAge { get; set; }
+}
+
+public class CalibrationSettings
+{
+    public int? RssiAt1m { get; set; }
+    public int? RssiAdjustment { get; set; }
+    public double? AbsorptionFactor { get; set; }
+    public int? IBeaconRssiAt1m { get; set; }
+}

src/Pages/Error.cshtml

@@ -4,7 +4,7 @@
     ViewData["Title"] = "Error";
 }
 
-<h1 class="text-danger">Error.</h1>
+<h1 class="text-danger font-bold mb-2 px-2">Error.</h1>
 <h2 class="text-danger">An error occurred while processing your request.</h2>
 
 @if (Model.ShowRequestId)

src/ui/src/lib/NodesTable.svelte

@@ -31,7 +31,7 @@
 	}
 </script>
 
-<div class="table-container p-2">
+<div class="table-container">
 	{#if $nodes}
 		<VersionPicker bind:updateMethod={$updateMethod} bind:flavor={$flavor} bind:version={$version} bind:artifact={$artifact} />
 		<SvelteTable {columns} rows={$nodes} classNameTable="table table-hover table-compact" on:clickRow={onRowClick} sortBy="id" />

src/ui/src/lib/components/TriStateCheckbox.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    export let checked: boolean | null = false;
+    export let id: string;
+    
+    function handleClick(event: Event) {
+        const cb = event.target as HTMLInputElement;
+        if (cb.readOnly) {
+            cb.checked = false;
+            cb.readOnly = false;
+            checked = false;
+        } else if (!cb.checked) {
+            cb.readOnly = true;
+            cb.indeterminate = true;
+            checked = null;
+        } else {
+            checked = true;
+        }
+    }
+
+    $: ariaChecked = checked === null ? 'mixed' : checked;
+</script>
+
+<input
+    type="checkbox"
+    class="checkbox"
+    {id}
+    on:click={handleClick}
+    checked={checked === true}
+    indeterminate={checked === null}
+    readOnly={checked === null}
+    aria-checked={ariaChecked}
+/>
+
+<style>
+    input[type="checkbox"]:indeterminate {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+    }
+</style>

src/ui/src/lib/stores.ts

@@ -1,6 +1,6 @@
 import { readable, writable, derived } from 'svelte/store';
 import { base } from '$app/paths';
-import type { Device, Config, Node } from './types';
+import type { Device, Config, Node, Settings } from './types';
 
 export const showAll: SvelteStore<boolean> = writable(false);
 export const config = writable<Config>();
@@ -54,8 +54,8 @@ export const devices = readable<Device[]>([], function start(set) {
 	function fetchDevices() {
 		fetch(`${base}/api/state/devices`)
 			.then((d) => d.json())
-			.then((r) => {
-				deviceMap = new Map(r.map((device) => [device.id, device]));
+			.then((r: Device[]) => {
+				deviceMap = new Map(r.map((device: Device) => [device.id, device]));
 				updateDevicesFromMap();
 			})
 			.catch((ex) => {
@@ -133,3 +133,30 @@ export const calibration = readable({}, function start(set) {
 		clearInterval(interval);
 	};
 });
+
+export const settings = (() => {
+	const { subscribe, set, update } = writable<Settings | null>(null);
+
+	return {
+		subscribe,
+		set,
+		update,
+		load: async () => {
+			const response = await fetch(`${base}/api/settings`);
+			if (!response.ok) throw new Error("Something went wrong loading settings (error="+response.status+" "+response.statusText+")");
+			const data = await response.json();
+			set(data);
+		},
+		save: async (newSettings: Settings) => {
+			const response = await fetch(`${base}/api/settings`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify(newSettings),
+			});
+			const data = await response.json();
+			set(data);
+		},
+	};
+})();

src/ui/src/lib/types.ts

@@ -122,6 +122,36 @@ export interface Release {
 	name: string;
 }
 
+
+export type Settings = {
+	updating: {
+		autoUpdate: boolean;
+		preRelease: boolean;
+	};
+	scanning: {
+		forgetAfterMs: number | null;
+	};
+	counting: {
+		idPrefixes: string | null;
+		startCountingDistance: number | null;
+		stopCountingDistance: number | null;
+		includeDevicesAge: number | null;
+	};
+	filtering: {
+		includeIds: string | null;
+		excludeIds: string | null;
+		maxReportDistance: number | null;
+		earlyReportDistance: number | null;
+		skipReportAge: number | null;
+	};
+	calibration: {
+		rssiAt1m: number | null;
+		rssiAdjustment: number | null;
+		absorptionFactor: number | null;
+		iBeaconRssiAt1m: number | null;
+	};
+};
+
 export function isNode(d: Device | Node | null): d is Node {
 	return (d as Node)?.telemetry !== undefined;
-}
+}

src/ui/src/routes/+layout.svelte

@@ -14,6 +14,7 @@
 	import nodes from '$lib/images/nodes.svg';
 	import devices from '$lib/images/devices.svg';
 	import calibration from '$lib/images/calibration.svg';
+	import settings from '$lib/images/settings.svg';
 
 	initializeStores();
 
@@ -62,6 +63,11 @@
 					<span>Calibration</span>
 				</AppRailAnchor>
 
+				<AppRailAnchor href="{base}/settings" name="settings" selected={current == `${base}/settings`}>
+					<img src={settings} class="px-4" alt="Settings" />
+					<span>Settings</span>
+				</AppRailAnchor>
+
 				<svelte:fragment slot="trail">
 					<AppRailAnchor regionIcon="w-8" href="https://github.com/ESPresense/ESPresense-companion" target="_blank">
 						<img src={github} class="px-4" alt="GitHub" />

src/ui/src/routes/calibration/+page.svelte

@@ -52,8 +52,8 @@
 	<title>ESPresense Companion: Calibration</title>
 </svelte:head>
 
-<div class="text-column">
-	<h1 class="h1">Calibration</h1>
+<div class="container mx-auto p-2">
+	<h1 class="text-3xl font-bold my-2 px-2">Calibration</h1>
 
 	{#if $calibration?.matrix}
 		{#each Object.entries($calibration?.matrix) as [id1, n1] (id1)}
@@ -70,10 +70,10 @@
 		{/each}
 	{/if}
 
-	<div class="card m-4">
+	<div class="card p-2">
 		{#if $calibration?.matrix}
 			<header>
-				<div class="flex justify-center p-4">
+				<div class="flex justify-center p-2">
 					<RadioGroup active="variant-filled-primary" hover="hover:variant-soft-primary">
 						<RadioItem bind:group={data_point} name="justify" value={0}>Error %</RadioItem>
 						<RadioItem bind:group={data_point} name="justify" value={1}>Error (m)</RadioItem>

src/ui/src/routes/devices/+page.svelte

@@ -7,7 +7,7 @@
 	<title>ESPresense Companion: Devices</title>
 </svelte:head>
 
-<div class="text-column">
-	<h1 class="h1">Devices</h1>
+<div class="container mx-auto p-2">
+	<h1 class="text-3xl font-bold my-2 px-2">Devices</h1>
 	<DevicesTable on:selected={(d) => detail(d.detail)} />
 </div>

src/ui/src/routes/nodes/+page.svelte

@@ -6,8 +6,8 @@
 	<title>ESPresense Companion: Nodes</title>
 </svelte:head>
 
-<div class="text-column">
-	<h1 class="h1">Nodes</h1>
+<div class="container mx-auto p-2">
+	<h1 class="text-3xl font-bold my-2 px-2">Nodes</h1>
 
 	<NodesTable />
 </div>