feat: add list type with basic UI

controller/thymis_controller/models/module.py

@@ -9,7 +9,11 @@ class SelectOneType(BaseModel):
     select_one: List[str] = Field(serialization_alias="select-one")
 
 
-Types = Union[ValueTypes, SelectOneType]
+class ListType(BaseModel):
+    settings: dict[str, "Setting"] = Field(serialization_alias="list-of")
+
+
+Types = Union[ValueTypes, SelectOneType, ListType]
 
 
 class Setting(BaseModel):
@@ -28,4 +32,4 @@ class Module(BaseModel):
     settings: dict[str, Setting]
 
 
-__all__ = ["Setting", "Module", "SelectOneType"]
+__all__ = ["Setting", "Module", "SelectOneType", "ListType"]

controller/thymis_controller/models/state.py

@@ -1,6 +1,6 @@
 from typing import Dict, List, Optional
 
-from pydantic import BaseModel
+from pydantic import BaseModel, JsonValue
 from thymis_controller import migration
 
 
@@ -12,7 +12,7 @@ class Repo(BaseModel):
 
 class ModuleSettings(BaseModel):
     type: str  # type of module this settings object is for
-    settings: Dict[str, str | int | float | bool]
+    settings: JsonValue
 
 
 class Device(BaseModel):

controller/thymis_controller/modules/thymis.py

@@ -39,6 +39,25 @@ class ThymisDevice(modules.Module):
         order=10,
     )
 
