Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⛹️‍♂️ Simplifies layout handling

Browse Source
This commit is contained in:
Rune Harlyk
2024-08-18 13:00:21 +02:00
committed by Rune Harlyk
parent 00c56a2d68
commit 296adfee51
13 changed files with 142 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/routes/controller/+layout.svelte
+5 -4
View File
@@ -1,13 +1,14 @@
<script lang="ts">
import Controls from './Controls.svelte';
import WidgetContainer from '$lib/components/layout/DynamicLayout.svelte';
import { controllerLayout, phoneControllerLayout} from '$lib/components/layout/LayoutManager';
import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
import { selectedView, views } from '$lib/stores/application';
$: layout = $views.find(v => v.name === $selectedView)!
</script>
<div class="absolute top-0 select-none w-screen h-screen">
<Controls />
<!-- <button class="absolute z-20 btn" on:click={addWidget}>Add Widget</button> -->
<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
<WidgetContainer container={$controllerLayout} />
<WidgetContainer container={layout.content} />
</div>
</div>
app/src/routes/controller/stream/+page.svelte
-19
View File
@@ -1,19 +0,0 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { location } from '$lib/utilities';
let videoStream = `//${location}/api/stream`;
onDestroy(() => {
videoStream = '#';
});
</script>
<div class="w-full h-full">
<img
src={videoStream}
class="absolute object-cover blur-3xl w-full h-full -z-10"
alt="Live stream is down"
/>
<img src={videoStream} class="object-contain w-full h-full" alt="Live stream is down" />
</div>
app/src/routes/statusbar.svelte
+29 -35
View File
@@ -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'));
};
</script>
<div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
<div class="flex-1">
<!-- Page Hamburger Icon here -->
<label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button"
><Hamburger class="h-6 w-auto" /></label
>
<h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
{#if $page.data.title === 'Controller'}
<Selector bind:selectedOption={$selectedView} options={$views.map((v) => v.name)} />
{:else}
<h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
{/if}
</div>
<div class="indicator flex-none">
<UpdateIndicator />
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex-none" on:click={toggleFullScreen}>
<svelte:component this={isFullscreen ? MdiFullscreenExit : MdiFullscreen} class="h-7 w-7"/>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex-none" on:click={toggleFullscreen}>
<svelte:component this={isFullscreen ? MdiFullscreenExit : MdiFullscreen} class="h-7 w-7" />
</div>
<div class="flex-none">
<label class="swap swap-rotate">
<input type="checkbox" value="light" class="theme-controller"/>
<MdiWeatherSunny class="swap-off h-7 w-7"/>
<MdiMoonAndStars class="swap-on h-7 w-7"/>
</label>
</div>
<div class="flex-none">
<label class="swap swap-rotate">
<input type="checkbox" value="light" class="theme-controller" />
<MdiWeatherSunny class="swap-off h-7 w-7" />
<MdiMoonAndStars class="swap-on h-7 w-7" />
</label>
</div>
<div class="flex-none">
{#if $telemetry.rssi.disconnected}
<WiFiOff class="h-7 w-7" />
@@ -99,5 +93,5 @@
</button>
</div>
{/if}
<button on:click={deactivate} class="bg-error text-white btn rounded-none">STOP</button>
<button on:click={deactivate} class="bg-error text-white btn rounded-none">STOP</button>
</div>