working on project view

frontend/src/Components/ListTask.svelte

@@ -0,0 +1,56 @@
+<script>
+    import { t } from '../translations.svelte.js';
+    import { onMount } from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    import TaskList from './TaskList.svelte';
+
+    const router = useTinyRouter();
+    let { estimated_time, task } = $props();
+    let children = $state(null);
+    let error = $state(null);
+
+    async function loadChildren(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/list`;
+        var data = {parent_task_id:+task.id};
+        if (task.show_closed) data.show_closed = true;
+        const resp = await fetch(url,{
+            credentials:'include',
+            method:'POST',
+            body:JSON.stringify(data)
+        });
+        if (resp.ok){
+            children = await resp.json();
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    function openTask(evt){
+        evt.preventDefault();
+        router.navigate(`/task/${task.id}/view`);
+    }
+
+    if (task.estimated_time){
+        estimated_time.sum += task.estimated_time;
+        console.log(estimated_time)
+    }
+
+    onMount(loadChildren);
+</script>
+
+<li>
+    <span onclick={openTask} class={task.status.name.toLowerCase()}>
+    {task.name}
+    {#if task.estimated_time}
+        <span class="error">({+task.estimated_time}&nbsp;h)</span>
+    {/if}
+    </span>
+    {#if error}
+    <span class="error">{error}</span>
+    {/if}
+    {#if children}
+    <TaskList tasks={children} bind:estimated_time={estimated_time} />
+    {/if}
+</li>

frontend/src/Components/TaskList.svelte

@@ -1,7 +1,8 @@
 <script>
     import { t } from '../translations.svelte.js';
+    import ListTask from './ListTask.svelte';
 
-    let { tasks } = $props();
+    let { estimated_time, tasks } = $props();
 
     let sortedTasks = $derived.by(() => Object.values(tasks).sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -10,6 +11,6 @@
 
 <ul>
     {#each sortedTasks as task}
-    <li>{task.name}</li>
+    <ListTask {task} bind:estimated_time={estimated_time} />
     {/each}
 </ul>

frontend/src/routes/project/View.svelte

@@ -7,6 +7,7 @@
     let project = $state(null);
     let error = $state(null);
     let tasks = $state(null);
+    let estimated_time = $state({sum:0});
 
     async function loadProject(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${id}`;
@@ -67,15 +68,17 @@
             <th>{t('description')}</th>
             <td>{@html project.description.rendered}</td>
         </tr>
+        {#if estimated_time.sum}
         <tr>
             <th>{t('estimated_time')}</th>
-            <td class="error">TODO</td>
+            <td>{estimated_time.sum} h</td>
         </tr>
+        {/if}
         <tr>
             <th>{t('tasks')}</th>
             <td>
                 {#if tasks}
-                <TaskList {tasks} />
+                <TaskList {tasks} bind:estimated_time={estimated_time} />
                 {/if}
             </td>
         </tr>