94 lines
2.7 KiB
Svelte
94 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import '../../app.css';
|
|
import favicon from '$lib/assets/favicon.svg';
|
|
import * as Sidebar from '$lib/components/ui/sidebar';
|
|
import AppSidebar from '$lib/AppSidebar.svelte';
|
|
import { Separator } from '$lib/components/ui/separator';
|
|
import * as Breadcrumb from '$lib/components/ui/breadcrumb';
|
|
import Spinner from '$lib/Spinner.svelte';
|
|
import { connectWS, wsState } from '$lib/ws.svelte';
|
|
import { Toaster } from '$lib/components/ui/sonner';
|
|
import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
|
|
import { onMount } from 'svelte';
|
|
import { browser } from '$app/environment';
|
|
import { sidebarState } from "$lib/sidebar.svelte";
|
|
|
|
let { children } = $props();
|
|
|
|
onMount(() => {
|
|
if(!browser) return;
|
|
|
|
connectWS();
|
|
console.log("Connecting to WebSocket...");
|
|
})
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link rel="icon" href={favicon} />
|
|
</svelte:head>
|
|
|
|
{#if wsState.closed}
|
|
<ConnectionLostDialog />
|
|
{/if}
|
|
|
|
{#if !wsState.connected && !wsState.closed}
|
|
<div id="blocker">
|
|
<Spinner />
|
|
|
|
<h2 class="text-2xl">Verbindung herstellen...</h2>
|
|
</div>
|
|
{/if}
|
|
|
|
<Toaster position="bottom-right" theme="dark" richColors={true} />
|
|
|
|
<Sidebar.Provider bind:open={sidebarState.open}>
|
|
<AppSidebar />
|
|
<Sidebar.Inset>
|
|
<!-- <header class="flex h-16 shrink-0 items-center gap-2 px-4"> -->
|
|
<header class="flex h-2 shrink-0 items-center gap-2 px-4">
|
|
<!-- <Sidebar.Trigger class="-ml-1" /> -->
|
|
<!-- <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" /> -->
|
|
<!-- <Breadcrumb.Root>
|
|
<Breadcrumb.List>
|
|
<Breadcrumb.Item class="hidden md:block">
|
|
<Breadcrumb.Link href="#">Building Your Application</Breadcrumb.Link>
|
|
</Breadcrumb.Item>
|
|
<Breadcrumb.Separator class="hidden md:block" />
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
|
|
</Breadcrumb.Item>
|
|
</Breadcrumb.List>
|
|
</Breadcrumb.Root> -->
|
|
</header>
|
|
<div class="flex flex-col gap-2">
|
|
{@render children?.()}
|
|
</div>
|
|
<!-- <div class="flex flex-1 flex-col gap-4 p-4">
|
|
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
|
<div class="bg-muted/50 aspect-video rounded-xl"></div>
|
|
<div class="bg-muted/50 aspect-video rounded-xl"></div>
|
|
<div class="bg-muted/50 aspect-video rounded-xl"></div>
|
|
</div>
|
|
<div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min"></div>
|
|
</div> -->
|
|
</Sidebar.Inset>
|
|
</Sidebar.Provider>
|
|
|
|
<style>
|
|
#blocker {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(5px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
</style>
|