feat: pass device type to installation stepper

Thymis-io · Apr 12, 2024 · 8365fc6 · 8365fc6
1 parent 2852703
commit 8365fc6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/frontend/src/lib/CreateDeviceModal.svelte b/frontend/src/lib/CreateDeviceModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import InstallationStepper from '$lib/InstallationStepper.svelte';
 	import { Modal } from 'flowbite-svelte';
-	import type { PageData } from '../routes/$types';
-	import { saveState, type Device, type State } from './state';
+	import { saveState, type Device, type State, type ModuleDefinition } from './state';
 
 	export let state: State;
 	export let open = false;
 	export let onClose: (() => void) | undefined = undefined;
+	export let thymisDevice: ModuleDefinition | undefined = undefined;
 
 	function onSubmit(submitData: Device): void {
 		state.devices = [...state.devices, { ...submitData }];
@@ -15,5 +15,5 @@
 </script>
 
 <Modal title="Create a new device" bind:open outsideclose size={'lg'} on:close={() => onClose?.()}>
-	<InstallationStepper {onSubmit} />
+	<InstallationStepper {onSubmit} {thymisDevice} />
 </Modal>
diff --git a/frontend/src/lib/InstallationStepper.svelte b/frontend/src/lib/InstallationStepper.svelte
@@ -15,9 +15,11 @@
 	import Apple from 'lucide-svelte/icons/apple';
 	import AppWindow from 'lucide-svelte/icons/app-window';
 	import Wrench from 'lucide-svelte/icons/wrench';
-	import type { Device } from './state';
+	import type { Device, ModuleDefinition } from './state';
+	import ConfigSelectOne from './config/ConfigSelectOne.svelte';
 
 	export let onSubmit: null | ((data: Device) => void) = null;
+	export let thymisDevice: ModuleDefinition | undefined = undefined;
 
 	let data = {
 		device: '',
@@ -79,14 +81,14 @@
 						Wir unterstützen momentan x86-basierte und aarch64/ARM64-basierte Geräte. Darunter
 						zählen der Raspberry Pi 3, 4 und 5, sowie normale Desktop-Computer.
 					</p>
-					<Select
-						bind:value={data.device}
-						items={[
-							{ value: 'generic-x86_64', name: 'Generisches x86-Gerät (z.B. Desktop-PC)' },
-							{ value: 'raspberry-pi-4', name: 'Raspberry Pi 4' },
-							{ value: 'generic-aarch64', name: 'Generisches aarch64/ARM64-Gerät' }
-						]}
-					/>
+					{#if thymisDevice}
+						<ConfigSelectOne
+							value={data.device}
+							change={(value) => (data.device = value)}
+							setting={thymisDevice['device_type']}
+							options={thymisDevice['device_type'].options}
+						/>
+					{/if}
 				{:else if currentStep === 3}
 					<p>
 						Sobald Thymis installiert ist, können Sie noch viel mehr ganz einfach einrichten. Geben

diff --git a/frontend/src/routes/devices/+page.svelte b/frontend/src/routes/devices/+page.svelte
@@ -121,6 +121,9 @@
 	state={data.state}
 	open={openModal === ModalType.CreateDevice}
 	onClose={closeCreateDeviceModal}
+	thymisDevice={data.availableModules.find(
+		(m) => m.type === 'thymis_controller.models.modules.thymis.ThymisDevice'
+	)}
 />
 <EditStringModal
 	title={'Edit Name'}