wirking on global error display

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/App.svelte

@@ -1,8 +1,9 @@
 <script>
     import { Router, Route } from 'svelte-tiny-router';
 
-    import { loadTranslation } from './translations.svelte.js';
-    import { checkUser, user } from './user.svelte.js';
+    import { messages }        from './warn.svelte';
+    import { loadTranslation } from './translations.svelte';
+    import { checkUser, user } from './user.svelte';
 
     import AddDoc      from "./routes/document/Add.svelte";
     import AddTask     from "./routes/task/Add.svelte";
@@ -69,6 +70,12 @@
         <Router beforeEach={[testGuard]}>
         <!-- https://github.com/notnotsamuel/svelte-tiny-router -->
         <Menu />
+        {#if messages.error}
+        <span class="error">{@html messages.error}</span>
+        {/if}
+        {#if messages.warning}
+        <span class="error">{@html messages.warning}</span>
+        {/if}
         <Route path="/"                            component={User} />
         <Route path="/bookmark"                    component={Bookmarks} />
         <Route path="/bookmark/:id/view"           component={Bookmark} />

frontend/src/Components/Login.svelte

@@ -2,22 +2,21 @@
     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';
+    import { api }                 from '../urls.svelte';
+    import { error, yikes }        from '../warn.svelte';
+    import { checkUser, tryLogin } from '../user.svelte';
+    import { t }                   from '../translations.svelte';
 
     let credentials = $state({ username : null, password : null });
     const router    = useTinyRouter();
     let services    = $state([]);
-    let error       = $state(null);
-
 
     async function doLogin(ev){
         ev.preventDefault();
         const json = await tryLogin(credentials);
         if (json) {
             json.release_time = json.release_time.replace('T',' ');
-            error = t('failed_login_attempts',json);
+            error(t('failed_login_attempts',json));
         }
     }
 
@@ -43,13 +42,14 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const json = await resp.json();
+            yikes();
             if (json.authorization_endpoint) {
                 const endpoint = json.authorization_endpoint;
                 delete json.authorization_endpoint;
                 location.href = endpoint + '?' + new URLSearchParams(json);
             }
         } else {
-            error = await resp.text();
+            error(await resp.text());
             if (btn) btn.disabled = false;
         }
     }
@@ -85,9 +85,6 @@
 
 <form onsubmit={doLogin}>
     <fieldset>
-        {#if error}
-        <span class="error">{error}</span>
-        {/if}
         <legend>{t('login')}</legend>
         <label>
             <input type="text" bind:value={credentials.username} required use:init />

frontend/src/Components/UserSelector.svelte

@@ -5,7 +5,6 @@
 
     import Autocomplete       from './Autocomplete.svelte';
 
-    let error = $state(null);
     let {
         getCandidates = async text => {},
         heading       = t('add_object',{object:t('user')}),
@@ -25,9 +24,6 @@
     let sortedUsers = $derived.by(() => Object.values(users).sort((a, b) => a.name.localeCompare(b.name)));
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <table>
     <tbody>
     {#each sortedUsers as usr,idx}

frontend/src/routes/bookmark/Index.svelte

@@ -1,8 +1,9 @@
 <script>
     import { onMount } from 'svelte';
 
-    import { api }     from '../../urls.svelte.js';
-    import { t }       from '../../translations.svelte.js';
+    import { api }          from '../../urls.svelte';
+    import { error, yikes } from '../../warn.svelte';
+    import { t }            from '../../translations.svelte';
 
     import Editor      from '../../Components/MarkdownEditor.svelte';
     import Users       from '../../Components/UserSelector.svelte';
@@ -24,7 +25,6 @@
         url:null,
         users:{}
     });
-    let error        = $state(null);
 
     async function getCandidates(text){
         const url  = api('user/search');
@@ -34,13 +34,13 @@
             body        : text
         });
         if (resp.ok){
-            error = null;
+            yikes();
             const input = await resp.json();
             return Object.fromEntries(
                 Object.entries(input).map(([key, value]) => [key, value.name])
             );
         } else {
-            error = await resp.text();
+            error(await resp.text());
             return {};
         }
     }
@@ -55,10 +55,10 @@
             bookmarks = Object.values(merged).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
             loader.offset += loader.limit;
             loader.active  = false;
-            error = null;
+            yikes();
             if (Object.keys(raw).length) onscroll(null); // when bookmarks were received, check whether they fill up the page
         } else {
-            error = await resp.html();
+            error(await resp.html())
         }
     }
 
