Daniel Dietzler
72 lines
2.7 KiB
Svelte
72 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { run } from 'svelte/legacy';
|
|
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
|
|
import OnboardingPrivacy from '$lib/components/onboarding-page/onboarding-privacy.svelte';
|
|
import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
|
|
import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
|
|
import { AppRoute, QueryParameter } from '$lib/constants';
|
|
import { retrieveServerConfig } from '$lib/stores/server-config.store';
|
|
import { updateAdminOnboarding } from '@immich/sdk';
|
|
|
|
let index = $state(0);
|
|
|
|
interface OnboardingStep {
|
|
name: string;
|
|
component:
|
|
| typeof OnboardingHello
|
|
| typeof OnboardingTheme
|
|
| typeof OnboadingStorageTemplate
|
|
| typeof OnboardingPrivacy;
|
|
}
|
|
|
|
const onboardingSteps: OnboardingStep[] = [
|
|
{ name: 'hello', component: OnboardingHello },
|
|
{ name: 'theme', component: OnboardingTheme },
|
|
{ name: 'privacy', component: OnboardingPrivacy },
|
|
{ name: 'storage', component: OnboadingStorageTemplate },
|
|
];
|
|
|
|
run(() => {
|
|
const stepState = $page.url.searchParams.get('step');
|
|
const temporaryIndex = onboardingSteps.findIndex((step) => step.name === stepState);
|
|
index = temporaryIndex === -1 ? 0 : temporaryIndex;
|
|
});
|
|
|
|
const handleDoneClicked = async () => {
|
|
if (index >= onboardingSteps.length - 1) {
|
|
await updateAdminOnboarding({ adminOnboardingUpdateDto: { isOnboarded: true } });
|
|
await retrieveServerConfig();
|
|
await goto(AppRoute.PHOTOS);
|
|
} else {
|
|
index++;
|
|
await goto(`${AppRoute.AUTH_ONBOARDING}?${QueryParameter.ONBOARDING_STEP}=${onboardingSteps[index].name}`);
|
|
}
|
|
};
|
|
|
|
const handlePrevious = async () => {
|
|
if (index >= 1) {
|
|
index--;
|
|
await goto(`${AppRoute.AUTH_ONBOARDING}?${QueryParameter.ONBOARDING_STEP}=${onboardingSteps[index].name}`);
|
|
}
|
|
};
|
|
|
|
const SvelteComponent = $derived(onboardingSteps[index].component);
|
|
</script>
|
|
|
|
<section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
|
|
<div class="flex flex-col w-full">
|
|
<div class="w-full bg-gray-300 dark:bg-gray-600 rounded-md h-2">
|
|
<div
|
|
class="progress-bar bg-immich-primary dark:bg-immich-dark-primary h-2 rounded-md transition-all duration-200 ease-out"
|
|
style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
|
|
></div>
|
|
</div>
|
|
<div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
|
|
<SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} />
|
|
</div>
|
|
</div>
|
|
</section>
|