feat: show settings origin

Thymis-io · Jan 24, 2024 · 3f4e7d4 · 3f4e7d4
1 parent d380494
commit 3f4e7d4
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 29 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
+		"@floating-ui/dom": "^1.5.4",
 		"@playwright/test": "^1.28.1",
 		"@skeletonlabs/skeleton": "^2.3.0",
 		"@skeletonlabs/tw-plugin": "^0.2.2",

diff --git a/frontend/src/lib/config/ConfigBool.svelte b/frontend/src/lib/config/ConfigBool.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { SlideToggle } from '@skeletonlabs/skeleton';
+
 	export let name: string;
 	export let value: boolean | undefined = false;
 	export let onChange: (value: boolean) => void = () => {};
@@ -9,4 +10,4 @@
 	};
 </script>
 
-<SlideToggle size="sm" {name} checked={value} on:change={change} />
+<SlideToggle class="mt-1.5" size="sm" {name} checked={value} on:change={change} />
diff --git a/frontend/src/lib/config/ConfigString.svelte b/frontend/src/lib/config/ConfigString.svelte
@@ -7,8 +7,6 @@
 	let change = (e: Event) => {
 		onChange((e.target as HTMLInputElement).value);
 	};
-
-	$: console.log(value);
 </script>
 
 <input

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -13,13 +13,16 @@
 	import { Modal, initializeStores } from '@skeletonlabs/skeleton';
 	import CreateDeviceModal from '$lib/CreateDeviceModal.svelte';
 	import EditTagModal from '$lib/EditTagModal.svelte';
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
 
 	const modalRegistry: Record<string, ModalComponent> = {
 		CreateDeviceModal: { ref: CreateDeviceModal },
 		EditTagModal: { ref: EditTagModal }
 	};
 
 	initializeStores();
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 </script>
 
 <Modal components={modalRegistry} />

diff --git a/frontend/src/routes/config/+page.svelte b/frontend/src/routes/config/+page.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+	import { popup } from '@skeletonlabs/skeleton';
+	import { ListBox, ListBoxItem, type PopupSettings } from '@skeletonlabs/skeleton';
 	import ConfigBool from '$lib/config/ConfigBool.svelte';
 	import ConfigString from '$lib/config/ConfigString.svelte';
 	import type { PageData } from './$types';
 	import { queryParam } from 'sveltekit-search-params';
 	import { saveState, type Module } from '$lib/state';
 	import { page } from '$app/stores';
-	import { get } from 'svelte/store';
+	import { Info, RotateCcw } from 'lucide-svelte';
 
 	const selected = queryParam<number>('selected', {
 		decode: (value) => (value ? parseInt(value, 10) : 0),
@@ -24,13 +25,14 @@
 
 	$: getModuleSettings = () => {
 		if (tag) {
-			return tag.modules;
+			return tag.modules.map((m) => ({ origin: tag?.name, ...m }));
 		}
 
 		if (device) {
+			let usedTags = device.tags.flatMap((t) => state.tags.find((tag) => tag.name === t) ?? []);
 			return [
-				...device.modules,
-				...device.tags.flatMap((t) => state.tags.find((tag) => tag.name === t)?.modules ?? [])
+				...device.modules.map((m) => ({ origin: device?.hostname, ...m })),
+				...usedTags.flatMap((t) => t.modules.map((m) => ({ origin: t.name, ...m })))
 			];
 		}
 	};
@@ -60,11 +62,19 @@
 		}
 	};
 
-	$: getSetting = (module: Module, settingKey: string) => {
+	$: getSettings = (module: Module, settingKey: string) => {
 		let settings = getModuleSettings();
-		return settings?.find(
+		return settings?.filter(
 			(s) => s.type === module.type && Object.keys(s.settings).includes(settingKey)
-		)?.settings[settingKey].value as any;
+		);
+	};
+
+	$: getSetting = (module: Module, settingKey: string) => {
+		let settings = getSettings(module, settingKey);
+
+		if (settings && settings.length >= 1) {
+			return settings[0].settings[settingKey].value;
+		}
 	};
 
 	$: setSetting = (module: Module, settingKey: string, value: any) => {
@@ -141,24 +151,56 @@
 		{#if $selected != null && $selected < modules.length}
 			{#each Object.keys(modules[$selected]) as settingKey}
 				{#if settingKey !== 'name' && settingKey !== 'type'}
+					{@const setting = getSetting(modules[$selected], settingKey)}
+					{@const effectingSettings = getSettings(modules[$selected], settingKey)}
+					{@const popupHover = {
+						event: 'hover',
+						target: `popupHover-${settingKey}`,
+						placement: 'top'
+					}}
 					<div class="col-span-1">{modules[$selected][settingKey].name}</div>
-					<div class="col-span-1">
-						{#if modules[$selected][settingKey].type == 'bool'}
-							<ConfigBool
-								value={getSetting(modules[$selected], settingKey)}
-								name={modules[$selected][settingKey].name}
-								onChange={(value) => {
-									if ($selected != null) setSetting(modules[$selected], settingKey, value);
-								}}
-							/>
-						{:else if modules[$selected][settingKey].type == 'string'}
-							<ConfigString
-								value={getSetting(modules[$selected], settingKey)}
-								placeholder={modules[$selected][settingKey].default}
-								onChange={(value) => {
-									if ($selected != null) setSetting(modules[$selected], settingKey, value);
-								}}
-							/>
+					<div class="col-span-1 flex">
+						<div class="flex-1">
+							{#if modules[$selected][settingKey].type == 'bool'}
+								<ConfigBool
+									value={setting}
+									name={modules[$selected][settingKey].name}
+									onChange={(value) => {
+										if ($selected != null) setSetting(modules[$selected], settingKey, value);
+									}}
+								/>
+							{:else if modules[$selected][settingKey].type == 'string'}
+								<ConfigString
+									value={setting}
+									placeholder={modules[$selected][settingKey].default}
+									onChange={(value) => {
+										if ($selected != null) setSetting(modules[$selected], settingKey, value);
+									}}
+								/>
+							{/if}
+						</div>
+						{#if effectingSettings && effectingSettings.length >= 1}
+							<div class="mt-1.5 ml-2">
+								<button class="btn p-0 [&>*]:pointer-events-none" use:popup={popupHover}>
+									<Info color="#0080c0" />
+								</button>
+								<div
+									class="card p-4 variant-filled-primary z-40"
+									data-popup="popupHover-{settingKey}"
+								>
+									{#each effectingSettings.reverse() as effectingSetting}
+										<p>{effectingSetting.origin}: {effectingSetting.settings[settingKey].value}</p>
+									{/each}
+									<div class="arrow variant-filled-primary" />
+								</div>
+								<button
+									class="btn p-0"
+									on:click={() => {
+										if ($selected != null) setSetting(modules[$selected], settingKey, undefined);
+									}}
+									><RotateCcw color="#0080c0" />
+								</button>
+							</div>
 						{/if}
 					</div>
 					<div class="col-span-2">{modules[$selected][settingKey].description}</div>

diff --git a/frontend/src/routes/config/+page.ts b/frontend/src/routes/config/+page.ts
@@ -16,7 +16,6 @@ export const load = (async ({ fetch }) => {
 		}
 	});
 	const availableModules = (await availableModulesResponse.json()) as Module[];
-	// console.log(state);
 	return {
 		state: state,
 		availableModules: availableModules