+
- {#if container.header}
-
- {/if}
-
{#each container.widgets as widget, index (widget.id + '-' + index)}
-
+
{#if isWidgetConfig(widget)}
;
+}
+
+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/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'));
+ };