Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): migrate routes and app shell to controller-driven state

Browse Source
This commit is contained in:
Matiss Jurevics
2026-03-02 14:15:00 +00:00
parent 13e77294be
commit 531e77d900
8 changed files with 660 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
WebApp/src/routes/onboarding/+page.svelte
View File

@@ -1,8 +1,76 @@
<script lang="ts">
import OnboardingScreen from '$lib/sim/screens/OnboardingScreen.svelte';
// @ts-nocheck
import AppChrome from '$lib/sim/ui/AppChrome.svelte';
import { appController } from '$lib/app/controller';
import { appState } from '$lib/app/store';
</script>
<AppChrome pageKey="onboarding">
<OnboardingScreen />
<section id="screen-onboarding" class="flex flex-col items-center justify-center min-h-[70vh] max-w-lg mx-auto">
<div class="text-center space-y-2 mb-8">
<h2 class="text-3xl font-bold text-white tracking-tight">Configure Device</h2>
<p class="text-sm text-gray-400">Set up this browser dashboard role</p>
</div>
<div class="w-full glass-card p-6 md:p-8 rounded-3xl space-y-6 shadow-2xl">
<div class="form-control w-full">
<label class="label" for="deviceName"
><span class="label-text text-xs font-semibold text-gray-400 tracking-wider">DEVICE NAME</span></label
>
<input
id="deviceName"
type="text"
placeholder="e.g. Living Room Cam"
class="input input-bordered h-12 rounded-xl bg-black/40 border-white/10 focus:border-blue-500"
value={$appState.onboardingForm.name}
oninput={(event) => appController.setOnboardingField('name', (event.currentTarget as HTMLInputElement).value)}
/>
</div>
<div class="form-control w-full">
<label class="label" for="role"
><span class="label-text text-xs font-semibold text-gray-400 tracking-wider">ROLE</span></label
>
<div class="grid grid-cols-2 gap-2 p-1.5 bg-black/40 rounded-xl border border-white/5">
<button
class="btn btn-ghost normal-case rounded-lg h-10 min-h-0 {$appState.onboardingForm.role === 'camera' ? 'bg-blue-600 text-white' : 'text-gray-400'}"
id="btn-role-camera"
onclick={() => appController.selectRole('camera')}
>
Camera
</button>
<button
class="btn btn-ghost normal-case rounded-lg h-10 min-h-0 {$appState.onboardingForm.role === 'client' ? 'bg-blue-600 text-white' : 'text-gray-400'}"
id="btn-role-client"
onclick={() => appController.selectRole('client')}
>
Client
</button>
</div>
</div>
<div class="form-control w-full">
<label class="label" for="pushToken"
><span class="label-text text-xs font-semibold text-gray-400 tracking-wider">PUSH TOKEN (OPTIONAL)</span></label
>
<input
id="pushToken"
type="text"
placeholder="simulated_token_123"
class="input input-bordered h-12 rounded-xl bg-black/40 border-white/10 focus:border-blue-500"
value={$appState.onboardingForm.pushToken}
oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
/>
</div>
<div class="pt-6">
<button id="registerBtn" class="btn btn-premium w-full h-12 rounded-xl text-base" onclick={() => appController.registerDevice()}>
Complete Setup
</button>
<button id="loadSavedBtn" class="btn btn-ghost w-full mt-3 text-gray-500 hover:text-white hover:bg-white/5" onclick={() => appController.loadSavedDevice()}>
Load previously saved device
</button>
</div>
</div>
</section>
</AppChrome>