121 lines
2.4 KiB
Svelte
121 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { updateTitle } from '$lib/util/title';
|
|
import IconButton from '$lib/components/utils/IconButton.svelte';
|
|
import { i18n } from '$lib/i18n';
|
|
import api from '$lib/api';
|
|
import type { VaultBlobMode } from '@upnd/upend/api';
|
|
import { onMount } from 'svelte';
|
|
import { goto } from '$app/navigation';
|
|
|
|
let mode: VaultBlobMode | undefined = undefined;
|
|
|
|
async function submitOptions() {
|
|
if (!mode) return;
|
|
await api.setVaultOptions({ blob_mode: mode });
|
|
await api.refreshVault();
|
|
goto('/');
|
|
}
|
|
|
|
onMount(async () => {
|
|
const options = await api.getVaultOptions();
|
|
mode = options.blob_mode;
|
|
});
|
|
|
|
updateTitle('Initial Setup');
|
|
</script>
|
|
|
|
<main>
|
|
<h1>{$i18n.t('Vault Setup')}</h1>
|
|
<section class="tree-mode">
|
|
<h2>Scan mode</h2>
|
|
<div class="icons">
|
|
<div class="option">
|
|
<IconButton
|
|
name="copy-alt"
|
|
outline
|
|
on:click={() => (mode = 'Mirror')}
|
|
active={mode === 'Mirror'}
|
|
>
|
|
Mirror
|
|
</IconButton>
|
|
<p>
|
|
{$i18n.t('Groups are nested reflecting the original file directory structure.')}
|
|
</p>
|
|
</div>
|
|
<div class="option">
|
|
<IconButton
|
|
name="checkbox-minus"
|
|
outline
|
|
on:click={() => (mode = 'Flat')}
|
|
active={mode === 'Flat'}
|
|
>
|
|
Flat
|
|
</IconButton>
|
|
<p>
|
|
{$i18n.t('All groups are created as direct descendants of the root group.')}
|
|
</p>
|
|
</div>
|
|
<div class="option">
|
|
<IconButton
|
|
name="download"
|
|
outline
|
|
on:click={() => (mode = 'Incoming')}
|
|
active={mode === 'Incoming'}
|
|
>
|
|
Incoming
|
|
</IconButton>
|
|
<p>
|
|
{$i18n.t("New files are added to a group called 'Incoming'.")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="icons">
|
|
<IconButton name="log-in" outline disabled={!mode} on:click={() => submitOptions()}>
|
|
{$i18n.t('Confirm and start scan')}
|
|
</IconButton>
|
|
</section>
|
|
</main>
|
|
|
|
<style lang="scss">
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 4rem;
|
|
padding: 4rem;
|
|
gap: 4rem;
|
|
border: 1px solid var(--foreground);
|
|
border-radius: 1rem;
|
|
background: var(--background-lighter);
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree-mode .icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.icons {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.option {
|
|
display: flex;
|
|
flex-basis: 33%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
p {
|
|
font-size: initial;
|
|
text-align: center;
|
|
}
|
|
</style>
|