implemented task/:id/view

frontend/src/App.svelte

@@ -20,6 +20,7 @@
     import User     from "./routes/user/User.svelte";
     import ViewDoc  from "./routes/document/View.svelte";
     import ViewPrj  from "./routes/project/View.svelte";
+    import ViewTask from "./routes/task/View.svelte";
 
     let translations_ready = $state(false);
     onMount(async () => {
@@ -51,6 +52,7 @@
             <Route path="/project/add"                 component={ProjectAdd} />
             <Route path="/project/:id/view"            component={ViewPrj} />
             <Route path="/search"                      component={Search} />
+            <Route path="/task/:id/view"               component={ViewTask} />
             <Route path="/user"                        component={User} />
             <Route path="/user/create"                 component={EditUser} />
             <Route path="/user/login"                  component={User} />

frontend/src/Components/ListTask.svelte

@@ -32,8 +32,9 @@
 
     function openTask(evt){
         evt.preventDefault();
-        //router.navigate(`/task/${task.id}/view`);
-        location.href = `https://umbrella.srsoftware.de/task/${task.id}/view`;
+        console.log('openTask(…)',evt,task);
+        router.navigate(`/task/${task.id}/view`);
+        //location.href = `https://umbrella.srsoftware.de/task/${task.id}/view`;
     }
 
     if (task.estimated_time){

frontend/src/routes/task/View.svelte

@@ -0,0 +1,121 @@
+<script>
+    import { t } from '../../translations.svelte.js';
+    import { onMount } from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    import TaskList from '../../Components/TaskList.svelte';
+
+    const router = useTinyRouter();
+    let { id } = $props();
+    let task = $state(null);
+    let project = $state(null);
+    let error = $state(null);
+    let children = $state(null);
+    let estimated_time = $state({sum:0});
+    let dummy = $derived(updateOn(id));
+
+    $effect(() => updateOn(id));
+
+    function updateOn(id){
+        loadTask();
+    }
+
+    async function loadChildren(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/list`;
+        var data = {
+            parent_task_id:+task.id,
+            show_closed: task.show_closed
+        };
+        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();
+        }
+    }
+
+    async function loadProject(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${task.project_id}`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            project = await resp.json();
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    async function loadTask(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/${id}`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            task = await resp.json();
+            error = null;
+            project = null;
+            children = null;
+            loadChildren();
+            if (task.project_id) loadProject();
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    function gotoProject(){
+        if (!project) return;
+        router.navigate(`/project/${project.id}/view`)
+    }
+
+    onMount(loadTask);
+</script>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+{#if task}
+<table>
+    <tbody>
+        {#if project}
+        <tr>
+            <th>{t('project')}</th>
+            <td class="project name" onclick={gotoProject}>{project.name}</td>
+        </tr>
+        {/if}
+        <tr>
+            <th>{t('task')}</th>
+            <td class="task name">{task.name}</td>
+        </tr>
+        {#if task.description.rendered}
+        <tr>
+            <th>{t('description')}</th>
+            <td class="task description">{@html task.description.rendered}</td>
+        </tr>
+        {/if}
+
+        {#if task.start_date}
+        <tr>
+            <th>{t('start_date')}</th>
+            <td class="task start date">{task.start_date}</td>
+        </tr>
+        {/if}
+        {#if task.due_date}
+        <tr>
+            <th>{t('due_date')}</th>
+            <td class="task due date">{task.due_date}</td>
+        </tr>
+        {/if}
+        {#if children}
+        <tr>
+            <th>{t('subtasks')}</th>
+            <td class="task children">
+                <TaskList tasks={children} {estimated_time} />
+            </td>
+        </tr>
+        {/if}
+    </tbody>
+</table>
+{/if}