From 631a527a5d997cf6a81e3263b00092657817184c Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Wed, 30 Jul 2025 09:03:47 +0200
Subject: [PATCH] code cleanup

---
 .../src/Components/CompanySelector.svelte     |  1 +
 frontend/src/Components/EstimatedTask.svelte  |  5 +-
 frontend/src/Components/MarkdownEditor.svelte |  4 +-
 .../src/Components/PermissionSelector.svelte  |  8 +--
 frontend/src/Components/PriceEditor.svelte    |  2 +-
 frontend/src/routes/document/Add.svelte       | 16 ++---
 .../src/routes/document/EstimateList.svelte   | 25 ++++---
 frontend/src/routes/document/ItemList.svelte  | 25 ++++---
 frontend/src/routes/document/List.svelte      | 29 ++++----
 frontend/src/routes/document/Position.svelte  | 19 +++--
 .../src/routes/document/PositionList.svelte   | 35 +++++----
 .../routes/document/PositionSelector.svelte   | 67 +++++++++--------
 frontend/src/routes/document/Send.svelte      | 39 +++++-----
 .../src/routes/document/StateSelector.svelte  | 19 +++--
 .../routes/document/TemplateSelector.svelte   | 25 ++++---
 frontend/src/routes/document/TimeList.svelte  | 31 ++++----
 .../src/routes/document/TypeSelector.svelte   | 16 +++--
 frontend/src/routes/document/View.svelte      | 71 ++++++++++---------
 18 files changed, 255 insertions(+), 182 deletions(-)

diff --git a/frontend/src/Components/CompanySelector.svelte b/frontend/src/Components/CompanySelector.svelte
index 46e1bd9..bc2938d 100644
--- a/frontend/src/Components/CompanySelector.svelte
+++ b/frontend/src/Components/CompanySelector.svelte
@@ -1,5 +1,6 @@
 <script>
     import {onMount} from 'svelte';
+
     import { api }   from '../urls.svelte.js';
     import {t}       from '../translations.svelte.js';
 
diff --git a/frontend/src/Components/EstimatedTask.svelte b/frontend/src/Components/EstimatedTask.svelte
index 8465dbd..7853960 100644
--- a/frontend/src/Components/EstimatedTask.svelte
+++ b/frontend/src/Components/EstimatedTask.svelte
@@ -1,7 +1,10 @@
 <script>
     import {t} from '../translations.svelte.js';
 
-    let { task, onSelect = (task) => {} } = $props();
+    let {
+        task,
+        onSelect = (task) => {}
+    } = $props();
 </script>
 
 <div>
diff --git a/frontend/src/Components/MarkdownEditor.svelte b/frontend/src/Components/MarkdownEditor.svelte
index abf3188..d73d5da 100644
--- a/frontend/src/Components/MarkdownEditor.svelte
+++ b/frontend/src/Components/MarkdownEditor.svelte
@@ -40,8 +40,8 @@
         const url  = api('markdown/render');
         const resp = await fetch(url,{
             credentials: 'include',
-            method: 'POST',
-            body: editValue.source
+            method     : 'POST',
+            body       : editValue.source
         });
         editValue.rendered = await resp.text();
     }
diff --git a/frontend/src/Components/PermissionSelector.svelte b/frontend/src/Components/PermissionSelector.svelte
index 5dafa73..117aca6 100644
--- a/frontend/src/Components/PermissionSelector.svelte
+++ b/frontend/src/Components/PermissionSelector.svelte
@@ -3,9 +3,9 @@
     import {t}       from '../translations.svelte.js';
 
     let {
-        caption  = t('select_permission'),
-        selected = $bindable(0),
-        onchange = (val) => console.log('changed to',val),
+        caption     = t('select_permission'),
+        selected    = $bindable(0),
+        onchange    = (val) => console.log('changed to',val),
         permissions = null
     } = $props();
 
