added onboarding, modal and drawer features
This commit is contained in:
Felix Baumgärtner
parent
b9cd2a0622
commit
2648ad4253
66
src/components/Onboarding.svelte
Normal file
66
src/components/Onboarding.svelte
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { Stepper, Step } from '@skeletonlabs/skeleton';
|
||||||
|
|
||||||
|
var onboarding, onboardingStore;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
onboardingStore = localStorage.getItem('onboarding');
|
||||||
|
if (onboardingStore === null) {
|
||||||
|
onboarding = true;
|
||||||
|
localStorage.setItem('onboarding', onboarding);
|
||||||
|
} else if (onboardingStore === 'true') {
|
||||||
|
onboarding = true;
|
||||||
|
} else if (onboardingStore === 'false') {
|
||||||
|
onboarding = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function onCompleteHandler(e) {
|
||||||
|
onboarding = false;
|
||||||
|
localStorage.setItem('onboarding', onboarding);
|
||||||
|
}
|
||||||
|
|
||||||
|
var stepsObj = [
|
||||||
|
{
|
||||||
|
title: "Welcome!",
|
||||||
|
content: "Welcome to the HMI Application for FTS Operators! We're thrilled to have you on board. This platform is designed to enhance your experience in managing and controlling fahrerlose Transportsysteme (FTS) efficiently. Let's get started on this exciting journey!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Overview",
|
||||||
|
content: "In this section, you'll find a comprehensive overview of the application's key features. From real-time monitoring to customizable dashboards, explore how this HMI empowers you to optimize FTS operations and enhance overall efficiency."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Live Map",
|
||||||
|
content: "Navigate the Live Map feature to gain real-time insights into the locations and activities of your FTS units. Track movements, identify potential bottlenecks, and stay informed about the status of each unit—all at your fingertips."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Control and Interaction",
|
||||||
|
content: "Take control with our user-friendly interface! Learn the basics of operating FTS, from initiating commands to adjusting routes. The Control and Interaction section guides you through the essential features for seamless management."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Emergency Protocols",
|
||||||
|
content: "Your safety and the safety of the operation are paramount. Discover the Emergency Protocols section, where you'll find tools such as emergency stop buttons, safety protocols, and visual/audible alarms designed to handle critical situations with precision."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Get Started",
|
||||||
|
content: "Ready to dive in? Click 'Start' to begin your journey with the HMI Application. Whether you're a seasoned FTS operator or new to the system, this section serves as your gateway to a user-friendly and efficient experience. Let's get started."
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if onboarding == true}
|
||||||
|
<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="Start" buttonNext='btn-lg variant-filled-primary' buttonBack='btn-lg variant-filled-surface' buttonComplete='btn-lg variant-filled-primary'>
|
||||||
|
{#each stepsObj as item}
|
||||||
|
<Step class="h-full flex flex-col" regionContent="grow">
|
||||||
|
<svelte:fragment slot="header">
|
||||||
|
<h1>{item.title}</h1>
|
||||||
|
</svelte:fragment>
|
||||||
|
<p>{item.content}</p>
|
||||||
|
<svelte:fragment slot="navigation"> </svelte:fragment>
|
||||||
|
</Step>
|
||||||
|
{/each}
|
||||||
|
</Stepper>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
@ -2,20 +2,66 @@
|
|||||||
import "../app.pcss";
|
import "../app.pcss";
|
||||||
import Map from "../components/Map.svelte";
|
import Map from "../components/Map.svelte";
|
||||||
import Navigation from "../components/Navigation.svelte";
|
import Navigation from "../components/Navigation.svelte";
|
||||||
|
import Onboarding from "../components/Onboarding.svelte";
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
|
import { Modal, getModalStore } from '@skeletonlabs/skeleton';
|
||||||
|
// import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
|
||||||
|
import { Drawer, getDrawerStore } from '@skeletonlabs/skeleton';
|
||||||
|
import { initializeStores } from '@skeletonlabs/skeleton';
|
||||||
|
initializeStores();
|
||||||
|
|
||||||
|
const drawerStore = getDrawerStore();
|
||||||
|
|
||||||
var mapVisible = false;
|
var mapVisible = false;
|
||||||
$: $page.url.pathname == '/' || $page.url.pathname == '/control' ? mapVisible = true : mapVisible = false;
|
$: $page.url.pathname == '/' || $page.url.pathname == '/control' ? mapVisible = true : mapVisible = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="pb-28">
|
<main class="min-h-screen p-8 pb-32">
|
||||||
<slot></slot>
|
<slot />
|
||||||
|
|
||||||
<div class="{mapVisible == true ? " block" : "hidden"}">
|
<div class="{mapVisible == true ? "block" : "hidden"}">
|
||||||
<Map></Map>
|
<Map />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Navigation />
|
||||||
<Navigation></Navigation>
|
<Onboarding />
|
||||||
|
</main>
|
||||||
|
<Drawer position="right" bgDrawer="bg-surface-50">
|
||||||
|
{#if $drawerStore.id === 'edit-device'}
|
||||||
|
<div class="w-full h-full flex justify-center items-center">
|
||||||
|
<div class="text-center space-y-2">
|
||||||
|
<img class="mb-2 px-8 py-10" src="/images/fts_first-render_minified.png" alt="Device preview">
|
||||||
|
<h2 class="h2">AGV device</h2>
|
||||||
|
<span class="block">List of stats</span>
|
||||||
|
<button type="button" class="btn variant-filled-warning mr-2">
|
||||||
|
<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="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Rename</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn variant-filled-error">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
|
||||||
|
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||||
|
<path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Delete</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else if $drawerStore.id === 'example-2'}
|
||||||
|
<!-- (show 'example-2' contents) -->
|
||||||
|
{:else}
|
||||||
|
<!-- (fallback contents) -->
|
||||||
|
{/if}
|
||||||
|
<button type="button" class="btn-icon variant-filled-surface absolute top-4 right-4 bg-surface-100" on:click={() => {drawerStore.close()}}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 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="M41 39C31.6 29.7 16.4 29.7 7 39S-2.3 63.6 7 73l183 183L7 439c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l183-183L407 473c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-183-183L441 73c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-183 183L41 39z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</Drawer>
|
||||||
|
<Modal buttonTextConfirm="Reset" buttonPositive="variant-filled-error" />
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
/* :global(html) {
|
/* :global(html) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user