From 296adfee5118afc18ee4cbae73f2179ec637b053 Mon Sep 17 00:00:00 2001 From: Rune Harlyk Date: Sun, 18 Aug 2024 13:00:21 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9B=B9=EF=B8=8F=E2=80=8D=E2=99=82=EF=B8=8F?= =?UTF-8?q?=20Simplifies=20layout=20handling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/lib/components/Stream.svelte | 9 +-- .../lib/components/layout/LayoutManager.ts | 80 ------------------- app/src/lib/components/layout/Widget.svelte | 6 +- ...icLayout.svelte => WidgetContainer.svelte} | 11 +-- .../{ChartBase.svelte => ChartWidget.svelte} | 0 .../components/widget/CpuUsageChart.svelte | 8 -- app/src/lib/components/widget/Selector.svelte | 10 +++ app/src/lib/stores/application.ts | 67 ++++++++++++++++ app/src/lib/stores/fullscreen.ts | 24 ++++++ app/src/lib/stores/index.ts | 1 + app/src/routes/controller/+layout.svelte | 9 ++- app/src/routes/controller/stream/+page.svelte | 19 ----- app/src/routes/statusbar.svelte | 64 +++++++-------- 13 files changed, 142 insertions(+), 166 deletions(-) delete mode 100644 app/src/lib/components/layout/LayoutManager.ts rename app/src/lib/components/layout/{DynamicLayout.svelte => WidgetContainer.svelte} (75%) rename app/src/lib/components/widget/{ChartBase.svelte => ChartWidget.svelte} (100%) delete mode 100644 app/src/lib/components/widget/CpuUsageChart.svelte create mode 100644 app/src/lib/components/widget/Selector.svelte create mode 100644 app/src/lib/stores/application.ts create mode 100644 app/src/lib/stores/fullscreen.ts delete mode 100644 app/src/routes/controller/stream/+page.svelte diff --git a/app/src/lib/components/Stream.svelte b/app/src/lib/components/Stream.svelte index 2a9b7e2..3c4e728 100644 --- a/app/src/lib/components/Stream.svelte +++ b/app/src/lib/components/Stream.svelte @@ -1,14 +1,11 @@
diff --git a/app/src/lib/components/layout/LayoutManager.ts b/app/src/lib/components/layout/LayoutManager.ts deleted file mode 100644 index 2ce2233..0000000 --- a/app/src/lib/components/layout/LayoutManager.ts +++ /dev/null @@ -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; -} - -export interface WidgetContainerConfig { - id: string | number; - layout: 'row' | 'column' | 'wrap'; - header?: string; - size?: number; - sizeUnit?: SizeUnitEnum; - widgets: Array; -} - -export const isWidgetConfig = ( - widget: WidgetConfig | WidgetContainerConfig -): widget is WidgetConfig => 'component' in widget; - -export const WidgetComponents = { - Visualization, - Stream, - CpuUsageChart -}; - -export const phoneControllerLayout: Writable = 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 = 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); diff --git a/app/src/lib/components/layout/Widget.svelte b/app/src/lib/components/layout/Widget.svelte index 0e2bdbf..48302ff 100644 --- a/app/src/lib/components/layout/Widget.svelte +++ b/app/src/lib/components/layout/Widget.svelte @@ -1,10 +1,6 @@ -
+
diff --git a/app/src/lib/components/layout/DynamicLayout.svelte b/app/src/lib/components/layout/WidgetContainer.svelte similarity index 75% rename from app/src/lib/components/layout/DynamicLayout.svelte rename to app/src/lib/components/layout/WidgetContainer.svelte index 29089a2..3ba9dc5 100644 --- a/app/src/lib/components/layout/DynamicLayout.svelte +++ b/app/src/lib/components/layout/WidgetContainer.svelte @@ -1,18 +1,11 @@
- {#if container.header} -
- {container.header} - {container.header} -
- {/if} -
{#each container.widgets as widget, index (widget.id + '-' + index)} - + {#if isWidgetConfig(widget)} {:else if widget.widgets} diff --git a/app/src/lib/components/widget/ChartBase.svelte b/app/src/lib/components/widget/ChartWidget.svelte similarity index 100% rename from app/src/lib/components/widget/ChartBase.svelte rename to app/src/lib/components/widget/ChartWidget.svelte diff --git a/app/src/lib/components/widget/CpuUsageChart.svelte b/app/src/lib/components/widget/CpuUsageChart.svelte deleted file mode 100644 index 44a5fa8..0000000 --- a/app/src/lib/components/widget/CpuUsageChart.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - - \ No newline at end of file diff --git a/app/src/lib/components/widget/Selector.svelte b/app/src/lib/components/widget/Selector.svelte new file mode 100644 index 0000000..b5c05ef --- /dev/null +++ b/app/src/lib/components/widget/Selector.svelte @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/app/src/lib/stores/application.ts b/app/src/lib/stores/application.ts new file mode 100644 index 0000000..4fa96c4 --- /dev/null +++ b/app/src/lib/stores/application.ts @@ -0,0 +1,67 @@ +import { persistentStore } from '$lib/utilities'; +import { get, type Writable } from 'svelte/store'; + +import Visualization from '$lib/components/Visualization.svelte'; +import Stream from '$lib/components/Stream.svelte'; +import ChartWidget from '$lib/components/widget/ChartWidget.svelte'; + +export interface WidgetConfig { + id: string | number; + component: keyof typeof WidgetComponents; + props?: Record; +} + +export interface WidgetContainerConfig { + id: string | number; + layout?: 'row' | 'column' | 'wrap'; + header?: string; + widgets: Array; +} + +export const isWidgetConfig = ( + widget: WidgetConfig | WidgetContainerConfig +): widget is WidgetConfig => 'component' in widget; + +export const WidgetComponents = { + Visualization, + Stream, + ChartWidget +}; + +interface View { + name: string; + content: WidgetContainerConfig; +} + +const defaultViews: View[] = [ + { + name: 'Stream', + content: { + id: 'root', + layout: 'column', + widgets: [{ id: 2, component: 'Stream' }] + } + }, + { + name: '3D representation', + content: { + id: 'root', + layout: 'column', + widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }] + } + }, + { + name: 'Split screen', + content: { + id: 'root', + widgets: [ + { id: 2, component: 'Stream' }, + { id: 2, component: 'Visualization', props: { debug: true } } + ] + } + } +]; + +export const views: Writable = persistentStore('views', defaultViews); + +export const selectedView = persistentStore('selected_view', get(views)[0].name); diff --git a/app/src/lib/stores/fullscreen.ts b/app/src/lib/stores/fullscreen.ts new file mode 100644 index 0000000..4307250 --- /dev/null +++ b/app/src/lib/stores/fullscreen.ts @@ -0,0 +1,24 @@ +import { writable } from 'svelte/store'; + +export const isFullscreen = writable(false); + +export function toggleFullscreen() { + isFullscreen.update((state) => { + !state ? document.documentElement.requestFullscreen() : document.exitFullscreen(); + return !state; + }); +} + +export function enterFullscreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + isFullscreen.set(true); + } +} + +export function exitFullscreen() { + if (document.fullscreenElement) { + document.exitFullscreen(); + isFullscreen.set(false); + } +} diff --git a/app/src/lib/stores/index.ts b/app/src/lib/stores/index.ts index 7684643..c9e967d 100644 --- a/app/src/lib/stores/index.ts +++ b/app/src/lib/stores/index.ts @@ -2,3 +2,4 @@ export * from './socket-store'; export * from './logging-store'; export * from './model-store'; export * from './socket'; +export * from './fullscreen'; diff --git a/app/src/routes/controller/+layout.svelte b/app/src/routes/controller/+layout.svelte index 5145cd4..542342b 100644 --- a/app/src/routes/controller/+layout.svelte +++ b/app/src/routes/controller/+layout.svelte @@ -1,13 +1,14 @@
-
- +
diff --git a/app/src/routes/controller/stream/+page.svelte b/app/src/routes/controller/stream/+page.svelte deleted file mode 100644 index 760e754..0000000 --- a/app/src/routes/controller/stream/+page.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - -
- Live stream is down - Live stream is down -
diff --git a/app/src/routes/statusbar.svelte b/app/src/routes/statusbar.svelte index 95f4bc2..f67fb14 100644 --- a/app/src/routes/statusbar.svelte +++ b/app/src/routes/statusbar.svelte @@ -10,14 +10,16 @@ import RssiIndicator from '$lib/components/RSSIIndicator.svelte'; import BatteryIndicator from '$lib/components/BatteryIndicator.svelte'; import UpdateIndicator from '$lib/components/UpdateIndicator.svelte'; - import MdiWeatherSunny from '~icons/mdi/weather-sunny'; - import MdiMoonAndStars from '~icons/mdi/moon-and-stars'; - import MdiFullscreen from '~icons/mdi/fullscreen'; - import MdiFullscreenExit from '~icons/mdi/fullscreen-exit'; + import MdiWeatherSunny from '~icons/mdi/weather-sunny'; + import MdiMoonAndStars from '~icons/mdi/moon-and-stars'; + import MdiFullscreen from '~icons/mdi/fullscreen'; + import MdiFullscreenExit from '~icons/mdi/fullscreen-exit'; import { api } from '$lib/api'; - import { mode, modes } from '$lib/stores'; + import { isFullscreen, mode, modes, toggleFullscreen } from '$lib/stores'; + import Selector from '$lib/components/widget/Selector.svelte'; + import { selectedView, views } from '$lib/stores/application'; - const postSleep = async () => await api.post('/api/sleep') + const postSleep = async () => await api.post('/api/sleep'); function confirmSleep() { openModal(ConfirmDialog, { @@ -34,46 +36,38 @@ }); } - const deactivate = async () => { - mode.set(modes.indexOf('deactivated')); - } - - let isFullscreen = false; - - function toggleFullScreen() { - isFullscreen = !isFullscreen - if (!document.fullscreenElement) { - document.documentElement.requestFullscreen(); - } else if (document.exitFullscreen) { - document.exitFullscreen(); - } - } + const deactivate = async () => { + mode.set(modes.indexOf('deactivated')); + };
- -

{$page.data.title}

+ {#if $page.data.title === 'Controller'} + v.name)} /> + {:else} +

{$page.data.title}

+ {/if}
- - -
- -
+ + +
+ +
-
- -
+
+ +
{#if $telemetry.rssi.disconnected} @@ -99,5 +93,5 @@
{/if} - +