@@ -81,7 +81,7 @@
             const bookmark = await resp.json();
             bookmarks.unshift(bookmark);
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -102,9 +102,6 @@
 <svelte:window {onscroll} />
 <fieldset>
     <legend>{t('Bookmarks')}</legend>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     <label>
         {t('URL')}
         <input bind:value={new_bookmark.url} autofocus />

frontend/src/routes/bookmark/View.svelte

@@ -3,14 +3,14 @@
 
     import Bookmark from './Template.svelte';
 
-    import { api }     from '../../urls.svelte.js';
-    import { t }       from '../../translations.svelte.js';
+    import { api }          from '../../urls.svelte';
+    import { error, yikes } from '../../warn.svelte';
+    import { t }            from '../../translations.svelte';
 
     import Editor          from '../../Components/MarkdownEditor.svelte';
     import Template        from './Template.svelte';
 
     let bookmark = $state(null);
-    let error = $state(null);
     let { id } = $props();
 
     async function load(){
@@ -18,15 +18,13 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             bookmark = await resp.json();
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
     onMount(load);
 </script>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <Template {bookmark} />

frontend/src/routes/company/Editor.svelte

@@ -1,13 +1,14 @@
 <script>
-    import {api} from '../../urls.svelte.js'
-    import {t}   from '../../translations.svelte.js';
+    import {api} from '../../urls.svelte'
+    import { error, yikes } from '../../warn.svelte';
+    import {t}   from '../../translations.svelte';
+
     import LineEditor from '../../Components/LineEditor.svelte';
     import Multiline  from '../../Components/MultilineEditor.svelte';
     import Users      from '../../Components/UserSelector.svelte'
 
     let caption = $state(t('save_object',{object:t('users')}));
     let { company } = $props();
-    let error = $state(null);
     let btnEnabled = $state(true);
     let memberCopy = $state(JSON.parse(JSON.stringify(company.members)));
 
@@ -19,13 +20,13 @@
             body        : text
         });
         if (resp.ok){
-            error = null;
+            yikes();
             const input = await resp.json();
             return Object.fromEntries(
                 Object.entries(input).map(([key, value]) => [key, value.name])
             );
         } else {
-            error = await resp.text();
+            error(await resp.text());
             return {};
         }
     }
@@ -42,7 +43,7 @@
             for (let key of Object.keys(patched)) company[key] = patched[key];
             return true;
         }
-        error = await resp.text();
+        error(await resp.text())
         return false;
     }
 

frontend/src/routes/company/Index.svelte

@@ -1,13 +1,13 @@
 <script>
     import {onMount}  from 'svelte';
-    import {api}      from '../../urls.svelte.js';
-    import {t}        from '../../translations.svelte.js';
+    import {api}      from '../../urls.svelte';
+    import { error, yikes } from '../../warn.svelte';
+    import {t}        from '../../translations.svelte';
 
     import Editor     from './Editor.svelte';
     import LineEditor from '../../Components/LineEditor.svelte';
     import Notes      from '../notes/RelatedNotes.svelte';
 
-    let error       = $state(null);
     let companies   = $state(null);
     let new_company = $state({name:null,email:null});
     let selected    = $state(0);
@@ -23,9 +23,9 @@
         if (resp.ok){
             const company = await resp.json();
             companies[company.id] = company;
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text())
         }
     }
 
@@ -38,9 +38,9 @@
         });
         if (resp.ok){
             delete companies[company.id];
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
         return false;
     }
@@ -50,9 +50,9 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             companies = await resp.json();
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -71,9 +71,6 @@
     <legend>
         {t('companies')}
     </legend>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     {#if companies}
     <table class="companies">
         <thead>

frontend/src/routes/project/List.svelte

@@ -3,10 +3,10 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api }           from '../../urls.svelte.js';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
 
     const router   = useTinyRouter();
-    let error      = $state(null);
     let projects   = $state(null);
     let companies  = $state(null);
     let showClosed = $state(router.query.closed == "show");
