cleaning up javascript code

frontend/src/Components/Autocomplete.svelte

@@ -7,12 +7,13 @@
         onSelect      = text => []
     } = $props();
 
-    let text = $state('')
+    const ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
     let options  = $state({});
+    let text     = $state('')
 
     async function ondblclick(evt){
-        var select = evt.target;
+        const select = evt.target;
-        let key = select.value;
+        const key    = select.value;
         text         = options[key];
         let result   = {};
         result[key]  = text;
@@ -21,9 +22,8 @@
     }
 
     async function onkeyup(evt){
-        var select = evt.target;
+        const select = evt.target;
-        var key = evt.key;
+        const key    = evt.key;
-        var ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
         if (ignore.includes(key)) return;
         if (key == 'ArrowDown'){
             if (select.selectedIndex == 0) select.selectedIndex=1;
@@ -39,7 +39,6 @@
             text += evt.key
         }
         options = await getCandidates(text);
-        console.log({options:options})
         await tick();
         for (let o of select.getElementsByTagName('option')) o.selected = false;
     }

frontend/src/Components/CompanySelector.svelte

@@ -1,16 +1,21 @@
 <script>
     import {onMount} from 'svelte';
+    import { api }   from '../urls.svelte.js';
     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;
 
+    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`;
+        const url  = api('company/list');
-        var resp = await fetch(url,{ credentials: 'include'});
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             companies = await resp.json();
         } else {
@@ -23,7 +28,6 @@
     }
 
     onMount(loadCompanies)
-
 </script>
 
 {#if companies}

frontend/src/Components/ContactSelector.svelte

@@ -1,14 +1,21 @@
 <script>
     import {onMount} from 'svelte';
+
+    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 message = t('loading');
+    let {
+        caption,
+        onselect = (contact) => console.log('selected '+contact.FN||contact.ORG)
+    } = $props();
+
     let contacts = $state(null);
+    let message = t('loading');
     let value   = 0;
 
     async function loadContacts(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/contacts`;
+        const url  = api('document/contacts');
-        var resp = await fetch(url,{ credentials: 'include'});
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             contacts = await resp.json();
         } else {
@@ -21,7 +28,6 @@
     }
 
     onMount(loadContacts)
-
 </script>
 
 {#if contacts}

frontend/src/Components/LineEditor.svelte

@@ -9,8 +9,8 @@
         type     = 'div',
         value    = $bindable(null)
     } = $props();
-    let editing = $state(false);
 
+    let editing   = $state(false);
     let editValue = value;
     let start     = 0;
 
@@ -63,7 +63,6 @@
         measured(evt, evt.timeStamp - start);
     }
 
-
     activeField.subscribe((val) => resetEdit());
 </script>
 

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 { 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();
+    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);
             }

frontend/src/Components/MarkdownEditor.svelte

@@ -1,5 +1,6 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
+    import { api }         from '../urls.svelte.js';
     import { t }           from '../translations.svelte.js';
 
     let {
@@ -12,11 +13,9 @@
     } = $props();
 
     let editing   = $state(false);
-
     let editValue = $state({source:value.source,rendered:value.rendered});
-
-    let timer = null;
     let start     = 0;
+    let timer     = null;
 
     async function applyEdit(){
         let success = await onSet(editValue.source);
@@ -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',

frontend/src/Components/MemberEditor.svelte

@@ -1,8 +1,12 @@
 <script>
     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 => {},
@@ -10,14 +14,14 @@
         dropMember       = (member)   => console.log(`no handler for dropMember(${member})`),
         addMember        = (entry)    => console.log(`no handler for addMember(${entry})`)
     } = $props();
+
     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`;
+        const url  = api('task/permissions');
-        var resp = await fetch(url,{credentials: 'include'});
+        const resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
             permissions = await resp.json();
         } else {
@@ -30,7 +34,6 @@
     }
 
     onMount(loadPermissions);
-
 </script>
 
 {#if error}

frontend/src/Components/Menu.svelte

@@ -1,15 +1,16 @@
 <script>
-import { logout, user } from '../user.svelte.js';
 import { onMount }       from 'svelte';
 import { useTinyRouter } from 'svelte-tiny-router';
+
+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();

frontend/src/Components/PermissionSelector.svelte

@@ -1,6 +1,7 @@
 <script>
     import {onMount} from 'svelte';
     import {t}       from '../translations.svelte.js';
+
     let {
         caption  = t('select_permission'),
         selected = $bindable(0),

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 {
-    let editing = $state(false);
+        editable = false,
+        currency,
+        onSet = (newVal) => {},
+        value = $bindable(null)
+    } = $props();
 
+    let editing   = $state(false);
     let editValue = value/100;
 
     async function applyEdit(){

frontend/src/Components/StateSelector.svelte

@@ -1,7 +1,8 @@
 <script>
     import {onMount} from 'svelte';
-    import {t} from '../translations.svelte.js';
     import {api}     from '../urls.svelte.js';
+    import {t}       from '../translations.svelte.js';
+
     let {
         caption    = t('select_state'),
         selected   = $bindable(0),
@@ -14,7 +15,7 @@
 
     async function loadStates(){
         const url  = api(`project/${project_id}/states`);
-        var resp = await fetch(url,{credentials: 'include'});
+        const resp = await fetch(url,{credentials: 'include'});
         if (resp.ok){
             states = await resp.json();
         } else {

frontend/src/routes/document/Add.svelte

@@ -1,13 +1,17 @@
 <script>
     import { onMount }       from 'svelte';
-    import { t } from '../../translations.svelte.js';
     import { useTinyRouter } from 'svelte-tiny-router';
+
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
+
     import ContactSelector   from '../../Components/ContactSelector.svelte';
 
-    let router = useTinyRouter();
     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,8 +24,8 @@
     });
 
     async function loadCompanies(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
+        const url  = api('company/list');
-        var resp = await fetch(url,{ credentials: 'include'});
+        const resp = await fetch(url,{ credentials: 'include'});
         if (resp.ok){
             const companies      = await resp.json();
             company              = companies[document.sender.company];
@@ -37,8 +41,8 @@
     }
 
     async function loadDocType(){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/types`;
+        const url  = api('document/types');
-        var resp = await fetch(url,{ credentials: 'include'});
+        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',