skrivert/src/components/import/import.svelte

90 lines
3.1 KiB
Svelte

<script lang="ts">
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { importState } from '$lib/stores.svelte';
import * as Card from '$lib/components/ui/card/index.js';
import { Input } from '$lib/components/ui/input';
import * as Select from '$lib/components/ui/select';
import { Label } from '$lib/components/ui/label';
import Button from '$lib/components/ui/button/button.svelte';
import { Switch } from '$lib/components/ui/switch/index.js';
import { Progress } from '$lib/components/ui/progress';
import { Badge } from '$lib/components/ui/badge';
import { Separator } from '$lib/components/ui/separator';
import SuperDebug from 'sveltekit-superforms';
import default_shortforms from '../../db/shortforms.se.json';
import { importDefaultShortforms, importShortforms } from '../../db/import';
import { createShortformList, type List } from '../../db/main';
$: form = {
textarea: '',
name: '',
type: false
};
let importing = false;
let progress = 0;
const handleImport = () => {
importing = true;
const l: List = { name: form.name, type: form.type ? 1 : 0, updated: new Date() };
createShortformList(l);
form.textarea.split('\n').forEach((sf, i, sfs) => {
progress = 100 * (i / sfs.length);
if (Math.random() > 0.8) {
setTimeout(() => {}, 125);
}
});
};
const cancelImport = () => {
importState.data = '';
importState.errors = [];
goto('/');
};
const importDefaultList = () => {
importState.data = '';
importState.errors = [];
default_shortforms.shortforms.forEach((sf) => {
importState.data += sf.sf + '=' + sf.p + '\n';
});
};
onMount(() => {
form.textarea = importState.data;
});
</script>
<Card.Root class="w-[490px]">
<Card.Header>
<Card.Title>Importera förkortningar</Card.Title>
<Card.Description>Nån annan hjälptext.</Card.Description>
</Card.Header>
<Card.Content>
<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data">
<div class="grid grid-cols-4 items-center gap-4">
<Label>Förkortningar</Label>
<textarea
class="block w-[290px] rounded-lg border border-gray-200 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
bind:value={form.textarea}
placeholder="Skriv/klistra in dina förkortingar i formatet
förk=förkortning
förkr=förkortningar
förkn=förkortningen
..."
rows="5"
></textarea>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Namn</Label>
<Input bind:value={form.name} placeholder="Döp förkortningslistan" class="w-[290px]" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Prioritera lista</Label>
<Switch bind:checked={form.type} />
</div>
<p class="leading-7 [&:not(:first-child)]:mt-2">{importState.errors}</p>
</form>
</Card.Content>
<Card.Footer class="flex justify-between">
<Button on:click={cancelImport} variant="outline">Avbryt</Button>
<Button on:click={handleImport}>Importera</Button>
</Card.Footer>
</Card.Root>