implemented display of document positions

frontend/src/routes/document/Position.svelte

@@ -0,0 +1,26 @@
+<script>
+    import { useTinyRouter } from 'svelte-tiny-router';
+    import { onMount } from 'svelte';
+    import { t } from '../../translations.svelte.js';
+
+    var { currency, pos = $bindable(null) } = $props();
+
+    console.log(pos);
+</script>
+{#if pos}
+    <tr>
+        <td>{pos.number}</td>
+        <td>{pos.item}</td>
+        <td>{pos.title}</td>
+        <td>{pos.amount}</td>
+        <td>{pos.unit}</td>
+        <td>{pos.unit_price/100}&nbsp;{currency}</td>
+        <td>{pos.net_price/100}&nbsp;{currency}</td>
+        <td>{pos.tax}&nbsp;%</td>
+    </tr>
+    <tr>
+        <td class="error">buttons</td>
+        <td colspan="6">{@html pos.description}</td>
+        <td></td>
+    </tr>
+{/if}

frontend/src/routes/document/PositionList.svelte

@@ -0,0 +1,29 @@
+<script>
+    import Position from './Position.svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
+    import { onMount } from 'svelte';
+    import { t } from '../../translations.svelte.js';
+
+    var { document = $bindable(null) } = $props();
+</script>
+{#if document.positions}
+<table>
+    <thead>
+        <tr>
+            <th>{t('document.pos')}</th>
+            <th>{t('document.code')}</th>
+            <th>{t('document.title_or_desc')}</th>
+            <th>{t('document.amount')}</th>
+            <th>{t('document.unit')}</th>
+            <th>{t('document.unit_price')}</th>
+            <th>{t('document.net_price')}</th>
+            <th>{t('document.tax_rate')}</th>
+        </tr>
+    </thead>
+    <tbody>
+    {#each Object.entries(document.positions) as [id,pos]}
+    <Position currency={document.currency} bind:pos={document.positions[id]} />
+    {/each}
+    </tbody>
+</table>
+{/if}

frontend/src/routes/document/TemplateSelector.svelte

@@ -0,0 +1,35 @@
+<script>
+    import {onMount} from 'svelte';
+    import {t} from '../../translations.svelte.js';
+    let { caption, company, value = $bindable(0), onchange = () => console.log('changed')} = $props();
+    let message = t('document.loading');
+    let templates = $state(null);
+
+    async function loadTemplates(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/templates`;
+        var resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: JSON.stringify({company:company})
+        });
+        if (resp.ok){
+            templates = await resp.json();
+        } else {
+            message = await resp.text();
+        }
+    }
+
+    onMount(loadTemplates)
+</script>
+
+{#if templates}
+<select bind:value onchange={onchange}>
+    <option value={0}>{caption}</option>
+    {#each Object.entries(templates) as [id,template]}
+    <option value={template.id}>{template.name}</option>
+    {/each}
+</select>
+{:else}
+<span>{message}</span>
+{/if}
+

frontend/src/routes/document/View.svelte

@@ -2,7 +2,9 @@
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
     import { useTinyRouter } from 'svelte-tiny-router';
+    import PositionList from './PositionList.svelte';
     import StateSelector from './StateSelector.svelte';
+    import TemplateSelector from './TemplateSelector.svelte';
     let { id } = $props();
     let error = null;
     let doc = $state(null);
@@ -80,19 +82,19 @@
         <div>{t('document.state')}: <StateSelector selected={doc.state} onchange={changeState} /></div>
         <div>{t('document.date')}: {doc.date}</div>
         <div>{t('document.delivery')}: {doc.delivery}</div>
-        <div>{t('document.template')}: {doc.template.name} <span class="error">SElektor hier!</span></div>
+        <div>{t('document.template')}: <TemplateSelector company={doc.company.id} bind:value={doc.template.id} /></div>
     </fieldset>
     <fieldset class="clear">
         <legend>{t('document.head')}</legend>
-        {doc.head}
+        {@html doc.head}
     </fieldset>
     <fieldset>
         <legend>{t('document.positions')}</legend>
-        <span class="error">laden!</span>
+        <PositionList bind:document={doc} />
     </fieldset>
     <fieldset>
         <legend>{t('document.footer')}</legend>
-        {doc.footer}
+        {@html doc.footer}
     </fieldset>
     <fieldset>
         <legend>{t('document.actions')}</legend>