WIP form

1 files changed, 57 insertions, 31 deletions

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 26db3e4..7b0a495 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -1,54 +1,80 @@
 <script lang="ts">
     import Button from "$lib/ui/button.svelte";
-    import { clear_auth_session, get_transactions, init_auth_session } from "./sb1.remote";
+    import { clear_auth_session, init_auth_session } from "./sb1.remote";
     import type { PageProps } from "./$types";
+    import { Temporal } from "temporal-polyfill";
+    import { instantAsHtmlInputValueString } from "$lib/helpers";
 
-    let navigating = $state(false);
     let { data }: PageProps = $props();
+    let navigating = $state(false);
+    let form = $state({
+        budgetId: "",
+        mappings: [] as Array<{ sb1: string; actual: string }>,
+        delta: instantAsHtmlInputValueString(Temporal.Now.instant().subtract("PT24H")),
+        dry: true,
+    });
+    async function run() {}
 
     async function authorize() {
         navigating = true;
         const url = await init_auth_session();
         location.href = url;
-        navigating = false;
     }
 
     async function logout() {
+        navigating = true;
         await clear_auth_session();
+        location.reload();
+    }
+
+    function mappingChanged(sb1: string, actual: string) {
+        let mappings = form.mappings;
+        if (mappings.find((c) => c.sb1 === sb1)) mappings = mappings.filter((c) => c.sb1 !== sb1);
+        mappings.push({ sb1, actual });
+        form.mappings = mappings;
     }
+
+    $inspect(form);
 </script>
 
 <main>
     {#if data.sb1.accounts?.length}
-        <ul>
-            {#each data.sb1.accounts as account}
-                <li>{account.name}</li>
-                {#if (await get_transactions(account.key))?.length}
-                    <ul>
-                        {#each await get_transactions(account.key) as transaction}
-                            <li>{JSON.stringify(transaction)}</li>
-                        {/each}
-                    </ul>
-                {:else}
-                    <small>Ingen transaksjoner</small>
-                {/if}
-            {/each}
-        </ul>
-        <Button onclick={logout}>Logg ut</Button>
+        <form onsubmit={run}>
+            <h3>Importer</h3>
+            <fieldset>
+                <h4>Budsjett</h4>
+                {#each data.actual.budgets as budget}
+                    {@const id = `budget-${budget.id}`}
+                    <input name="budget" {id} value={budget.id} type="radio" bind:group={form.budgetId} />
+                    <label for={id}>{budget.name}({budget.id})</label><br />
+                {/each}
+                <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) => mappingChanged(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>
+                <label for="delta">Importer transaksjoner siden</label>
+                <input type="date" id="delta" bind:value={form.delta} /><br />
+                <input type="checkbox" id="dry" bind:checked={form.dry} /><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>
     {:else}
         <Button onclick={authorize} loading={navigating}>Autentisér hos Sparebanken 1</Button>
     {/if}
-
-    {#if data.actual.meta}
-        <pre>{JSON.stringify(data.actual.meta, null, 2)}</pre>
-    {/if}
 </main>
-
-<style>
-    main {
-        display: flex;
-        justify-content: center;
-        width: 100%;
-        height: 90vh;
-    }
-</style>