skrivert/src/components/import/import.svelte

82 lines
3.1 KiB
Svelte

<script lang="ts">
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 errors = '...';
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 importDefaultList = () => {
default_shortforms.shortforms.forEach((sf) => {
form.textarea += sf.sf + '=' + sf.p + '\n';
});
};
</script>
<p class="leading-7 [&:not(:first-child)]:mt-6">
Skrivert kan bara importera och exportera förkortningslistor i läsbart textformat.<br />
Det finns ett verktyg för att konvertera listor och export-filer mellan olika format här: <br />
<a href="https://qwertyist.se/tools/shortforms/" target="_blank"
><Badge>qwertyist.se/förkortingar/</Badge></a
>
</p>
<Separator class="my-4" />
<p class="leading-7 [&:not(:first-child)]:mt-6">
Vill du inte importera en egen lista så kan du använda programmets baslista som i den här
versionen av programmet har {default_shortforms.shortforms.length} förkortningar.<br />
<a href="#" on:click={importDefaultList}><Badge>Importera baslista</Badge></a>
</p>
<Separator class="my-4" />
<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] w-full 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">{errors}</p>
<Button on:click={handleImport}>Importera</Button>
</form>
{#if importing}<Progress value={progress} />{/if}