added device setup feature
This commit is contained in:
Felix Baumgärtner
parent
35d1da7620
commit
f0f8eb6461
103
src/components/DeviceSetup.svelte
Normal file
103
src/components/DeviceSetup.svelte
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user