app/src/routes/+page.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<script lang="ts">
    import Button from "$lib/ui/button.svelte";
    import {
        clear_auth_session,
        init_auth_session,
        do_import,
    } from "./methods.remote";
    import type { PageProps } from "./$types";
    import type { ImportForm } from "$lib/shared";

    let { data }: PageProps = $props();
    let navigating = $state(false);
    let form = $state<ImportForm>({
        budgetId: "",
        mappings: [],
        dryRun: true,
    });

    async function run(e: SubmitEvent) {
        e.preventDefault();
        if (!form.mappings.length) {
            return;
        }
        await do_import(form);
    }

    async function authorize() {
        navigating = true;
        location.href = await init_auth_session();
    }

    async function logout() {
        navigating = true;
        await clear_auth_session();
        location.reload();
    }

    function onMappingChanged(sb1Id: string, actualId: string) {
        let mappings = form.mappings;
        if (mappings.find((c) => c.sb1Id === sb1Id))
            mappings = mappings.filter((c) => c.sb1Id !== sb1Id);
        mappings.push({ sb1Id, actualId });
        form.mappings = mappings;
    }
</script>

<main>
    {#if data.sb1.accounts?.length}
        <form onsubmit={run}>
            <h3>Importer</h3>
            <fieldset>
                <h4>Kontoer</h4>
                {#each data.sb1.accounts as account}
                    {@const actualId = `mapping-${account.key}-actual`}
                    <div>
                        <code>{account.name}</code>
                        <span>&#8594;</span>
                        <label for={actualId}>Actual</label>
                        <select
                            name={actualId}
                            id={actualId}
                            onchange={(e) =>
                                onMappingChanged(
                                    account.key,
                                    e.currentTarget.value,
                                )}
                        >
                            <option value="-" selected>-</option>
                            {#each data.actual.accounts as actual}
                                <option value={actual.id}>
                                    {actual.name}
                                </option>
                            {/each}
                        </select>
                    </div>
                {/each}
                <h4>Ellers</h4>
                <input
                    type="checkbox"
                    id="dry"
                    bind:checked={form.dryRun}
                /><label for="dry">Tørrkjøring</label><br /><br />
                <input type="submit" />
            </fieldset>
        </form>
        <h3>Annet</h3>
        <Button onclick={logout} loading={navigating}>Logg ut</Button>
        <div></div>
    {:else}
        <Button onclick={authorize} loading={navigating}
            >Autentisér hos Sparebanken 1</Button
        >
    {/if}
</main>