136 lines
2.9 KiB
Svelte
136 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { updateTitle } from "../util/title";
|
|
import IconButton from "../components/utils/IconButton.svelte";
|
|
import { i18n } from "../i18n";
|
|
import { useNavigate } from "svelte-navigator";
|
|
import api from "../lib/api";
|
|
const navigate = useNavigate();
|
|
|
|
let mode: "Flat" | "DepthFirst" | "Mirror" = undefined;
|
|
|
|
async function submitOptions() {
|
|
const optionResponse = await fetch("/api/options", {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ tree_mode: mode }),
|
|
});
|
|
if (!optionResponse.ok) {
|
|
throw new Error("Failed to set options");
|
|
}
|
|
await api.refreshVault();
|
|
navigate("/");
|
|
}
|
|
|
|
updateTitle("Initial Setup");
|
|
</script>
|
|
|
|
<main>
|
|
<h1>{$i18n.t("Vault Setup")}</h1>
|
|
<section class="tree-mode">
|
|
<h2>Tree mode</h2>
|
|
<div class="icons">
|
|
<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="vertical-bottom"
|
|
outline
|
|
on:click={() => (mode = "DepthFirst")}
|
|
active={mode === "DepthFirst"}
|
|
>
|
|
Depth-First
|
|
</IconButton>
|
|
<p>
|
|
{$i18n.t(
|
|
"All groups are created as direct descendants of the root group.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
<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>
|
|
</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 {
|
|
border-radius: 1rem;
|
|
border: 1px solid var(--foreground);
|
|
background: var(--background-lighter);
|
|
margin: 4rem;
|
|
padding: 4rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4rem;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.tree-mode .icons {
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
gap: 2rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icons {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.option {
|
|
flex-basis: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
p {
|
|
font-size: initial;
|
|
text-align: center;
|
|
}
|
|
</style>
|