added button to task/xx/view, that allows temporarily display of subtasks

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

frontend/src/Components/StateSelector.svelte

@@ -3,6 +3,14 @@
     import {api}     from '../urls.svelte.js';
     import {t}       from '../translations.svelte.js';
 
+    const icons = {
+        10 : '',
+        20 : '',
+        40 : '',
+        60 : '',
+        100: ''
+    }
+
     let {
         caption    = t('select_state'),
         selected   = $bindable(0),
@@ -12,9 +20,20 @@
 </script>
 
 {#if project?.allowed_states}
-<select bind:value={selected} onchange={() => onchange(selected)}>
+<!--<select bind:value={selected} onchange={() => onchange(selected)}>
     {#each Object.entries(project.allowed_states) as [code,name]}
     <option value={+code}>{code%10?name:t('state_'+name.toLowerCase())}</option>
     {/each}
-</select>
+</select>-->
+<span class="states">
+    {#each Object.entries(project.allowed_states) as [code,name]}
+    <button onclick={e => onchange(code)} title={code%10?name:t('state_'+name.toLowerCase())} class={selected == code?'active':null}>
+        {#if icons[code]}
+        <span class="symbol">{icons[code]}</span>
+        {:else}
+        {code%10?name:t('state_'+name.toLowerCase())}
+        {/if}
+    </button>
+    {/each}
+</span>
 {/if}

frontend/src/routes/task/View.svelte

@@ -24,6 +24,7 @@
     let project        = $state(null);
     const router       = useTinyRouter();
     let showSettings   = $state(router.fullPath.endsWith('/edit'));
+    let show_closed    = $state(false);
     let task           = $state(null);
 
     $effect(() => updateOn(id));
@@ -79,7 +80,7 @@
         const url  = api('task/list');
         const data = {
             parent_task_id : +task.id,
-            show_closed    : task.show_closed
+            show_closed    : show_closed
         };
         const resp = await fetch(url,{
             credentials : 'include',
@@ -108,10 +109,11 @@
         const url  = api(`task/${id}`);
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
-            task     = await resp.json();
             yikes();
+            task     = await resp.json();
             project  = null;
             children = null;
+            if (task.show_closed) show_closed = true;
             loadChildren();
             if (task.project_id) loadProject();
             if (task.parent_task_id) loadParent();
@@ -131,6 +133,13 @@
         }
     }
 
+    function showClosed(){
+        show_closed = !show_closed;
+        children = null;
+        loadChildren();
+    }
+
+
     function showPrjFiles(){
         var url = `/files/project/${project.id}`;
         window.open(url, '_blank').focus();
@@ -292,6 +301,9 @@
     <div>
         {t('subtasks')}
         <button onclick={addChild} >{t('add_object',{object:t('subtask')})}</button>
+        {#if !show_closed}
+        <button onclick={showClosed}>{t('display_closed')}</button>
+        {/if}
     </div>
     <div class="children">
         {#if children}

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

@@ -130,6 +130,10 @@ tr:hover a{
     color: orange;
 }
 
+.states .active{
+    background: yellow;
+}
+
 .taglist .tag{
     border-color: orange;
 }