+    dev_1 = models.Setting(
+        name="thymis.config.dev-1",
+        type=models.ListType(
+            settings={
+                "ssh-key": models.Setting(
+                    name="name",
+                    type="string",
+                    default="",
+                    description="",
+                    example="",
+                ),
+            }
+        ),
+        default=[],
+        description="",
+        example='[""]',
+        order=15,
+    )
+
     device_name = models.Setting(
         name="thymis.config.device-name",
         type="string",

frontend/src/lib/config/ConfigDrawer.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { Module, ModuleSettings, SelectOneSettingType, Setting } from '$lib/state';
+	import type { ListSettingType, SelectOneSettingType, Setting } from '$lib/state';
 	import ConfigString from './ConfigString.svelte';
 	import ConfigBool from './ConfigBool.svelte';
 	import ConfigTextarea from './ConfigTextarea.svelte';
 	import ConfigSelectOne from './ConfigSelectOne.svelte';
+	import ConfigList from './ConfigList.svelte';
 
 	export let setting: Setting;
 	export let value: unknown;
@@ -39,6 +40,10 @@
 	const settingIsSelectOne = (setting: Setting): setting is Setting<SelectOneSettingType> => {
 		return getTypeKeyFromSetting(setting) === 'select-one';
 	};
+
+	const settingIsListOf = (setting: Setting): setting is Setting<ListSettingType> => {
+		return getTypeKeyFromSetting(setting) === 'list-of';
+	};
 </script>
 
 {#if settingIsBool(setting)}
@@ -49,4 +54,6 @@
 	<ConfigTextarea {value} placeholder={setting.default} {onChange} {disabled} />
 {:else if settingIsSelectOne(setting)}
 	<ConfigSelectOne {value} {setting} {onChange} {disabled} />
+{:else if settingIsListOf(setting)}
+	<ConfigList values={Array.isArray(value) ? value : []} settings={setting} {onChange} {disabled} />
 {/if}

frontend/src/lib/config/ConfigList.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { t } from 'svelte-i18n';
+	import { List, Tooltip } from 'flowbite-svelte';
+	import Plus from 'lucide-svelte/icons/plus';
+	import type { Setting, ListSettingType } from '$lib/state';
+	import ConfigDrawer from './ConfigDrawer.svelte';
+
+	export let values: any[];
+	export let settings: Setting<ListSettingType>;
+	export let onChange: (value: unknown[]) => void = () => {};
+	export let disabled: boolean = false;
+
+	$: console.log('values', values, settings.type['list-of']);
+</script>
+
+<div>
+	<div class="flex flex-col gap-1">
+		{#each values as item}
+			{#each Object.entries(settings.type['list-of']) as [key, setting]}
+				<ConfigDrawer
+					{setting}
+					value={item[key]}
+					{disabled}
+					onChange={(value) => {
+						const newValues = [...values];
+						newValues[values.indexOf(item)] = { ...item, [key]: value };
+						onChange(newValues);
+					}}
+				/>
+			{/each}
+		{/each}
+	</div>
+	<button
+		class="p-2 w-full flex justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+		on:click={() => onChange([...values, {}])}
+	>
+		<Plus />
+	</button>
+	<Tooltip type="auto" placement={'top'}>{$t('config.add_list_item')}</Tooltip>
+</div>
+{#if disabled}
+	<Tooltip type="auto" placement={'top'}>{$t('config.editDisabled')}</Tooltip>
+{/if}

frontend/src/lib/config/ModuleCard.svelte

@@ -43,7 +43,7 @@
 		<P class="col-span-1">
 			{$t(`options.nix.${setting.name}`, { default: setting.name })}
 		</P>
-		<div class="col-span-1 flex">
+		<div class="col-span-2 flex">
 			<div class="flex-1">
 				<ConfigDrawer
 					{setting}
@@ -64,7 +64,12 @@
 				{:else}
 					<button
 						class="btn m-1 p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
-						on:click={() => setSetting(module, key, '')}
+						on:click={() =>
+							setSetting(
+								module,
+								key,
+								typeof setting.type === 'object' && setting.type.hasOwnProperty('list-of') ? [] : ''
+							)}
 					>
 						<Pen />
 					</button>
@@ -133,7 +138,7 @@
 				{/if}
 			{/if}
 		</div>
-		<P class="col-span-2">{setting.description}</P>
+		<P class="col-span-1">{setting.description}</P>
 	{:else}
 		<div class="col-span-1">{$t('options.no-settings')}</div>
 	{/each}

frontend/src/lib/searchParamHelpers.ts

@@ -27,12 +27,6 @@ export const buildConfigSelectModuleSearchParam = (
 	contextIdentifier: string | null | undefined,
 	module: Module | null | undefined
 ) => {
-	console.log('search', search);
-	console.log('targetType', targetType);
-	console.log('target', target);
-	console.log('contextType', contextType);
-	console.log('contextIdentifier', contextIdentifier);
-	console.log('module', module);
 	const params = new URLSearchParams(search);
 	targetType
 		? params.set('global-nav-target-type', targetType)

frontend/src/lib/state.ts

@@ -30,7 +30,17 @@ export type SelectOneSettingType = {
 	'select-one': string[];
 };
 
-export type SettingType = 'string' | 'number' | 'bool' | 'textarea' | SelectOneSettingType;
+export type ListSettingType = {
+	'list-of': Setting[];
+};
+
+export type SettingType =
+	| 'string'
+	| 'number'
+	| 'bool'
+	| 'textarea'
+	| SelectOneSettingType
+	| ListSettingType;
 
 export type Setting<T extends SettingType = SettingType> = {
 	name: string;

frontend/src/locales/de.json

@@ -145,6 +145,7 @@
 			"installed-elsewhere": "Auf anderen Geräten oder Tags installiert",
 			"available": "Verfügbar"
 		},
+		"add_list_item": "Element Hinzufügen",
 		"add_module": "Modul hinzufügen",
 		"remove_module": "Modul entfernen",
 		"edit_tag_modules": "Tag Module bearbeiten",

frontend/src/locales/en.json

@@ -146,6 +146,7 @@
 			"installed-elsewhere": "Installed on other tags or devices",
 			"available": "Available"
 		},
+		"add_list_item": "Add List Element",
 		"add_module": "Add Module",
 		"remove_module": "Remove Module",
 		"edit_tag_modules": "Edit Tag Modules",