feat: simplefied device/tag select

Thymis-io · Jun 6, 2024 · 6b378d6 · 6b378d6
1 parent 0c34934
commit 6b378d6
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 79 deletions.
diff --git a/frontend/src/lib/DeviceSelect.svelte b/frontend/src/lib/DeviceSelect.svelte
@@ -1,29 +1,17 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
-	import { queryParam } from 'sveltekit-search-params';
 	import TagIcon from 'lucide-svelte/icons/tag';
 	import HardDrive from 'lucide-svelte/icons/hard-drive';
 	import { Button, Dropdown, DropdownItem, Search } from 'flowbite-svelte';
 	import { ChevronDownSolid } from 'flowbite-svelte-icons';
+	import { selectedTag, selectedDevice, deviceUrl } from './deviceSelectHelper';
 	import { page } from '$app/stores';
 	import type { State } from './state';
-	export let state: State;
-
-	const tagParam = queryParam('tag');
-	const deviceParam = queryParam('device');
 
-	$: tag = state.tags.find((t) => t.identifier === $tagParam);
-	$: device = state.devices.find((d) => d.identifier === $deviceParam);
+	export let state: State;
 
 	let search = '';
 
-	const otherUrlParams = () => {
-		const params = new URLSearchParams($page.url.search);
-		params.delete('tag');
-		params.delete('device');
-		return params.toString();
-	};
-
 	const isSearched = (search: string, item: string) => {
 		if (!search) {
 			return true;
@@ -36,10 +24,10 @@
 
 <Button class="w-full flex justify-between">
 	<div class="flex gap-2">
-		{#if tag}
-			<TagIcon size={20} /> {tag.displayName}
-		{:else if device}
-			<HardDrive size={20} /> {device.displayName}
+		{#if $selectedTag}
+			<TagIcon size={20} /> {$selectedTag?.displayName}
+		{:else if $selectedDevice}
+			<HardDrive size={20} /> {$selectedDevice?.displayName}
 		{:else}
 			{$t('common.no-tag-or-device-selected')}
 		{/if}
@@ -53,7 +41,7 @@
 	{#each state.tags as tag}
 		{#if isSearched(search, tag.displayName)}
 			<DropdownItem
-				href={`?tag=${tag.identifier}&${otherUrlParams()}`}
+				href={`?${deviceUrl($page.url.search, 'tag', tag.identifier)}`}
 				class={'flex gap-2 my-1 p-1 hover:bg-primary-500'}
 			>
 				<TagIcon />
@@ -64,7 +52,7 @@
 	{#each state.devices as device}
 		{#if isSearched(search, device.displayName)}
 			<DropdownItem
-				href={`?device=${device.identifier}&${otherUrlParams()}`}
+				href={`?${deviceUrl($page.url.search, 'device', device.identifier)}`}
 				class={'flex gap-2 my-1 p-1 hover:bg-primary-500'}
 			>
 				<HardDrive />

diff --git a/frontend/src/lib/ModuleCard.svelte b/frontend/src/lib/ModuleCard.svelte
@@ -3,15 +3,12 @@
 	import { Card, Button, P } from 'flowbite-svelte';
 	import type { ModuleSettings, Module } from './state';
 	import { page } from '$app/stores';
-	import { queryParam } from 'sveltekit-search-params';
+	import { selectedTarget } from './deviceSelectHelper';
 
 	export let module: Module;
 	export let installed: boolean;
 	export let addModule: (module: ModuleSettings | Module) => void;
 
-	const tagParam = queryParam('tag');
-	const deviceParam = queryParam('device');
-
 	const otherUrlParams = (searchParams: string) => {
 		const params = new URLSearchParams(searchParams);
 		params.delete('module');
@@ -28,7 +25,7 @@
 			class="!w-28"
 			href="/config?{otherUrlParams(
 				$page.url.search
-			)}&module={module.type}&config-target=self-{$tagParam ?? $deviceParam}"
+			)}&module={module.type}&config-target=self-{$selectedTarget?.identifier}"
 		>
 			{$t('config.configure')}
 		</Button>

diff --git a/frontend/src/lib/deviceSelectHelper.ts b/frontend/src/lib/deviceSelectHelper.ts
@@ -0,0 +1,40 @@
+import type { State } from './state';
+import { page } from '$app/stores';
+import { queryParam } from 'sveltekit-search-params';
+import { derived } from 'svelte/store';
+
+export const deviceUrl = (search: string, context: string, identifier: string) => {
+	const params = new URLSearchParams(search);
+	params.set('id-context', context);
+	params.set('id', identifier);
+	return params.toString();
+};
+
+export const selectedTag = derived(
+	[page, queryParam('id-context'), queryParam('id')],
+	([$page, $context, $identifier]) => {
+		let state = $page.data.state as State;
+
+		if ($context === 'tag') {
+			return state.tags.find((tag) => tag.identifier === $identifier);
+		}
+	}
+);
+
+export const selectedDevice = derived(
+	[page, queryParam('id-context'), queryParam('id')],
+	([$page, $context, $identifier]) => {
+		let state = $page.data.state as State;
+
+		if ($context === 'device') {
+			return state.devices.find((device) => device.identifier === $identifier);
+		}
+	}
+);
+
+export const selectedTarget = derived(
+	[selectedDevice, selectedTag],
+	([$device, $tag]) => $device || $tag
+);
+
+export const selectedContext = derived(queryParam('id-context'), ($context) => $context);
diff --git a/frontend/src/routes/Sidebar.svelte b/frontend/src/routes/Sidebar.svelte
@@ -27,18 +27,12 @@
 		GearSolid
 	} from 'svelte-awesome-icons';
 	import DeviceSelect from '$lib/DeviceSelect.svelte';
-	import { queryParam } from 'sveltekit-search-params';
 	import type { Device, State } from '$lib/state';
 	import BuildStatus from '$lib/BuildStatus.svelte';
+	import { selectedTag, selectedDevice } from '$lib/deviceSelectHelper';
 
 	export let state: State;
 
-	const tagParam = queryParam('tag');
-	const deviceParam = queryParam('device');
-
-	$: tag = state.tags.find((t) => t.identifier === $tagParam);
-	$: device = state.devices.find((d) => d.identifier === $deviceParam);
-
 	export let drawerHidden: boolean;
 
 	const closeDrawer = () => {
@@ -103,7 +97,7 @@
 			name: $t('nav.terminal'),
 			icon: TerminalSolid,
 			href: '/terminal',
-			hidden: !device
+			hidden: !$selectedDevice
 		},
 		{
 			name: $t('nav.settings'),

diff --git a/frontend/src/routes/config-overview/+page.svelte b/frontend/src/routes/config-overview/+page.svelte
@@ -1,22 +1,17 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { P } from 'flowbite-svelte';
-	import { queryParam } from 'sveltekit-search-params';
 	import type { Tag, Device, ModuleSettings, Module } from '$lib/state';
 	import { saveState } from '$lib/state';
 
 	import DeployActions from '$lib/DeployActions.svelte';
 	import ModuleCard from '$lib/ModuleCard.svelte';
 	import type { PageData } from './$types';
+	import { selectedTag, selectedDevice } from '$lib/deviceSelectHelper';
 
 	export let data: PageData;
 
-	const tagParam = queryParam('tag');
-	const deviceParam = queryParam('device');
-
-	$: tag = data.state.tags.find((t) => t.identifier === $tagParam);
-	$: device = data.state.devices.find((d) => d.identifier === $deviceParam);
-	$: modules = getModules(tag, device);
+	$: modules = getModules($selectedTag, $selectedDevice);
 	$: modulesAnywhere = getModulesInstalledAnywhere();
 
 	const getOrigin = (target: Tag | Device) => {
@@ -51,12 +46,12 @@
 	};
 
 	const addModule = (module: ModuleSettings | Module) => {
-		if (tag && !tag.modules.find((m) => m.type === module.type)) {
-			tag.modules = [...tag.modules, { type: module.type, settings: {} }];
+		if ($selectedTag && !$selectedTag.modules.find((m) => m.type === module.type)) {
+			$selectedTag.modules = [...$selectedTag.modules, { type: module.type, settings: {} }];
 		}
 
-		if (device && !device.modules.find((m) => m.type === module.type)) {
-			device.modules = [...device.modules, { type: module.type, settings: {} }];
+		if ($selectedDevice && !$selectedDevice.modules.find((m) => m.type === module.type)) {
+			$selectedDevice.modules = [...$selectedDevice.modules, { type: module.type, settings: {} }];
 		}
 
 		saveState(data.state);
@@ -65,10 +60,10 @@
 
 <div class="flex justify-between mb-4">
 	<h1 class="text-3xl font-bold dark:text-white">
-		{#if tag}
-			{$t('config.header.tag-overview', { values: { tag: tag.displayName } })}
-		{:else if device}
-			{$t('config.header.device-overview', { values: { device: device.displayName } })}
+		{#if $selectedTag}
+			{$t('config.header.tag-overview', { values: { tag: $selectedTag.displayName } })}
+		{:else if $selectedDevice}
+			{$t('config.header.device-overview', { values: { device: $selectedDevice.displayName } })}
 		{:else}
 			{$t('config.header.overview')}
 		{/if}

diff --git a/frontend/src/routes/config/+page.svelte b/frontend/src/routes/config/+page.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { Card, Toggle, Listgroup, ListgroupItem, Tooltip, P, Button } from 'flowbite-svelte';
-	import ConfigBool from '$lib/config/ConfigBool.svelte';
-	import ConfigString from '$lib/config/ConfigString.svelte';
-	import ConfigTextarea from '$lib/config/ConfigTextarea.svelte';
-	import ConfigSelectOne from '$lib/config/ConfigSelectOne.svelte';
 	import ModuleList from '$lib/config/ModuleList.svelte';
 	import { queryParam } from 'sveltekit-search-params';
 	import { saveState } from '$lib/state';
 	import type { ModuleSettings, Tag, Device, Module } from '$lib/state';
-
-	import Info from 'lucide-svelte/icons/info';
-	import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
+	import { selectedDevice, selectedTag, selectedTarget } from '$lib/deviceSelectHelper';
 	import DeployActions from '$lib/DeployActions.svelte';
 	import type { PageData } from './$types';
 	import { page } from '$app/stores';
@@ -20,21 +14,12 @@
 
 	export let data: PageData;
 
-	const selected = queryParam<number>('selected', {
-		decode: (value) => (value ? parseInt(value, 10) : 0),
-		encode: (value) => value.toString()
-	});
-
-	const tagParam = queryParam('tag');
-	const deviceParam = queryParam('device');
 	const moduleParam = queryParam('module');
 	const configTargetParam = queryParam('config-target');
 
-	$: tag = data.state.tags.find((t) => t.identifier === $tagParam);
-	$: device = data.state.devices.find((d) => d.identifier === $deviceParam);
-	$: modules = getModules(tag, device);
+	$: modules = getModules($selectedTag, $selectedDevice);
 	$: selectedModule = data.availableModules.find((m) => m.type === $moduleParam);
-	$: configTarget = getConfigTarget($configTargetParam, tag, device);
+	$: configTarget = getConfigTarget($configTargetParam, $selectedTag, $selectedDevice);
 
 	const getOrigin = (target: Tag | Device | undefined) => {
 		return target?.displayName;
@@ -68,8 +53,8 @@
 		return target?.modules.map((m) => ({ origin: getOrigin(target), ...m })) ?? [];
 	};
 
-	const getSelfModules = (tag: Tag | undefined, device: Device | undefined) => {
-		let settings = getSelfModuleSettings(tag ?? device);
+	const getSelfModules = (selectedTarget: Tag | Device | undefined) => {
+		let settings = getSelfModuleSettings(selectedTarget);
 		return data.availableModules.filter((m) => settings.find((s) => s.type === m.type)) ?? [];
 	};
 
@@ -166,13 +151,13 @@
 
 <div class="flex justify-between mb-4">
 	<h1 class="text-3xl font-bold dark:text-white">
-		{#if tag}
+		{#if $selectedTag}
 			{$t('config.header.tag-module', {
-				values: { module: selectedModule?.displayName, tag: tag.displayName }
+				values: { module: selectedModule?.displayName, tag: $selectedTag.displayName }
 			})}
-		{:else if device}
+		{:else if $selectedDevice}
 			{$t('config.header.device-module', {
-				values: { module: selectedModule?.displayName, device: device.displayName }
+				values: { module: selectedModule?.displayName, device: $selectedDevice.displayName }
 			})}
 		{:else}
 			{$t('config.header.module', { values: { module: selectedModule?.displayName } })}
@@ -202,24 +187,24 @@
 <div class="grid grid-flow-row grid-cols-5 gap-4">
 	<Card class="col-span-1 max-w-none">
 		<ModuleList
-			target={tag ?? device}
-			selfModules={getSelfModules(tag, device)}
+			target={$selectedTarget}
+			selfModules={getSelfModules($selectedTarget)}
 			page={$page}
 			queryPrefix="self-"
 		>
 			<slot slot="icon">
-				{#if tag}
+				{#if $selectedTag}
 					<TagIcon />
-				{:else if device}
+				{:else if $selectedTag}
 					<HardDrive />
 				{/if}
 			</slot>
 		</ModuleList>
-		{#each device?.tags ?? [] as tagIdentifier}
+		{#each $selectedDevice?.tags ?? [] as tagIdentifier}
 			{@const usedTag = data.state.tags.find((t) => t.identifier === tagIdentifier)}
 			<ModuleList
 				target={usedTag}
-				selfModules={getSelfModules(usedTag, undefined)}
+				selfModules={getSelfModules(usedTag)}
 				page={$page}
 				queryPrefix="other-"
 			>
@@ -232,7 +217,7 @@
 			<ConfigModuleCard
 				module={selectedModule}
 				settings={getSelfModuleSettings(configTarget).find((s) => s.type === selectedModule.type)}
-				otherSettings={getOtherSettings(device, selectedModule)}
+				otherSettings={getOtherSettings($selectedDevice, selectedModule)}
 				setSetting={(module, key, value) => setSetting(configTarget, module, key, value)}
 			/>
 		</div>