@@ -24,4 +24,4 @@
 </select>
 {:else}
 <span>{message}</span>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/frontend/src/Components/PriceEditor.svelte b/frontend/src/Components/PriceEditor.svelte
index e55c8ff..89f07a2 100644
--- a/frontend/src/Components/PriceEditor.svelte
+++ b/frontend/src/Components/PriceEditor.svelte
@@ -38,7 +38,7 @@
 <style>
     input{width:100px}
     div{
-        min-width: 40px;
+        min-width:  40px;
         min-height: 20px;
     }
     .editable:hover{
diff --git a/frontend/src/routes/document/Add.svelte b/frontend/src/routes/document/Add.svelte
index baf7364..2477799 100644
--- a/frontend/src/routes/document/Add.svelte
+++ b/frontend/src/routes/document/Add.svelte
@@ -9,8 +9,8 @@
 
     let company = $state(null);
     let docType = $state(null);
-    let error = $state(null);
-    let router = useTinyRouter();
+    let error   = $state(null);
+    let router  = useTinyRouter();
 
     let document = $state({
         type : +router.query.document_type,
@@ -18,7 +18,7 @@
             name : ''
         },
         sender : {
-            name : 'sender',
+            name    : 'sender',
             company : +router.query.company_id
         }
     });
@@ -45,7 +45,7 @@
         const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             const types = await resp.json();
-            docType = t('type_'+types[document.type]);
+            docType     = t('type_'+types[document.type]);
         } else {
             error = await resp.text();
         }
@@ -60,7 +60,7 @@
         var addr = '';
         if (contact.ORG) addr += contact.ORG.trim()+"\n";
         if (contact.N) {
-            var name = (contact.N.given+" "+contact.N.family).trim()+"\n";
+            var name  = (contact.N.given+" "+contact.N.family).trim()+"\n";
             if (name != addr) addr += name;
         }
         if (contact.ADR.street)   addr += contact.ADR.street+"\n";
