🪇 Implements major structure and service refactors

app/src/lib/components/menu.svelte

@@ -24,6 +24,9 @@
 	import { page } from '$app/stores';
 	import { user } from '$lib/stores/user';
 	import { createEventDispatcher } from 'svelte';
+	import { useFeatureFlags } from '$lib/stores/featureFlags';
+
+    const features = useFeatureFlags();
 
 	const appName = $page.data.app_name;
 
@@ -70,7 +73,7 @@
 					title: 'Camera',
 					icon: Camera,
 					href: '/peripherals/camera',
-					feature: $page.data.features.camera,
+					feature: $features.camera,
 				},
                 {
 					title: 'Servo',
@@ -82,20 +85,20 @@
 					title: 'IMU',
 					icon: Rotate3d,
 					href: '/peripherals/imu',
-					feature: $page.data.features.imu || $page.data.features.mag || $page.data.features.bmp,
+					feature: $features.imu || $features.mag || $features.bmp,
 				}
 			]
 		},
 		{
 			title: 'Connections',
 			icon: Remote,
-			feature: $page.data.features.ntp,
+			feature: $features.ntp,
 			submenu: [
 				{
 					title: 'NTP',
 					icon: NTP,
 					href: '/connections/ntp',
-					feature: $page.data.features.ntp,
+					feature: $features.ntp,
 					
 				}
 			]
@@ -125,7 +128,7 @@
 			title: 'Users',
 			icon: Users,
 			href: '/user',
-			feature: $page.data.features.security && $user.admin,
+			feature: $features.security && $user.admin,
 			
 		},
 		{
@@ -151,7 +154,7 @@
 					title: 'System Metrics',
 					icon: Metrics,
 					href: '/system/metrics',
-					feature: $page.data.features.analytics,
+					feature: $features.analytics,
 					
 				},
 				{
@@ -159,10 +162,10 @@
 					icon: Update,
 					href: '/system/update',
 					feature:
-						($page.data.features.ota ||
-							$page.data.features.upload_firmware ||
-							$page.data.features.download_firmware) &&
-						(!$page.data.features.security || $user.admin),
+						($features.ota ||
+							$features.upload_firmware ||
+							$features.download_firmware) &&
+						(!$features.security || $user.admin),
 				}
 			]
 		}
@@ -245,7 +248,7 @@
 	<div class="flex-col" />
 	<div class="flex-grow" />
 