@@ -26,11 +26,12 @@
             });
             if (resp.ok){
                 projects = await resp.json();
+                yikes();
             } else {
-                error = await resp.text();
+                error(await resp.text());
             }
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -44,8 +45,9 @@
         if (resp.ok){
             var prj                 = await resp.json();
             projects[prj.id].status = prj.status;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -69,9 +71,6 @@
     <title>Umbrella – {t('Projects')}</title>
 </svelte:head>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 <fieldset>
     <legend>
         {t('projects')}

frontend/src/routes/project/View.svelte

@@ -2,8 +2,9 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
-    import { t }             from '../../translations.svelte.js';
+    import { api }           from '../../urls.svelte';
+    import { error, yikes }  from '../../warn.svelte';
+    import { t }             from '../../translations.svelte';
 
     import LineEditor        from '../../Components/LineEditor.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
@@ -14,7 +15,6 @@
     import TaskList          from '../task/TaskList.svelte';
 
     let { id }         = $props();
-    let error          = $state(null);
     let estimated_time = $state({sum:0});
     let project        = $state(null);
     let router         = useTinyRouter();
@@ -41,9 +41,9 @@
         if (resp.ok){
             const json = await resp.json();
             project.allowed_states[json.code] = json.name;
-            error = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -89,11 +89,10 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             project = await resp.json();
-//            console.log(project);
-            error   = null;
+            yikes();
             loadTasks();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -112,9 +111,9 @@
             tasks              = {};
             estimated_time.sum = 0;
             tasks              = await resp.json();
-            error              = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -135,11 +134,11 @@
             body        : JSON.stringify(data)
         });
         if (resp.ok){
-            error   = null;
+            yikes();
             project = await resp.json();
             return true;
         } else {
-            error = await resp.text();
+            error(await resp.text());
             return false;
         }
     }
@@ -162,10 +161,6 @@
     <title>Umbrella – {project?.name}</title>
 </svelte:head>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
-
 {#if project}
 <div class="project grid2">
     <div>{t('project')}</div>

frontend/src/routes/task/ListTask.svelte

@@ -4,6 +4,7 @@
 
     import { dragged }       from './dragndrop.svelte';
     import { api }           from '../../urls.svelte';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte';
     import { timetrack }     from '../../user.svelte';
     import { now }           from '../../time.svelte';
@@ -20,7 +21,6 @@
     } = $props();
     let children = $state(null);
     let deleted  = $state(false);
-    let error    = $state(null);
     const router = useTinyRouter();
     let start    = 0;
 
@@ -39,7 +39,7 @@
             const track = await resp.json();
             timetrack.running = track;
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -53,7 +53,7 @@
             if (resp.ok){
                 deleted = true;
             } else {
-                error = await resp.text();
+                error(await resp.text())
             }
         }
     }
@@ -78,7 +78,7 @@
             children[dragged.element.id]=dragged.element;
             if (dragged.siblings[dragged.element.id]) delete dragged.siblings[dragged.element.id];
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
         return false;
     }
@@ -97,9 +97,9 @@
         });
         if (resp.ok){
             children = await resp.json();
-            error    = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -121,7 +121,7 @@
             task = await resp.json();
             return true;
         } else {
-            error = await resp.text();
+            error(await resp.text());
             return false;
         }
     }
@@ -168,9 +168,6 @@
     <button class="symbol" title={t('delete_object',{object:t('subtask')})} onclick={deleteTask} ></button>
     <button class="symbol" title={t('add_object',{object:t('subtask')})} onclick={addSubtask}></button>
     <button class="symbol" title={t('timetracking')} onclick={addTime}></button>
-    {#if error}
-    <span class="error">{error}</span>
-    {/if}
     {#if children}
     <TaskList {states} tasks={children} {estimated_time} {show_closed} />
     {/if}

frontend/src/routes/task/RequiredTasks.svelte

@@ -3,12 +3,12 @@
     import { useTinyRouter } from 'svelte-tiny-router';
 
     import { api } from '../../urls.svelte';
+    import { error, yikes }  from '../../warn.svelte';
     import { t }   from '../../translations.svelte';
 
     let { task = null }     = $props();
 
     let candidates    = $state({});
-    let error         = $state(null);
     let key           = $state(null);
     let requiredTasks = $state({});
     let router        = useTinyRouter();
@@ -19,7 +19,7 @@
         let url = api(`task/${new_task_id}`);
         let resp = await fetch(url,{ credentials : 'include' });
         if (resp.ok){
-            error = null;
+            yikes();
             let newTask = await resp.json();
             if (newTask.project_id != task.project_id){
                 alert('project mismatch!');
@@ -30,7 +30,7 @@
             await patch();
             delete candidates[new_task_id];
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -47,12 +47,12 @@
             body        : JSON.stringify(data)
         });
         if (res.ok) {
-            error      = null;
+            yikes();
             candidates = await res.json();
             for (var taskId of Object.keys(requiredTasks)) delete candidates[taskId];
             delete candidates[task.id];
         } else {
-            error = await res.text();
+            error(await res.text());
         }
     }
 
@@ -65,10 +65,10 @@
             body        : JSON.stringify({ids:task.required_tasks_ids})
         });
         if (res.ok){
-            error = null;
+            yikes();
             requiredTasks = await res.json();
         } else {
-            error = await res.text();
+            error(await res.text());
         }
     }
 
