⛹️‍♂️ Simplifies layout handling

app/src/lib/components/Stream.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
 	import { user } from '$lib/stores/user';
 	import { onDestroy } from 'svelte';
+	import { location } from '$lib/utilities';
 
-	const ws_token = `?access_token=${$user.bearer_token}`
+	let source = `//${location}/api/camera/stream?access_token=${$user.bearer_token}`;
 
-    let source = "/api/camera/stream"+ ws_token;
-
-	onDestroy(() => {
-		source = '#';
-	});
+	onDestroy(() => (source = '#'));
 </script>
 
 <div class="w-full h-full">

app/src/lib/components/layout/LayoutManager.ts

@@ -1,80 +0,0 @@
-import { persistentStore } from '$lib/utilities';
-import Visualization from '$lib/components/Visualization.svelte';
-import Stream from '$lib/components/Stream.svelte';
-import CpuUsageChart from '$lib/components/widget/CpuUsageChart.svelte';
-import type { Writable } from 'svelte/store';
-
-export type SizeUnit = 'px' | '%' | 'fr' | 'em';
-
-export enum SizeUnitEnum {
-	Em = 'em',
-	Fractional = 'fr',
-	Percent = '%',
-	Pixel = 'px'
-}
-
-export interface WidgetConfig {
-	id: string | number;
-	component: keyof typeof WidgetComponents;
-	size?: number;
-	sizeUnit?: SizeUnitEnum;
-	props?: Record<string, any>;
-}
-
-export interface WidgetContainerConfig {
-	id: string | number;
-	layout: 'row' | 'column' | 'wrap';
-	header?: string;
-	size?: number;
-	sizeUnit?: SizeUnitEnum;
-	widgets: Array<WidgetConfig | WidgetContainerConfig>;
-}
-
-export const isWidgetConfig = (
-	widget: WidgetConfig | WidgetContainerConfig
-): widget is WidgetConfig => 'component' in widget;
-
-export const WidgetComponents = {
-	Visualization,
-	Stream,
-	CpuUsageChart
-};
-
-export const phoneControllerLayout: Writable<WidgetContainerConfig> = persistentStore(
-	'phone_controller_layout',
-	{
-		id: 'root',
-		layout: 'wrap',
-		widgets: [
-			{ id: 2, component: 'Stream' },
-			{ id: 1, component: 'Visualization', props: { debug: true } }
-		]
-	} as WidgetContainerConfig
-);
-
-export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore('controller_layout', {
-	id: 'root',
-	layout: 'column',
-	widgets: [
-		{
-			id: 'visualization',
-			layout: 'column',
-			header: 'Visualization',
-			widgets: [
-				{ id: 1, component: 'Stream' },
-				{ id: 2, component: 'Visualization', props: { debug: true } }
-			]
-		},
-		{
-			id: 'charts',
-			layout: 'row',
-			size: 40,
-			header: 'Charts',
-			widgets: [
-				{ id: 3, component: 'CpuUsageChart' },
-				{ id: 4, component: 'CpuUsageChart' },
-				{ id: 5, component: 'CpuUsageChart' }
-			]
-		}
-	]
-} as WidgetContainerConfig);

app/src/lib/components/layout/Widget.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
-	import type { SizeUnit } from "./LayoutManager";
-
-    export let size = -1;
-    export let sizeUnit:SizeUnit = '%';
 </script>
 
-<div class="box-border overflow-hidden min-w-96 "class:flex-1={size === -1}>
+<div class="box-border overflow-hidden flex-1">
     <slot></slot>
 </div>

app/src/lib/components/layout/WidgetContainer.svelte

@@ -1,18 +1,11 @@
 <script lang="ts">
-	import { WidgetComponents, type WidgetContainerConfig, isWidgetConfig } from './LayoutManager';
+	import { WidgetComponents, type WidgetContainerConfig, isWidgetConfig } from '$lib/stores/application';
 	import Widget from './Widget.svelte';
 
 	export let container: WidgetContainerConfig;
 </script>
 
 <div class="w-full h-full flex flex-col overflow-hidden">
-	{#if container.header}
-		<div role="tablist" class="tabs tabs-lifted w-min">
-			<a role="tab" class="tab">{container.header}</a>
-			<a role="tab" class="tab tab-active">{container.header}</a>
-		</div>
-	{/if}
-
 	<div
 		class="flex w-full h-full"
 		class:flex-row={container.layout === 'column'}
@@ -20,7 +13,7 @@
 		class:flex-wrap={container.layout === 'wrap'}
 	>
 		{#each container.widgets as widget, index (widget.id + '-' + index)}
-			<Widget size={widget.size} sizeUnit={widget.sizeUnit}>
+			<Widget>
 				{#if isWidgetConfig(widget)}
 					<svelte:component this={WidgetComponents[widget.component]} {...widget.props} />
 				{:else if widget.widgets}

app/src/lib/components/widget/CpuUsageChart.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import ChartBase from "./ChartBase.svelte";
-
-    let CpuData:number[] = [1,2,3,4,5,6,7,8,9,]
-</script>
-
-
-<ChartBase data={CpuData} label="CPU usage" title="CPU usage"></ChartBase>

app/src/lib/components/widget/Selector.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let options: string[] = [];
+    export let selectedOption: string = '';
+  
+</script>
+  
+  <select bind:value={selectedOption} on:change class="select select-bordered sm:select-sm max-w-xs {$$restProps.class || ''}">
+    {#each options as option}
+      <option value={option}>{option}</option>
+    {/each}