@@ -75,9 +75,9 @@
     async function submit(){
         const url = api('document');
         const resp = await fetch(url,{
-            method: 'POST',
+            method     : 'POST',
             credentials: 'include',
-            body: JSON.stringify(document)
+            body       : JSON.stringify(document)
         });
         if (resp.ok){
             const json = await resp.json();
@@ -144,4 +144,4 @@
         </label>
     </fieldset>
     <button onclick={submit}>{t('create_new_document')}</button>
-</fieldset>
\ No newline at end of file
+</fieldset>
diff --git a/frontend/src/routes/document/EstimateList.svelte b/frontend/src/routes/document/EstimateList.svelte
index b3a2c29..e669953 100644
--- a/frontend/src/routes/document/EstimateList.svelte
+++ b/frontend/src/routes/document/EstimateList.svelte
@@ -1,19 +1,26 @@
 <script>
-    import { t } from '../../translations.svelte.js';
     import { onMount } from 'svelte';
+
+    import { api }     from '../../urls.svelte.js';
+    import { t }       from '../../translations.svelte.js';
+
     import EstimatedTask from '../../Components/EstimatedTask.svelte';
-    let { company_id, onSelect = (task) => {} } = $props();
 
+    let {
+        company_id,
+        onSelect = (task) => {}
+    } = $props();
+
+    let error    = $state(null);
     let projects = $state(null);
-    let error = $state(null);
 
     async function loadItems(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/estimated_times`;
-        let data = { company_id: company_id };
+        const url  = api('task/estimated_times');
+        let data   = { company_id: company_id };
         const resp = await fetch(url,{
-            credentials:'include',
-            method: 'POST',
-            body: JSON.stringify(data)
+            credentials: 'include',
+            method     : 'POST',
+            body       : JSON.stringify(data)
         });
         if (resp.ok){
             projects = await resp.json();
@@ -53,4 +60,4 @@
     </fieldset>
     {/each}
     {/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/routes/document/ItemList.svelte b/frontend/src/routes/document/ItemList.svelte
index 519cbec..9f3e27c 100644
--- a/frontend/src/routes/document/ItemList.svelte
+++ b/frontend/src/routes/document/ItemList.svelte
@@ -1,20 +1,27 @@
 <script>
-    import { t } from '../../translations.svelte.js';
     import { onMount } from 'svelte';
-    import Item from '../../Components/Item.svelte';
-    let { company_id, onSelect = (item) => {} } = $props();
+
+    import { api }     from '../../urls.svelte.js';
+    import { t }       from '../../translations.svelte.js';
+
+    import Item        from '../../Components/Item.svelte';
+
+    let {
+        company_id,
+        onSelect = (item) => {}
+    } = $props();
 
     let items = $state(null);
     let error = $state(null);
 
 
     async function loadItems(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/items/list`;
-        let data = { company_id: company_id };
+        const url  = api('items/list');
+        let data   = { company_id: company_id };
         const resp = await fetch(url,{
-            credentials:'include',
-            method: 'POST',
-            body: JSON.stringify(data)
+            credentials: 'include',
+            method     : 'POST',
+            body       : JSON.stringify(data)
         });
         if (resp.ok){
             items = await resp.json();
@@ -37,4 +44,4 @@
     <Item item={item} onclick={() => onSelect(item)} />
     {/each}
     {/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/routes/document/List.svelte b/frontend/src/routes/document/List.svelte
index 2d3df2c..8355899 100644
--- a/frontend/src/routes/document/List.svelte
+++ b/frontend/src/routes/document/List.svelte
@@ -1,21 +1,24 @@
 <script>
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { onMount } from 'svelte';
-    import { t } from '../../translations.svelte.js';
-    import TypeSelector from './TypeSelector.svelte';
 
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
 
+    import TypeSelector      from './TypeSelector.svelte';
 
-    let error = null;
-    let companies = {};
-    let documents = null;
+
+
+    let error           = null;
+    let companies       = {};
+    let company_id      = +router.query.company_id;
+    let documents       = null;
+    let router          = useTinyRouter();
+    let docType         = 0;
     let selected_company = null;
-    let router = useTinyRouter();
-    let company_id = +router.query.company_id;
-    let docType = 0;
 
     async function loadCompanies(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
+        const url = api('company/list');
         const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             companies = await resp.json();
@@ -37,7 +40,7 @@
     async function load(company){
         router.navigate(`/document?company_id=${company.id}`);
         selected_company = company;
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/list`;
+        const url = api('document/list');
         const resp = await fetch(url,{
             credentials: 'include',
             method: 'POST',
@@ -60,7 +63,7 @@
 
     async function deleteDoc(ev,doc){
         if (confirm(t('really_delete',doc.number))){
-            const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}`;
+            const url  = api(`document/${doc.id}`;
             const resp = await fetch(url,{
                 credentials: 'include',
                 method: 'DELETE'
@@ -122,4 +125,4 @@
         </tbody>
     </table>
     {/if}
-</fieldset>
\ No newline at end of file
+</fieldset>
diff --git a/frontend/src/routes/document/Position.svelte b/frontend/src/routes/document/Position.svelte
index 71678e6..e746422 100644
--- a/frontend/src/routes/document/Position.svelte
+++ b/frontend/src/routes/document/Position.svelte
@@ -1,10 +1,19 @@
 <script>
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { onMount } from 'svelte';
-    import LineEditor from '../../Components/LineEditor.svelte';
-    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
-    import PriceEditor from '../../Components/PriceEditor.svelte';
-    var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {}, movePos = (number,step) => {}, drop = (number) => {} } = $props();
+
+    import LineEditor        from '../../Components/LineEditor.svelte';
+    import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
+    import PriceEditor       from '../../Components/PriceEditor.svelte';
+
+    var {
+        currency,
+        drop = (number) => {},
+        editable,
+        movePos = (number,step) => {},
+        pos     = $bindable(null),
+        submit  = (key,newVal) => {}
+    } = $props();
     let prefix = `pos.${pos.number}`
 
     function moveup(){
diff --git a/frontend/src/routes/document/PositionList.svelte b/frontend/src/routes/document/PositionList.svelte
index bdc7765..521424b 100644
--- a/frontend/src/routes/document/PositionList.svelte
+++ b/frontend/src/routes/document/PositionList.svelte
@@ -1,26 +1,33 @@
 <script>
-    import Position from './Position.svelte';
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { onMount } from 'svelte';
-    import { t } from '../../translations.svelte.js';
 
-    var { document = $bindable(null), submit = (key,newVal) => {}, error = $bindable(null) } = $props();
+    import { api  }          from '../../urls.svelte-js';
+    import { t }             from '../../translations.svelte.js';
+
+    import Position          from './Position.svelte';
+
+    var {
+        document = $bindable(null),
+        error = $bindable(null)
+        submit = (key,newVal) => {},
+    } = $props();
 
     let editable = $derived(document.state == 1);
 
     async function updatePositions(resp){
-        let json = await resp.json();
+        let json           = await resp.json();
         document.positions = {};
+        error              = null;
         setTimeout(() => document.positions = json,100)
-        error = null;
     }
 
     async function movePos(number,step){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
+        const url = api(`document/${document.id}/position`;
         const resp = await fetch(url,{
-            method: 'PATCH',
-            credentials:'include',
-            body:JSON.stringify({position:number,move:step})
+            method     : 'PATCH',
+            credentials: 'include',
+            body       : JSON.stringify({position:number,move:step})
         });
         if (resp.ok){
             updatePositions(resp);
@@ -32,11 +39,11 @@
     async function drop(number){
         let confirmed = confirm(t('confirm_deletion').replace('{pos}',document.positions[number].item));
         if (!confirmed) return;
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${document.id}/position`;
+        const url = api(`document/${document.id}/position`;
         const resp = await fetch(url,{
-            method: 'DELETE',
-            credentials:'include',
-            body:JSON.stringify({position:number})
+            method     : 'DELETE',
+            credentials: 'include',
+            body       : JSON.stringify({position:number})
         });
         if (resp.ok){
             updatePositions(resp);
diff --git a/frontend/src/routes/document/PositionSelector.svelte b/frontend/src/routes/document/PositionSelector.svelte
index ada8fd6..b14a954 100644
--- a/frontend/src/routes/document/PositionSelector.svelte
+++ b/frontend/src/routes/document/PositionSelector.svelte
@@ -1,10 +1,15 @@
 <script>
-    import { t } from '../../translations.svelte.js';
+    import { t }        from '../../translations.svelte.js';
+
     import EstimateList from './EstimateList.svelte';
-    import ItemList from './ItemList.svelte';
-    import TimeList from './TimeList.svelte';
+    import ItemList     from './ItemList.svelte';
+    import TimeList     from './TimeList.svelte';
 
-    let { close = () => {}, doc = $bindable({}), onSelect = (item) => {} } = $props();
+    let {
+        close = () => {},
+        doc = $bindable({}),
+        onSelect = (item) => {}
+    } = $props();
 
     let source = $state(0);
 
@@ -15,52 +20,52 @@
 
     function estimateSelected(estimate){
         select({
-            item_code:t('estimated_time'),
-            title:estimate.name,
-            description:estimate.description.source,
-            amount:estimate.estimated_time,
-            unit:t('hours')
+            item_code   : t('estimated_time'),
+            title       : estimate.name,
+            description : estimate.description.source,
+            amount      : estimate.estimated_time,
+            unit        : t('hours')
         });
     }
 
     function itemSelected(item){
         select({
-            item_code:item.code,
-            title:item.name,
-            description:item.description.source,
-            amount:1,
-            unit:item.unit,
-            unit_price:item.unit_price,
-            tax:item.tax
+            item_code   : item.code,
+            title       : item.name,
+            description : item.description.source,
+            amount      : 1,
+            unit        : item.unit,
+            unit_price  : item.unit_price,
+            tax         : item.tax
         });
     }
 
     function timeSelected(time){
         select({
-            item_code:t('timetrack'),
-            title:time.subject,
-            description:time.description.source,
-            amount:time.duration,
-            unit:t('hours'),
-            time_id:time.id
+            item_code   : t('timetrack'),
+            title       : time.subject,
+            description : time.description.source,
+            amount      : time.duration,
+            unit        : t('hours'),
+            time_id     : time.id
         });
     }
 </script>
 
 <style>
     div{
-        position: fixed;
-        top: 0;
-        bottom: 20px;
-        left: 0;
-        right: 0;
-        padding: 10px;
-        overflow: auto;
+        position : fixed;
+        top      : 0;
+        bottom   : 20px;
+        left     : 0;
+        right    : 0;
+        padding  : 10px;
+        overflow : auto;
 
     }
     span{
-        position: sticky;
-        top: 0;
+        position : sticky;
+        top      : 0;
     }
 </style>
 
diff --git a/frontend/src/routes/document/Send.svelte b/frontend/src/routes/document/Send.svelte
index da7b2d4..e2c2d39 100644
--- a/frontend/src/routes/document/Send.svelte
+++ b/frontend/src/routes/document/Send.svelte
@@ -1,34 +1,35 @@
 <script>
-    import { onMount } from 'svelte';
-    import { t } from '../../translations.svelte.js';
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    const router = useTinyRouter();
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
 
-    let { id } = $props();
-    let error = $state(null);
-    let doc = $state(null);
-    let email = $state(null);
-    let content = $state(null);
-    let subject = $state(null);
+    let   content = $state(null);
+    let   doc     = $state(null);
+    let   email   = $state(null);
+    let   error   = $state(null);
+    const router  = useTinyRouter();
+    let   subject = $state(null);
+    let { id }    = $props();
 
     async function loadDoc(){
-        let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}`;
+        let url  = api(`document/${id}`);
         let resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            doc = await resp.json();
-            email = doc.customer.email;
+            doc     = await resp.json();
+            email   = doc.customer.email;
             subject = t('new_document_from',t(doc.type),doc.company.name,doc.number),
-            error = null;
+            error   = null;
         } else {
             error = await resp.text();
             return;
         }
-        url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}/settings`;
+        url  = api(`document/${id}/settings`);
         resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const settings = await resp.json();
-            content = settings.content;
+            content        = settings.content;
         } else {
             error = await resp.text();
         }
@@ -36,11 +37,11 @@
 
     async function doSend(){
         var data = {email:email,subject:subject,content:content};
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}/send`;
+        const url  = api(`document/${id}/send`);
         const resp = await fetch(url,{
-            credentials:'include',
-            method: 'POST',
-            body: JSON.stringify(data)
+            credentials : 'include',
+            method      : 'POST',
+            body        : JSON.stringify(data)
         });
         if (resp.ok){
             router.navigate(`/document?company_id=${doc.company.id}`);
diff --git a/frontend/src/routes/document/StateSelector.svelte b/frontend/src/routes/document/StateSelector.svelte
index 24440e4..4c62526 100644
--- a/frontend/src/routes/document/StateSelector.svelte
+++ b/frontend/src/routes/document/StateSelector.svelte
@@ -1,16 +1,23 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../../translations.svelte.js';
-    let { caption = t('select_state'), selected = $bindable(0), onchange = (val) => console.log('changed to '+val)} = $props();
+
+    import {api}     from '../../urls.svelte.js';
+    import {t}       from '../../translations.svelte.js';
+
+    let {
+        caption  = t('select_state'),
+        onchange = (val) => console.log('changed to '+val),
+        selected = $bindable(0)
+    } = $props();
 
     let message = $state(t('loading'));
-    let states = $state(null);
+    let states  = $state(null);
 
     async function loadStates(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/states`;
-        var resp = await fetch(url,{credentials: 'include'});
+        const url  = api('document/states');
+        const resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
-            states = await resp.json();
+            states  = await resp.json();
         } else {
             message = await resp.text();
         }
diff --git a/frontend/src/routes/document/TemplateSelector.svelte b/frontend/src/routes/document/TemplateSelector.svelte
index 6576c56..ec52b20 100644
--- a/frontend/src/routes/document/TemplateSelector.svelte
+++ b/frontend/src/routes/document/TemplateSelector.svelte
@@ -1,21 +1,30 @@
 <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('loading');
+
+    import {api}     from '../../urls.svelte.js';
+    import {t}       from '../../translations.svelte.js';
+
+    let {
+        caption,
+        company,
+        value = $bindable(0),
+        onchange = () => console.log('changed')
+    } = $props();
+
+    let message   = t('loading');
     let templates = $state(null);
 
     async function loadTemplates(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/templates`;
+        const url = api('document/templates');
         var resp = await fetch(url,{
-            credentials: 'include',
-            method: 'POST',
-            body: JSON.stringify({company:company})
+            credentials : 'include',
+            method      : 'POST',
+            body        : JSON.stringify({company:company})
         });
         if (resp.ok){
             templates = await resp.json();
         } else {
-            message = await resp.text();
+            message   = await resp.text();
         }
     }
 
diff --git a/frontend/src/routes/document/TimeList.svelte b/frontend/src/routes/document/TimeList.svelte
index cc93bd6..ee52cb0 100644
--- a/frontend/src/routes/document/TimeList.svelte
+++ b/frontend/src/routes/document/TimeList.svelte
@@ -1,20 +1,25 @@
 <script>
-    import { t } from '../../translations.svelte.js';
     import { onMount } from 'svelte';
 
-    let { company_id, onSelect = (time) => {} } = $props();
+    import { api }     from '../../urls.svelte.js';
+    import { t }       from '../../translations.svelte.js';
 
+    let {
+        company_id,
+        onSelect = (time) => {}
+    } = $props();
+
+    let error    = $state(null);
     let projects = $state(null);
-    let times = $state(null);
-    let error = $state(null);
+    let times    = $state(null);
 
     async function loadProjects(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/list`;
-        let data = { company_id: company_id };
+        const url  = api'project/list');
+        let data   = { company_id: company_id };
         const resp = await fetch(url,{
-            credentials:'include',
-            method: 'POST',
-            body: JSON.stringify(data)
+            credentials : 'include',
+            method      : 'POST',
+            body        : JSON.stringify(data)
         });
         if (resp.ok){
             projects = await resp.json();
@@ -24,12 +29,12 @@
     }
 
     async function loadTimes(projectId){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/times/list`;
+        const url = api('times/list');
         let data = { company_id: company_id, project_id: projectId };
         const resp = await fetch(url,{
-            credentials:'include',
-            method: 'POST',
-            body: JSON.stringify(data)
+            credentials : 'include',
+            method      : 'POST',
+            body        : JSON.stringify(data)
         });
         if (resp.ok){
             times = await resp.json();
diff --git a/frontend/src/routes/document/TypeSelector.svelte b/frontend/src/routes/document/TypeSelector.svelte
index ed30e34..8b68ec1 100644
--- a/frontend/src/routes/document/TypeSelector.svelte
+++ b/frontend/src/routes/document/TypeSelector.svelte
@@ -1,12 +1,20 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../../translations.svelte.js';
-    let { caption, value = $bindable(0), onchange = () => console.log('changed')} = $props();
+
+    import {api}     from '../../urls.svelte.js';
+    import {t}       from '../../translations.svelte.js';
+
+    let {
+        caption,
+        onchange = () => console.log('changed'),
+        value = $bindable(0)
+    } = $props();
+
     let message = t('loading');
-    let types = $state(null);
+    let types   = $state(null);
 
     async function loadTypes(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/types`;
+        const url = api('api/document/types');
         var resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
             types = await resp.json();
diff --git a/frontend/src/routes/document/View.svelte b/frontend/src/routes/document/View.svelte
index 7b67028..72345e5 100644
--- a/frontend/src/routes/document/View.svelte
+++ b/frontend/src/routes/document/View.svelte
@@ -1,9 +1,11 @@
 <script>
-    import { onMount } from 'svelte';
-    import { t } from '../../translations.svelte.js';
-    import { user } from '../../user.svelte.js';
-
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
+
+    import {api}             from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
+    import { user }          from '../../user.svelte.js';
+
     import LineEditor        from '../../Components/LineEditor.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
     import MultilineEditor   from '../../Components/MultilineEditor.svelte';
@@ -13,23 +15,22 @@
     import StateSelector     from './StateSelector.svelte';
     import TemplateSelector  from './TemplateSelector.svelte';
 
-    const router = useTinyRouter();
 
-    let { id } = $props();
-    let error = $state(null);
-    let doc = $state(null);
-    let pdfDisabled = $state(false);
-    let sndDisabled = $state(false);
+    let   doc           = $state(null);
+    let   editable      = $derived(doc.state == 1);
+    let   error         = $state(null);
+    let   { id }        = $props();
+    let   pdfDisabled   = $state(false);
     let position_select = $state(false);
-
-    let editable = $derived(doc.state == 1);
+    const router        = useTinyRouter();
+    let   sndDisabled   = $state(false);
 
 
     async function loadDoc(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${id}`;
+        const url  =  api(`document/${id}`;
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            doc = await resp.json();
+            doc   = await resp.json();
             error = null;
         } else {
             error = await resp.text();
@@ -45,8 +46,8 @@
             doc.state = newVal;
         } else {
             const dummy = doc.state;
-            doc.state = null; // we need to alter in between,
-            doc.state = dummy; // otherwise the state will not be re-set
+            doc.state   = null; // we need to alter in between,
+            doc.state   = dummy; // otherwise the state will not be re-set
         }
     }
 
@@ -55,16 +56,16 @@
         if (parts.length<1) return false;
         let data = newValue;
         while (parts.length > 0){
-            const inner = data;
-            data = {};
+            const inner       = data;
+            data              = {};
             data[parts.pop()] = inner;
         }
         try {
-            const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}`;
+            const url  = api(`document/${doc.id}`;
             const resp = await fetch(url,{
-                credentials:'include',
-                method:'PATCH',
-                body:JSON.stringify(data)
+                credentials : 'include',
+                method      : 'PATCH',
+                body        : JSON.stringify(data)
             });
             return resp.ok;
         } catch (err){
@@ -73,15 +74,15 @@
     }
 
     async function addPosition(selected){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}/position`;
+        const url  = api(`document/${doc.id}/position`;
         const resp = await fetch(url,{
-            method: 'POST',
-            credentials:'include',
-            body:JSON.stringify(selected)
+            method      : 'POST',
+            credentials : 'include',
+            body        : JSON.stringify(selected)
         });
         if (resp.ok){
             doc.positions = await resp.json();
-            error = null;
+            error         = null;
         } else {
             error = await resp.text();
         }
@@ -90,15 +91,15 @@
     async function render(ev){
         pdfDisabled = true;
 
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}/pdf`;
-        const resp = await fetch(url,{credentials:'include'});
+        const url   = api(`document/${doc.id}/pdf`;
+        const resp  = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            error = null;
-            const blob = await resp.blob();
-            const parts = resp.headers.get("Content-disposition").split(";");
-            const filename = parts[1].split('=')[1].split('"').join('');
-            var fileLink = document.createElement('a');
-            fileLink.href = URL.createObjectURL(blob);
+            error             = null;
+            const blob        = await resp.blob();
+            const parts       = resp.headers.get("Content-disposition").split(";");
+            const filename    = parts[1].split('=')[1].split('"').join('');
+            var fileLink      = document.createElement('a');
+            fileLink.href     = URL.createObjectURL(blob);
             fileLink.download = filename;
             fileLink.click();
         } else {