From 3f4e7d4e2e75406f6df9565fc60501fafd5ecbd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Schm=C3=B6cker?= <m.schmoecker@brickfire.eu>
Date: Wed, 24 Jan 2024 16:53:51 +0100
Subject: [PATCH] feat: show settings origin

---
 frontend/package-lock.json                  | 26 ++++++
 frontend/package.json                       |  1 +
 frontend/src/lib/config/ConfigBool.svelte   |  3 +-
 frontend/src/lib/config/ConfigString.svelte |  2 -
 frontend/src/routes/+layout.svelte          |  3 +
 frontend/src/routes/config/+page.svelte     | 92 +++++++++++++++------
 frontend/src/routes/config/+page.ts         |  1 -
 7 files changed, 99 insertions(+), 29 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d9e43808..112538fd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "thymis-frontend",
 			"version": "0.0.1",
 			"devDependencies": {
+				"@floating-ui/dom": "^1.5.4",
 				"@playwright/test": "^1.28.1",
 				"@skeletonlabs/skeleton": "^2.3.0",
 				"@skeletonlabs/tw-plugin": "^0.2.2",
@@ -487,6 +488,31 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+			"integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+			"integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/core": "^1.5.3",
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
+			"dev": true
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.11",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5e75ded6..fc010d70 100644
--- 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
index 4fbebb70..8464e0eb 100644
--- 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
index c4f1523e..5ac65456 100644
--- 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
index 311ceb5a..ba5f523c 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -13,6 +13,8 @@
 	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 },
@@ -20,6 +22,7 @@
 	};
 
 	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
index ccba4dd9..6b92a211 100644
--- 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
index 49731f5b..c9c20f7c 100644
--- 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