added device setup feature

src/components/DeviceSetup.svelte

@@ -0,0 +1,103 @@
+<script>
+	import { onMount } from 'svelte';
+	import { Stepper, Step } from '@skeletonlabs/skeleton';
+	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+
+	import { localStorageStore } from '@skeletonlabs/skeleton';
+	import { get } from 'svelte/store';
+	const devicesObj = localStorageStore('devicesObj', []);
+	const deviceSetupShow = localStorageStore('deviceSetupShow', false);
+	
+	var loadFoundDevices = false;
+	let selectedDevice = '0';
+
+	onMount(() => {
+		setTimeout(() => {
+			loadFoundDevices = true;
+		}, 3000);
+	});
+
+	function onAbortHandler() {
+		$deviceSetupShow = false;
+	}
+	function onCompleteHandler(e) {
+		$devicesObj.push(defaultDevice);
+		console.log($devicesObj);
+		$deviceSetupShow = false;
+	}
+
+	var defaultDevice = {
+		id: selectedDevice,
+		title: "AGV device",
+		image: "/images/fts_first-render_minified.png",
+		stats: ""
+	}
+
+	var foundDevicesObj = [
+		{
+			id: "1",
+			title: "AGV device #1",
+			image: "/images/fts_first-render_minified.png",
+			stats: ""
+		},
+		{
+			id: "2",
+			title: "AGV device #2",
+			image: "/images/fts_first-render_minified.png",
+			stats: ""
+		},
+		{
+			id: "3",
+			title: "AGV device #3",
+			image: "/images/fts_first-render_minified.png",
+			stats: ""
+		},
+	];
+</script>
+
+<div id="stepper-wrapper" class="fixed top-0 left-0 w-full h-full p-12 bg-slate-50 z-10">
+	<Stepper on:complete={onCompleteHandler} class="h-full flex flex-col" regionContent="grow" buttonCompleteLabel="Add device" buttonNext='btn-lg variant-filled-primary' buttonBack='btn-lg variant-filled-surface' buttonComplete='btn-lg variant-filled-primary'>
+		<Step class="h-full flex flex-col" regionContent="grow" locked={selectedDevice == "0" ? true : false}>
+			<svelte:fragment slot="header">
+				<h1>Searching</h1>
+			</svelte:fragment>
+			{#if !loadFoundDevices}
+			<p>Searching for devices in network ...</p>
+			{:else}
+			<p>Found devices:</p>
+			<ListBox active="variant-filled-primary" spacing="space-y-2">
+				{#each foundDevicesObj as item}
+				<ListBoxItem bind:group={selectedDevice} name="medium" value="{item.id}">
+					<svelte:fragment slot="lead">
+						<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
+							<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+							<path d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36H344.3c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36H167.7c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12H344.3c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/>
+						</svg>
+					</svelte:fragment>
+					{item.title}
+				</ListBoxItem>
+				{/each}
+			</ListBox>
+			{/if}
+			<svelte:fragment slot="navigation">
+				<button type="button" class="btn btn-lg variant-filled-surface" on:click={onAbortHandler}>Cancel</button>
+			</svelte:fragment>
+		</Step>
+		<Step class="h-full flex flex-col" regionContent="grow">
+			<svelte:fragment slot="header">
+				<h1>Selected</h1>
+			</svelte:fragment>
+			<img src="{foundDevicesObj[selectedDevice - 1].image}" alt="">
+			<h2 class="h2">{foundDevicesObj[selectedDevice - 1].title}</h2>
+			<p>Stats of device</p>
+		</Step>
+		<Step class="h-full flex flex-col" regionContent="grow">
+			<svelte:fragment slot="header">
+				<h1>Finish</h1>
+			</svelte:fragment>
+			<img src="{foundDevicesObj[selectedDevice - 1].image}" alt="">
+			<h2 class="h2">{foundDevicesObj[selectedDevice - 1].title}</h2>
+			<p>Click on 'Add device' to finish the setup</p>
+		</Step>
+	</Stepper>
+</div>