From 90a936b07f7ffffb7a83838dbf9ccb7daccd0f84 Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Tue, 29 Jul 2025 09:01:37 +0200
Subject: [PATCH] cleaning up javascript code

---
 frontend/src/Components/Autocomplete.svelte   | 29 +++++++++--------
 .../src/Components/CompanySelector.svelte     | 22 +++++++------
 .../src/Components/ContactSelector.svelte     | 22 ++++++++-----
 frontend/src/Components/LineEditor.svelte     | 15 +++++----
 frontend/src/Components/Login.svelte          | 20 ++++++------
 frontend/src/Components/MarkdownEditor.svelte | 31 +++++++++----------
 frontend/src/Components/MemberEditor.svelte   | 23 ++++++++------
 frontend/src/Components/Menu.svelte           | 11 ++++---
 .../src/Components/MultilineEditor.svelte     | 18 +++++------
 .../src/Components/PermissionSelector.svelte  |  5 +--
 frontend/src/Components/PriceEditor.svelte    | 11 +++++--
 frontend/src/Components/StateSelector.svelte  | 17 +++++-----
 frontend/src/routes/document/Add.svelte       | 28 ++++++++++-------
 13 files changed, 138 insertions(+), 114 deletions(-)

diff --git a/frontend/src/Components/Autocomplete.svelte b/frontend/src/Components/Autocomplete.svelte
index 5f98d0e..2985edf 100644
--- a/frontend/src/Components/Autocomplete.svelte
+++ b/frontend/src/Components/Autocomplete.svelte
@@ -1,29 +1,29 @@
 <script>
-    import { t } from '../translations.svelte.js'
+    import { t }    from '../translations.svelte.js'
     import { tick } from "svelte";
 
     let {
         getCandidates = text => {},
-        onSelect = text => []
+        onSelect      = text => []
     } = $props();
 
-    let text = $state('')
-    let options = $state({});
+    const ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
+    let options  = $state({});
+    let text     = $state('')
 
     async function ondblclick(evt){
-        var select = evt.target;
-        let key = select.value;
-        text = options[key];
-        let result = {};
-        result[key]=text;
-        options={};
+        const select = evt.target;
+        const key    = select.value;
+        text         = options[key];
+        let result   = {};
+        result[key]  = text;
+        options      = {};
         onSelect(result);
     }
 
     async function onkeyup(evt){
-        var select = evt.target;
-        var key = evt.key;
-        var ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
+        const select = evt.target;
+        const key    = evt.key;
         if (ignore.includes(key)) return;
         if (key == 'ArrowDown'){
             if (select.selectedIndex == 0) select.selectedIndex=1;
@@ -34,12 +34,11 @@
             return;
         }
         if (key == 'Backspace'){
-            text = text.substring(0,text.length-1)
+            text  = text.substring(0,text.length-1)
         } else if (key.length<2){
             text += evt.key
         }
         options = await getCandidates(text);
-        console.log({options:options})
         await tick();
         for (let o of select.getElementsByTagName('option')) o.selected = false;
     }
diff --git a/frontend/src/Components/CompanySelector.svelte b/frontend/src/Components/CompanySelector.svelte
index c34d166..46e1bd9 100644
--- a/frontend/src/Components/CompanySelector.svelte
+++ b/frontend/src/Components/CompanySelector.svelte
@@ -1,20 +1,25 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../translations.svelte.js';
-    let { caption, onselect = (company) => console.log('selected '+company.name) } = $props();
-    let message = t('loading');
-    let companies = $state(null);
-    let value = 0;
+    import { api }   from '../urls.svelte.js';
+    import {t}       from '../translations.svelte.js';
 
+    let {
+        caption,
+        onselect = (company) => console.log('selected '+company.name)
+    } = $props();
+
+    let companies       = $state(null);
+    let message         = t('loading');
+    let value           = 0;
     let sortedCompanies = $derived.by(() => Object.values(companies).sort((a, b) => a.name.localeCompare(b.name)));
 
     async function loadCompanies(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
-        var resp = await fetch(url,{ credentials: 'include'});
+        const url  = api('company/list');
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             companies = await resp.json();
         } else {
-            message = await resp.text();
+            message   = await resp.text();
         }
     }
 
@@ -23,7 +28,6 @@
     }
 
     onMount(loadCompanies)
