improved css, implemented setting task state directly in project tree

frontend/src/Components/ListTask.svelte

@@ -36,17 +36,24 @@
         router.navigate(`/task/${task.id}/view`);
     }
 
-    async function patchTask(newName){
-        console.log('patchTask('+newName+')');
+    async function patchTask(changeset){
         const url = api(`task/${task.id}`);
         const resp = await fetch(url,{
             credentials:'include',
             method: 'PATCH',
-            body: JSON.stringify({name:newName})
+            body: JSON.stringify(changeset)
         });
-        let ok = resp.ok;
-        console.log({ok:ok});
-        return ok;
+        if (resp.ok){
+            task = await resp.json();
+            return true;
+        } else {
+            error = await resp.text();
+            return false;
+        }
+    }
+
+    function setName(newName){
+        patchTask({name:newName});
     }
 
     if (task.estimated_time){
@@ -58,10 +65,16 @@
 </script>
 
 <li class="task {task.status.name.toLowerCase()}">
-    <LineEditor bind:value={task.name} onclick={openTask} editable={true} onSet={patchTask} type="span" />
+    <LineEditor bind:value={task.name} onclick={openTask} editable={true} onSet={setName} type="span" />
     {#if task.estimated_time}
     <span class="estimated_time">({+task.estimated_time}&nbsp;h)</span>
     {/if}
+    {#if task.status.code < 60}
+    <button class="symbol" title={t('complete')} onclick={() => patchTask({status:'COMPLETE'})}></button>
+    <button class="symbol" title={t('abort')} onclick={() => patchTask({status:'CANCELLED'})} ></button>
+    {:else}
+    <button class="symbol" title={t('do_open')} onclick={() => patchTask({status:'OPEN'})}></button>
+    {/if}
     {#if error}
     <span class="error">{error}</span>
     {/if}

frontend/src/routes/project/List.svelte

@@ -2,6 +2,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
+    import { api } from '../../urls.svelte.js';
 
     const router = useTinyRouter();
     let error = $state(null);
@@ -12,7 +13,7 @@
     let sortedProjects = $derived.by(() => Object.values(projects).sort((a, b) => a.name.localeCompare(b.name)));
 
     async function loadProjects(){
-        let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
+        let url = api('company/list');
         let resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             companies = await resp.json();
@@ -33,7 +34,7 @@
     }
 
     async function setState(pid,state_name){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${pid}`;
+        const url = api(`project/${pid}`);
         const resp = await fetch(url,{
             credentials:'include',
             method:'PATCH',

translations/src/main/resources/de.json

@@ -54,6 +54,7 @@
   "document": "Dokumente",
   "documents": "Dokumente",
   "do_login" : "anmelden",
+  "do_open" : "öffnen",
   "do_send" : "versenden",
   "double_click_to_edit": "Doppel-klicken zum Bearbeiten",
   "due_date": "Fälligkeitsdatum",

web/src/main/resources/web/css/default.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: "awesome";
-	src: url("../fontawesome-webfont.woff");
+	src: url("/fontawesome-webfont.woff");
 }
 
 a {
@@ -82,20 +82,20 @@ td, tr{
     background: rgba(0,0,0,0.7);
     backdrop-filter: blur(3px);
 }
-.task.cancelled > .name {
+.task.cancelled > span {
     text-decoration: line-through;
     color: gray;
 }
-.task.started > .name {
+.task.started > span {
     color: green;
 }
-.task.pending > .name {
+.task.pending > span {
     color: gray;
 }
-.task.complete > .name {
-   color: green;
+.task.complete > span {
+   color: forestgreen;
 }
-.task.complete > .name:before {
+.task.complete > span:before {
     content: "✓ ";
 }
 
@@ -116,8 +116,12 @@ td, tr{
   border-radius: 5px;
 }
 
-.project .name,
+.project:not(.list) .name,
 .task .name{
     font-size: 32px;
     font-weight: bold;
-}
+}
+
+.symbol{
+    padding: 1px;
+}