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}