-
 </script>
 
 {#if companies}
diff --git a/frontend/src/Components/ContactSelector.svelte b/frontend/src/Components/ContactSelector.svelte
index 273461d..0a606ed 100644
--- a/frontend/src/Components/ContactSelector.svelte
+++ b/frontend/src/Components/ContactSelector.svelte
@@ -1,18 +1,25 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../translations.svelte.js';
-    let { caption, onselect = (contact) => console.log('selected '+contact.FN||contact.ORG) } = $props();
-    let message = t('loading');
+
+    import {api}     from '../urls.svelte.js';
+    import {t}       from '../translations.svelte.js';
+
+    let {
+        caption,
+        onselect = (contact) => console.log('selected '+contact.FN||contact.ORG)
+    } = $props();
+
     let contacts = $state(null);
-    let value = 0;
+    let message = t('loading');
+    let value   = 0;
 
     async function loadContacts(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/contacts`;
-        var resp = await fetch(url,{ credentials: 'include'});
+        const url  = api('document/contacts');
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             contacts = await resp.json();
         } else {
-            message = await resp.text();
+            message  = await resp.text();
         }
     }
 
@@ -21,7 +28,6 @@
     }
 
     onMount(loadContacts)
-
 </script>
 
 {#if contacts}
diff --git a/frontend/src/Components/LineEditor.svelte b/frontend/src/Components/LineEditor.svelte
index 6bf5d2e..247aa3b 100644
--- a/frontend/src/Components/LineEditor.svelte
+++ b/frontend/src/Components/LineEditor.svelte
@@ -4,15 +4,15 @@
 
     let {
         editable = false,
-        onclick = evt => { startEdit() },
-        onSet = newVal => {return true;},
-        type = 'div',
-        value = $bindable(null)
+        onclick  = evt => { startEdit() },
+        onSet    = newVal => {return true;},
+        type     = 'div',
+        value    = $bindable(null)
     } = $props();
-    let editing = $state(false);
 
+    let editing   = $state(false);
     let editValue = value;
-    let start = 0;
+    let start     = 0;
 
     async function applyEdit(){
         let success = await onSet(editValue);
@@ -21,7 +21,7 @@
     }
 
     function resetEdit(){
-        editing = false;
+        editing   = false;
         editValue = value;
     }
 
@@ -63,7 +63,6 @@
         measured(evt, evt.timeStamp - start);
     }
 
-
     activeField.subscribe((val) => resetEdit());
 </script>
 
diff --git a/frontend/src/Components/Login.svelte b/frontend/src/Components/Login.svelte
index 9850401..00830f6 100644
--- a/frontend/src/Components/Login.svelte
+++ b/frontend/src/Components/Login.svelte
@@ -1,12 +1,14 @@
 <script>
-    import { onMount } from 'svelte';
-    import { t } from '../translations.svelte.js';
-    import { checkUser, tryLogin } from '../user.svelte.js';
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
+    import { api }                 from '../urls.svelte.js';
+    import { checkUser, tryLogin } from '../user.svelte.js';
+    import { t }                   from '../translations.svelte.js';
+
     let credentials = $state({ username : null, password : null });
-    let services = $state([]);
-    const router = useTinyRouter();
+    const router    = useTinyRouter();
+    let services    = $state([]);
 
     function doLogin(ev){
         ev.preventDefault();
@@ -19,7 +21,7 @@
 
     onMount(async () => {
         await checkUser();
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/buttons`;
+        const url  = api('user/oidc/buttons');
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const json = await resp.json();
@@ -28,12 +30,12 @@
     });
 
     async function redirectTo(service){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/redirect/${service}`;
+        const url  = api(`user/oidc/redirect/${service}`);
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            var json = await resp.json();
+            const json = await resp.json();
             if (json.authorization_endpoint) {
-                var endpoint = json.authorization_endpoint;
+                const endpoint = json.authorization_endpoint;
                 delete json.authorization_endpoint;
                 location.href = endpoint + '?' + new URLSearchParams(json);
             }
diff --git a/frontend/src/Components/MarkdownEditor.svelte b/frontend/src/Components/MarkdownEditor.svelte
index 3e52b0d..abf3188 100644
--- a/frontend/src/Components/MarkdownEditor.svelte
+++ b/frontend/src/Components/MarkdownEditor.svelte
@@ -1,34 +1,33 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
-    import { t } from '../translations.svelte.js';
+    import { api }         from '../urls.svelte.js';
+    import { t }           from '../translations.svelte.js';
 
     let {
         editable = true,
-        onclick = evt => {},
-        onSet = newVal => {return true;},
-        simple = false,
-        type = 'div',
-        value = $bindable({source:null,rendered:null})
+        onclick  = evt => {},
+        onSet    = newVal => {return true;},
+        simple   = false,
+        type     = 'div',
+        value    = $bindable({source:null,rendered:null})
     } = $props();
 
-    let editing = $state(false);
-
+    let editing   = $state(false);
     let editValue = $state({source:value.source,rendered:value.rendered});
-
-    let timer = null;
-    let start = 0;
+    let start     = 0;
+    let timer     = null;
 
     async function applyEdit(){
         let success = await onSet(editValue.source);
         if (success) {
-            value.source = editValue.source;
+            value.source   = editValue.source;
             value.rendered = editValue.rendered;
-            editing = false;
+            editing        = false;
         } else resetEdit();
     }
 
     function resetEdit(){
-        editing = false;
+        editing   = false;
         editValue = {source:value.source,rendered:value.rendered};
     }
 
@@ -38,7 +37,7 @@
     }
 
     async function render(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/markdown/render`;
+        const url  = api('markdown/render');
         const resp = await fetch(url,{
             credentials: 'include',
             method: 'POST',
@@ -49,7 +48,7 @@
 
     function typed(ev){
         if (simple) {
-            value.source = editValue.source;
+            value.source   = editValue.source;
             value.rendered = editValue.rendered;
         }
         if (ev.keyCode == 13 && ev.ctrlKey){
diff --git a/frontend/src/Components/MemberEditor.svelte b/frontend/src/Components/MemberEditor.svelte
index 2965335..7b9df9c 100644
--- a/frontend/src/Components/MemberEditor.svelte
+++ b/frontend/src/Components/MemberEditor.svelte
@@ -1,23 +1,27 @@
 <script>
-    import { onMount } from 'svelte';
-    import { t } from '../translations.svelte.js';
-    import Autocomplete from './Autocomplete.svelte';
+    import { onMount }        from 'svelte';
+
+    import { api }            from '../urls.svelte.js';
+    import { t }              from '../translations.svelte.js';
+
+    import Autocomplete       from './Autocomplete.svelte';
     import PermissionSelector from './PermissionSelector.svelte';
+
     let {
         members,
-        getCandidates = text => {},
+        getCandidates    = text => {},
         updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`),
         dropMember       = (member)   => console.log(`no handler for dropMember(${member})`),
         addMember        = (entry)    => console.log(`no handler for addMember(${entry})`)
     } = $props();
-    let error = $state(null);
+
+    let error         = $state(null);
+    let permissions   = $state(null);
     let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));
 
-    let permissions = $state(null);
-
     async function loadPermissions(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/permissions`;
-        var resp = await fetch(url,{credentials: 'include'});
+        const url  = api('task/permissions');
+        const resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
             permissions = await resp.json();
         } else {
@@ -30,7 +34,6 @@
     }
 
     onMount(loadPermissions);
-
 </script>
 
 {#if error}
diff --git a/frontend/src/Components/Menu.svelte b/frontend/src/Components/Menu.svelte
index 9e84a0e..a0fd633 100644
--- a/frontend/src/Components/Menu.svelte
+++ b/frontend/src/Components/Menu.svelte
@@ -1,15 +1,16 @@
 <script>
-import { logout, user } from '../user.svelte.js';
-import { onMount } from 'svelte';
+import { onMount }       from 'svelte';
 import { useTinyRouter } from 'svelte-tiny-router';
-import { t } from '../translations.svelte.js';
 
-const router = useTinyRouter();
+import { api }           from '../urls.svelte.js';
+import { logout, user }  from '../user.svelte.js';
+import { t }             from '../translations.svelte.js';
 
+const router  = useTinyRouter();
 const modules = $state([]);
 
 async function fetchModules(){
-    const url = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/modules`;
+    const url  = api('/legacy/modules');
     const resp = await fetch(url,{credentials:'include'});
     if (resp.ok){
         const arr = await resp.json();
diff --git a/frontend/src/Components/MultilineEditor.svelte b/frontend/src/Components/MultilineEditor.svelte
index 810e2c6..85741af 100644
--- a/frontend/src/Components/MultilineEditor.svelte
+++ b/frontend/src/Components/MultilineEditor.svelte
@@ -1,19 +1,19 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
-    import { t } from '../translations.svelte.js';
+    import { t }           from '../translations.svelte.js';
 
     let {
         editable = false,
-        onclick = evt => {},
-        onSet = newVal => {return true;},
-        type = 'div',
-        value = $bindable(null)
+        onclick  = evt => {},
+        onSet    = newVal => {return true;},
+        type     = 'div',
+        value    = $bindable(null)
     } = $props();
 
-    let editing = $state(false);
+    let editing   = $state(false);
     let editValue = $state(value);
-    let timer = null;
-    let start = 0;
+    let timer     = null;
+    let start     = 0;
 
     async function applyEdit(){
         let success = await onSet(editValue);
@@ -22,7 +22,7 @@
     }
 
     function resetEdit(){
-        editing = false;
+        editing   = false;
         editValue = value;
     }
 
diff --git a/frontend/src/Components/PermissionSelector.svelte b/frontend/src/Components/PermissionSelector.svelte
index 7f120b9..5dafa73 100644
--- a/frontend/src/Components/PermissionSelector.svelte
+++ b/frontend/src/Components/PermissionSelector.svelte
@@ -1,8 +1,9 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../translations.svelte.js';
+    import {t}       from '../translations.svelte.js';
+
     let {
-        caption = t('select_permission'),
+        caption  = t('select_permission'),
         selected = $bindable(0),
         onchange = (val) => console.log('changed to',val),
         permissions = null
diff --git a/frontend/src/Components/PriceEditor.svelte b/frontend/src/Components/PriceEditor.svelte
index 810110f..e55c8ff 100644
--- a/frontend/src/Components/PriceEditor.svelte
+++ b/frontend/src/Components/PriceEditor.svelte
@@ -1,9 +1,14 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
 
-    let { editable = false, currency, value = $bindable(null), onSet = (newVal) => {} } = $props();
-    let editing = $state(false);
+    let {
+        editable = false,
+        currency,
+        onSet = (newVal) => {},
+        value = $bindable(null)
+    } = $props();
 
+    let editing   = $state(false);
     let editValue = value/100;
 
     async function applyEdit(){
@@ -14,7 +19,7 @@
 
     function resetEdit(){
         editValue = value/100;
-        editing = false;
+        editing   = false;
     }
 
     function startEdit(){
diff --git a/frontend/src/Components/StateSelector.svelte b/frontend/src/Components/StateSelector.svelte
index e8bcc9e..aed5521 100644
--- a/frontend/src/Components/StateSelector.svelte
+++ b/frontend/src/Components/StateSelector.svelte
@@ -1,20 +1,21 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../translations.svelte.js';
-    import {api} from '../urls.svelte.js';
+    import {api}     from '../urls.svelte.js';
+    import {t}       from '../translations.svelte.js';
+
     let {
-        caption = t('select_state'),
-        selected = $bindable(0),
-        onchange = (val) => console.log('changed to '+val),
+        caption    = t('select_state'),
+        selected   = $bindable(0),
+        onchange   = (val) => console.log('changed to '+val),
         project_id = '?'
     } = $props();
 
     let message = $state(t('loading'));
-    let states = $state(null);
+    let states  = $state(null);
 
     async function loadStates(){
-        const url = api(`project/${project_id}/states`);
-        var resp = await fetch(url,{credentials: 'include'});
+        const url  = api(`project/${project_id}/states`);
+        const resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
             states = await resp.json();
         } else {
diff --git a/frontend/src/routes/document/Add.svelte b/frontend/src/routes/document/Add.svelte
index d11e446..baf7364 100644
--- a/frontend/src/routes/document/Add.svelte
+++ b/frontend/src/routes/document/Add.svelte
@@ -1,13 +1,17 @@
 <script>
-    import { onMount } from 'svelte';
-    import { t } from '../../translations.svelte.js';
+    import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
-    import ContactSelector from '../../Components/ContactSelector.svelte';
 
-    let router = useTinyRouter();
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
+
+    import ContactSelector   from '../../Components/ContactSelector.svelte';
+
     let company = $state(null);
-    let error = $state(null);
     let docType = $state(null);
+    let error = $state(null);
+    let router = useTinyRouter();
+
     let document = $state({
         type : +router.query.document_type,
         customer : {
@@ -20,11 +24,11 @@
     });
 
     async function loadCompanies(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
-        var resp = await fetch(url,{ credentials: 'include'});
+        const url  = api('company/list');
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
-            const companies = await resp.json();
-            company = companies[document.sender.company];
+            const companies      = await resp.json();
+            company              = companies[document.sender.company];
             document.sender.name = '';
             if (company.name)         document.sender.name        += company.name+"\n";
             if (company.address)      document.sender.name        += company.address+"\n";
@@ -37,8 +41,8 @@
     }
 
     async function loadDocType(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/types`;
-        var resp = await fetch(url,{ credentials: 'include'});
+        const url  = api('document/types');
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             const types = await resp.json();
             docType = t('type_'+types[document.type]);
@@ -69,7 +73,7 @@
     }
 
     async function submit(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document`;
+        const url = api('document');
         const resp = await fetch(url,{
             method: 'POST',
             credentials: 'include',