-	{#if $page.data.features.security}
+	{#if $features.security}
 		<div class="flex items-center">
 			<Avatar class="h-8 w-8" />
 			<span class="flex-grow px-4 text-xl font-bold">{$user.username}</span>

app/src/lib/components/widget/ChartWidget.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { daisyColor } from "$lib/DaisyUiHelper";
+	import { daisyColor } from "$lib/utilities";
 	import { Chart, registerables } from "chart.js";
 	import { onMount } from "svelte";
 	import { cubicOut } from "svelte/easing";

app/src/lib/stores/featureFlags.ts

@@ -0,0 +1,17 @@
+import { api } from '$lib/api';
+import { notifications } from '$lib/components/toasts/notifications';
+import { onMount } from 'svelte';
+import { writable } from 'svelte/store';
+
+export function useFeatureFlags() {
+	const featureFlags = writable<Record<string, boolean>>({});
+	onMount(async () => {
+		const result = await api.get<Record<string, boolean>>('/api/features');
+		if (result.isOk()) featureFlags.set(result.inner);
+		else {
+			notifications.error('Feature flag could not fetched', 2500);
+		}
+	});
+
+	return featureFlags;
+}

app/src/lib/stores/imu.ts

@@ -1,36 +1,27 @@
-import { type IMU } from '$lib/types/models';
 import { writable } from 'svelte/store';
-
-let imu_data = {
-	x: <number[]>[],
-	y: <number[]>[],
-	z: <number[]>[],
-	imu_temp: <number[]>[],
-	altitude: <number[]>[],
-	pressure: <number[]>[],
-	bmp_temp: <number[]>[]
-};
+import type { IMU } from '$lib/types/models';
 
 const maxIMUData = 100;
 
-function createIMU() {
-	const { subscribe, update } = writable(imu_data);
+export const imu = (() => {
+	const { subscribe, update } = writable({
+		x: [] as number[],
+		y: [] as number[],
+		z: [] as number[],
+		imu_temp: [] as number[],
+		altitude: [] as number[],
+		pressure: [] as number[],
+		bmp_temp: [] as number[]
+	});
 
-	return {
-		subscribe,
-		addData: (content: IMU) => {
-			update((imu_data) => ({
-				...imu_data,
-				x: [...imu_data.x, content.x].slice(-maxIMUData),
-				y: [...imu_data.y, content.y].slice(-maxIMUData),
-				z: [...imu_data.z, content.z].slice(-maxIMUData),
-				imu_temp: [...imu_data.imu_temp, content.imu_temp].slice(-maxIMUData),
-				altitude: [...imu_data.altitude, content.altitude].slice(-maxIMUData),
-				pressure: [...imu_data.pressure, content.pressure].slice(-maxIMUData),
-				bmp_temp: [...imu_data.bmp_temp, content.bmp_temp].slice(-maxIMUData)
-			}));
-		}
+	const addData = (content: IMU) => {
+		update((data) => {
+			(Object.keys(content) as (keyof IMU)[]).forEach((key) => {
+				data[key] = [...data[key], content[key]].slice(-maxIMUData);
+			});
+			return data;
+		});
 	};
-}
 
-export const imu = createIMU();
+	return { subscribe, addData };
+})();

app/src/lib/stores/index.ts

@@ -6,3 +6,4 @@ export * from './fullscreen';
 export * from './telemetry';
 export * from './analytics';
 export * from './user';
+export * from './featureFlags';

app/src/lib/stores/user.ts

@@ -1,55 +1,40 @@
-import { writable } from 'svelte/store';
 import { goto } from '$app/navigation';
 import { jwtDecode } from 'jwt-decode';
+import { persistentStore } from '$lib/utilities';
 
-export type userProfile = {
+export type UserProfile = {
 	username: string;
 	admin: boolean;
 	bearer_token: string;
 };
 
-type decodedJWT = {
-	username: string;
-	admin: boolean;
-};
+type DecodedJWT = Omit<UserProfile, 'bearer_token'>;
 
-let empty = {
+const emptyUser: UserProfile = {
 	username: '',
 	admin: false,
 	bearer_token: ''
 };
 
-function createStore() {
-	const { subscribe, set } = writable(empty);
-
-	// retrieve store from sessionStorage / localStorage if available
-	const userdata = localStorage.getItem('user');
-	if (userdata) {
-		set(JSON.parse(userdata));
-	}
+function createUserStore() {
+	const store = persistentStore<UserProfile>('user', emptyUser);
 
 	return {
-		subscribe,
+		subscribe: store.subscribe,
 		init: (access_token: string) => {
-			const decoded: decodedJWT = jwtDecode(access_token);
-			const userdata = {
+			const decoded: DecodedJWT = jwtDecode(access_token);
+			const userProfile: UserProfile = {
 				bearer_token: access_token,
 				username: decoded.username,
 				admin: decoded.admin
 			};
-			set(userdata);
-			// persist store in sessionStorage / localStorage
-			localStorage.setItem('user', JSON.stringify(userdata));
+			store.set(userProfile);
 		},
 		invalidate: () => {
-			console.log('Log out user');
-			set(empty);
-			// remove localStorage "user"
-			localStorage.removeItem('user');
-			// redirect to login page
+			store.set(emptyUser);
 			goto('/');
 		}
 	};
 }
 
-export const user = createStore();
+export const user = createUserStore();

app/src/lib/utilities/color-utilities.ts

@@ -1,4 +1,4 @@
-export function daisyColor(name: string, opacity: number = 100) {
+export const daisyColor = (name: string, opacity: number = 100) => {
 	const color = getComputedStyle(document.documentElement).getPropertyValue(name);
 	return `oklch(${color} / ${opacity}%)`;
-}
+};

app/src/lib/utilities/index.ts

@@ -5,3 +5,6 @@ export * from './math-utilities';
 export * from './buffer-utilities';
 export * from './model-utilities';
 export * from './location-utilities';
+export * from './position-utilities';
+export * from './string-utilities';
+export * from './color-utilities';

app/src/lib/utilities/svelte-utilities.ts

@@ -3,14 +3,14 @@ import { browser } from '$app/environment';
 
 export const isEmbeddedApp = import.meta.env.VITE_EMBEDDED_BUILD === 'true';
 
-export const persistentStore = (key: string, initialValue: any) => {
-	const savedValue = browser ? JSON.parse(localStorage.getItem(key) as string) : null;
-	const data = savedValue !== null ? savedValue : initialValue;
-	const store = writable(data);
+export const persistentStore = <T>(key: string, initialValue: T) => {
+	const savedValue = browser ? localStorage.getItem(key) : null;
+	const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue;
+	const store = writable<T>(data);
 
 	store.subscribe((value) => {
-		browser && localStorage.setItem(key, JSON.stringify(value));
+		if (browser) localStorage.setItem(key, JSON.stringify(value));
 	});
 
 	return store;
-};
+};

app/src/routes/+layout.svelte

@@ -6,14 +6,14 @@
 	import { notifications } from '$lib/components/toasts/notifications';
 	import { fade } from 'svelte/transition';
 	import '../app.css';
-	import Menu from './menu.svelte';
-	import Statusbar from './statusbar.svelte';
-	import Login from './login.svelte';
+	import Menu from '../lib/components/menu.svelte';
+	import Statusbar from '../lib/components/statusbar/statusbar.svelte';
+	import Login from '../lib/components/login.svelte';
 	import {
 		telemetry,
 		analytics,
 		user,
-		type userProfile,
+		type UserProfile,
 		ModesEnum,
 		kinematicData,
 		mode,
@@ -24,12 +24,15 @@
 	} from '$lib/stores';
 	import type { Analytics, Battery, DownloadOTA } from '$lib/types/models';
 	import { api } from '$lib/api';
+    import { useFeatureFlags } from '$lib/stores/featureFlags';
+
+    const features = useFeatureFlags();
 
 	onMount(async () => {
 		if ($user.bearer_token !== '') {
 			await validateUser($user);
 		}
-		const ws_token = $page.data.features.security ? '?access_token=' + $user.bearer_token : '';
+		const ws_token = $features.security ? '?access_token=' + $user.bearer_token : '';
 		socket.init(`ws://${window.location.host}/ws/events${ws_token}`);
 
 		addEventListeners();
@@ -53,10 +56,10 @@
 		socket.on('angles', (angles: number[]) => {
 			if (angles.length) servoAngles.set(angles);
 		});
-		if ($page.data.features.analytics) socket.on('analytics', handleAnalytics);
-		if ($page.data.features.battery) socket.on('battery', handleBattery);
-		if ($page.data.features.download_firmware) socket.on('otastatus', handleOAT);
-		if ($page.data.features.sonar) socket.on('sonar', (data) => console.log(data));
+		if ($features.analytics) socket.on('analytics', handleAnalytics);
+		if ($features.battery) socket.on('battery', handleBattery);
+		if ($features.download_firmware) socket.on('otastatus', handleOAT);
+		if ($features.sonar) socket.on('sonar', (data) => console.log(data));
 	};
 
 	const removeEventListeners = () => {
@@ -68,7 +71,7 @@
 		socket.off('otastatus', handleOAT);
 	};
 
-	async function validateUser(userdata: userProfile) {
+	async function validateUser(userdata: UserProfile) {
 		const result = await api.get('/api/verifyAuthorization');
 		if (result.isErr()) {
 			user.invalidate();
@@ -81,7 +84,7 @@
 	};
 
 	const handleClose = () => {
-		// notifications.error('Connection to device lost', 5000);
+		notifications.error('Connection to device lost', 5000);
 		telemetry.setRSSI(0);
 	};
 
@@ -102,7 +105,7 @@
 	<title>{$page.data.title}</title>
 </svelte:head>
 
-{#if $page.data.features.security && $user.bearer_token === ''}
+{#if $features.security && $user.bearer_token === ''}
 	<Login />
 {:else}
 	<div class="drawer">

app/src/routes/+layout.ts

@@ -13,10 +13,7 @@ const registerFetchIntercept = async () => {
 
 export const load = async () => {
 	await registerFetchIntercept();
-	const result = await fetch('/api/features');
-	const features = await result.json();
 	return {
-		features,
 		title: 'Spot micro controller',
 		github: 'runeharlyk/SpotMicroESP32-Leika',
 		app_name: 'Spot Micro Controller',

app/src/routes/connections/ntp/NTP.svelte

@@ -16,6 +16,9 @@
 	import Stopwatch from '~icons/tabler/24-hours';
 	import type { NTPSettings, NTPStatus } from '$lib/types/models';
 	import { api } from '$lib/api';
+	import { useFeatureFlags } from '$lib/stores/featureFlags';
+
+    const features = useFeatureFlags();
 
 	let ntpSettings: NTPSettings;
 	let ntpStatus: NTPStatus;
@@ -45,7 +48,7 @@
 	onDestroy(() => clearInterval(interval));
 
 	onMount(() => {
-		if (!$page.data.features.security || $user.admin) {
+		if (!$features.security || $user.admin) {
 			getNTPSettings();
 		}
 	});
@@ -209,7 +212,7 @@
 		{/await}
 	</div>
 
-	{#if !$page.data.features.security || $user.admin}
+	{#if !$features.security || $user.admin}
 		<Collapsible open={false} on:closed={getNTPSettings}>
 			<span slot="title">Change NTP Settings</span>
 			<form

app/src/routes/peripherals/i2c/i2c.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
     import MdiConnection from '~icons/mdi/connection';
-	import { onDestroy, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import { socket } from "$lib/stores";
     import type { I2CDevice } from "$lib/types/models";
 
@@ -18,10 +18,7 @@
     onMount(() => {
         socket.on('i2cScan', handleScan);
         socket.sendEvent('i2cScan', "");
-    })
-
-    onDestroy(() => {
-        socket.off('i2cScan', handleScan);
+        return () => socket.off('i2cScan', handleScan);
     })
 
     const handleScan = (data: any) => {

app/src/routes/peripherals/imu/imu.svelte

@@ -6,10 +6,12 @@
 	import { cubicOut } from "svelte/easing";
 	import { slide } from "svelte/transition";
 	import { onDestroy, onMount } from "svelte";
-	import { daisyColor } from "$lib/DaisyUiHelper";
+	import { daisyColor } from "$lib/utilities";
 	import { socket } from "$lib/stores";
 	import type { IMU } from "$lib/types/models";
-	import { page } from "$app/stores";
+	import { useFeatureFlags } from "$lib/stores/featureFlags";
+
+    const features = useFeatureFlags();
 
     Chart.register(...registerables);
 
@@ -242,7 +244,7 @@
     })
 
     const updateData = () => {
-        if ($page.data.features.imu) {
+        if ($features.imu) {
             angleChart.data.labels = $imu.x;
             angleChart.data.datasets[0].data = $imu.x;
             angleChart.data.datasets[1].data = $imu.y;
@@ -252,7 +254,7 @@
             angleChart.update('none');
         }
 
-        if ($page.data.features.bmp) {
+        if ($features.bmp) {
             tempChart.data.labels = $imu.bmp_temp;
             tempChart.data.datasets[0].data = $imu.bmp_temp;
             tempChart.options.scales!.y!.min = Math.min(...$imu.bmp_temp) - 1;
@@ -272,7 +274,7 @@
 <SettingsCard collapsible={false}>
     <Rotate3d slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
     <span slot="title">IMU</span>
-    {#if $page.data.features.imu} 
+    {#if $features.imu} 
         <div class="w-full overflow-x-auto">
             <div
             class="flex w-full flex-col space-y-1 h-60"
@@ -282,7 +284,7 @@
             </div>
         </div>
     {/if}
-    {#if $page.data.features.bmp} 
+    {#if $features.bmp} 
         <div class="w-full overflow-x-auto">
             <div
                 class="flex w-full flex-col space-y-1 h-60"

app/src/routes/system/metrics/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import SystemMetrics from './SystemMetrics.svelte';
-	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import { useFeatureFlags } from '$lib/stores/featureFlags';
 
-	if (!$page.data.features.analytics) {
+    const features = useFeatureFlags();
+
+	if (!$features.analytics) {
 		goto('/');
 	}
 </script>

app/src/routes/system/metrics/SystemMetrics.svelte

@@ -6,7 +6,7 @@
 	import { cubicOut } from 'svelte/easing';
 	import { Chart, registerables } from 'chart.js';
 	import Metrics from '~icons/tabler/report-analytics';
-	import { daisyColor } from '$lib/DaisyUiHelper';
+	import { daisyColor } from '$lib/utilities';
 	import { analytics } from '$lib/stores/analytics';
 
 	Chart.register(...registerables);

app/src/routes/system/status/SystemStatus.svelte

@@ -29,6 +29,10 @@
 	import { api } from '$lib/api';
 	import { convertSeconds } from '$lib/utilities';
 
+    import { useFeatureFlags } from '$lib/stores/featureFlags';
+    
+    const features = useFeatureFlags()
+
 	let systemInformation: SystemInformation;
 
 	async function getSystemStatus() {
@@ -295,12 +299,12 @@
 	</div>
 
 	<div class="mt-4 flex flex-wrap justify-end gap-2">
-		{#if $page.data.features.sleep}
+		{#if $features.sleep}
 			<button class="btn btn-primary inline-flex items-center" on:click={confirmSleep}
 				><Sleep class="mr-2 h-5 w-5" /><span>Sleep</span></button
 			>
 		{/if}
-		{#if !$page.data.features.security || $user.admin}
+		{#if !$features.security || $user.admin}
 			<button class="btn btn-primary inline-flex items-center" on:click={confirmRestart}
 				><Power class="mr-2 h-5 w-5" /><span>Restart</span></button
 			>

app/src/routes/system/update/+page.svelte

@@ -2,15 +2,17 @@
 	import UploadFirmware from './UploadFirmware.svelte';
 	import GithubFirmwareManager from './GithubFirmwareManager.svelte';
 	import { user } from '$lib/stores/user';
-	import { page } from '$app/stores';
+	import { useFeatureFlags } from '$lib/stores';
+
+    const features = useFeatureFlags();
 </script>
 
 <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
-	{#if $page.data.features.download_firmware && (!$page.data.features.security || $user.admin)}
+	{#if $features.download_firmware && (!$features.security || $user.admin)}
 		<GithubFirmwareManager />
 	{/if}
 
-	{#if $page.data.features.upload_firmware && (!$page.data.features.security || $user.admin)}
+	{#if $features.upload_firmware && (!$features.security || $user.admin)}
 		<UploadFirmware />
 	{/if}
 </div>

app/src/routes/system/update/GithubFirmwareManager.svelte

@@ -16,6 +16,9 @@
 	import InfoDialog from '$lib/components/InfoDialog.svelte';
 	import Check from '~icons/tabler/check';
 	import { api } from '$lib/api';
+	import { useFeatureFlags } from '$lib/stores';
+
+    const features = useFeatureFlags();
 
 	async function getGithubAPI() {
         const headers = {
@@ -45,7 +48,7 @@
 			// check if the asset is of type *.bin
 			if (
 				assets[i].name.includes('.bin') &&
-				assets[i].name.includes($page.data.features.firmware_built_target)
+				assets[i].name.includes($features.firmware_built_target)
 			) {
 				url = assets[i].browser_download_url;
 			}
@@ -99,7 +102,7 @@
 					<tbody>
 						{#each githubReleases as release}
 							<tr
-								class={compareVersions($page.data.features.firmware_version, release.tag_name) === 0
+								class={compareVersions($features.firmware_version, release.tag_name) === 0
 									? 'bg-primary text-primary-content'
 									: 'bg-base-100 h-14'}
 							>
@@ -124,7 +127,7 @@
 									{/if}
 								</td>
 								<td align="center">
-									{#if compareVersions($page.data.features.firmware_version, release.tag_name) != 0}
+									{#if compareVersions($features.firmware_version, release.tag_name) != 0}
 										<button
 											class="btn btn-ghost btn-circle btn-sm"
 											on:click={() => {

app/src/routes/wifi/ap/Accesspoint.svelte

@@ -14,6 +14,9 @@
 	import Devices from '~icons/tabler/devices';
 	import type { ApSettings, ApStatus } from '$lib/types/models';
 	import { api } from '$lib/api';
+	import { useFeatureFlags } from '$lib/stores';
+
+    const features = useFeatureFlags();
 
 	let apSettings: ApSettings;
 	let apStatus: ApStatus;
@@ -47,7 +50,7 @@
 	onDestroy(() => clearInterval(interval));
 
 	onMount(() => {
-		if (!$page.data.features.security || $user.admin) {
+		if (!$features.security || $user.admin) {
 			getAPSettings();
 		}
 	});
@@ -221,7 +224,7 @@
 		{/await}
 	</div>
 
-	{#if !$page.data.features.security || $user.admin}
+	{#if !$features.security || $user.admin}
 		<div class="bg-base-200 relative grid w-full max-w-2xl self-center overflow-hidden">
 			<div
 				class="min-h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium"

app/src/routes/wifi/sta/Scan.svelte

@@ -7,7 +7,7 @@
 	import Cancel from '~icons/tabler/x';
 	import Reload from '~icons/tabler/reload';
 	import { onMount, onDestroy } from 'svelte';
-	import RssiIndicator from '$lib/components/RSSIIndicator.svelte';
+	import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
 	import type { NetworkItem } from '$lib/types/models';
 	import { api } from '$lib/api';
 	import type { NetworkList } from '$lib/models';

app/src/routes/wifi/sta/Wifi.svelte

@@ -33,9 +33,11 @@
 	import Check from '~icons/tabler/check';
 	import InfoDialog from '$lib/components/InfoDialog.svelte';
 	import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
-	import { socket } from '$lib/stores';
+	import { socket, useFeatureFlags } from '$lib/stores';
 	import { api } from '$lib/api';
 
+    const features = useFeatureFlags();
+
 	let networkEditable: KnownNetworkItem = {
 		ssid: '',
 		password: '',
@@ -435,7 +437,7 @@
 		{/await}
 	</div>
 
-	{#if !$page.data.features.security || $user.admin}
+	{#if !$features.security || $user.admin}
 		<div class="bg-base-200 relative grid w-full max-w-2xl self-center overflow-hidden">
 			<div
 				class="min-h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium"
@@ -489,7 +491,7 @@
 								<div>
 									<div class="font-bold">{dndNetworkList[index].ssid}</div>
 								</div>
-								{#if !$page.data.features.security || $user.admin}
+								{#if !$features.security || $user.admin}
 									<div class="flex-grow" />
 									<div class="space-x-0 px-0 mx-0">
 										<button