@@ -91,9 +91,7 @@
                 method      : 'PATCH',
                 body        : JSON.stringify({required_tasks_ids:task.required_tasks_ids})
             });
-            if (!resp.ok){
-                error = await resp.text();
-            }
+            if (!resp.ok) error(await resp.text());
     }
 
     async function unlink(required_task){

frontend/src/routes/task/View.svelte

@@ -2,8 +2,9 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte.js';
-    import { t }             from '../../translations.svelte.js';
+    import { api }           from '../../urls.svelte';
+    import { error, yikes }  from '../../warn.svelte';
+    import { t }             from '../../translations.svelte';
     import { timetrack }     from '../../user.svelte.js';
     import { now }           from '../../time.svelte';
 
@@ -19,7 +20,6 @@
     let { id }         = $props();
     let children       = $state(null);
     let dummy          = $derived(updateOn(id));
-    let error          = $state(null);
     let estimated_time = $state({sum:0});
     let project        = $state(null);
     const router       = useTinyRouter();
@@ -47,8 +47,9 @@
         if (resp.ok) {
             const track = await resp.json();
             timetrack.running = track;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -87,9 +88,9 @@
         });
         if (resp.ok){
             children = await resp.json();
-            error    = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -99,7 +100,7 @@
         if (resp.ok){
             task.parent = await resp.json();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -108,14 +109,14 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             task     = await resp.json();
-            error    = null;
+            yikes();
             project  = null;
             children = null;
             loadChildren();
             if (task.project_id) loadProject();
             if (task.parent_task_id) loadParent();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -124,9 +125,9 @@
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             project = await resp.json();
-            error   = null;
+            yikes();
         } else {
-            error = await resp.text();
+            error(await resp.text());
         }
     }
 
@@ -142,13 +143,13 @@
             body        : JSON.stringify(data)
         });
         if (resp.ok){
-            error = null;
+            yikes();
             let old_task = task;
             task  = await resp.json();
             if (task.parent_id == old_task.parent_id) task.parent = old_task.parent;
             return true;
         } else {
-            error = await resp.text();
+            error(await resp.text());
             return false;
         }
     }
@@ -177,9 +178,6 @@
     <title>Umbrella – {t('task')}: {task?.name}</title>
 </svelte:head>
 
-{#if error}
-<span class="error">{error}</span>
-{/if}
 {#if task}
 <div class={`task grid2 prio_${task.total_prio} p${Math.floor(task.total_prio/10)*10} p${task.total_prio % 10}`} >
     {#if project}

frontend/src/routes/user/EditUser.svelte

@@ -2,9 +2,10 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount }       from 'svelte';
 
-    import { api }           from '../../urls.svelte.js'
-    import { checkUser }     from '../../user.svelte.js';
-    import { t }             from '../../translations.svelte.js';
+    import { api }           from '../../urls.svelte'
+    import { error, yikes }  from '../../warn.svelte';
+    import { checkUser }     from '../../user.svelte';
+    import { t }             from '../../translations.svelte';
 
     let { user_id } = $props();
     let caption     = $state(t('save_object',{object:t('user')}));
@@ -60,8 +61,10 @@
         if (resp.ok){
             caption = t('saved');
             checkUser();
+            yikes();
             router.navigate('/user');
         } else {
+            error(await resp.text());
             caption = t('failed');
             sent = false;
         }

frontend/src/warn.svelte.js

@@ -0,0 +1,14 @@
+export const messages = $state({error:null,warning:null});
+
+export function error(msg){
+    messages.error = msg;
+}
+
+export function warn(msg){
+    messages.warning = msg;
+}
+
+export function yikes(){
+    messages.error = null;
+    messages.warn  = null;
+}