working on the task index page

next:
* creating links to open/close/abort tasks
* link to task/X/edit should show settings

frontend/src/App.svelte

@@ -70,6 +70,7 @@
         <Route path="/tags/use/:tag"               component={TagUses} />
         <Route path="/task"                        component={TaskList} />
         <Route path="/task/:parent_task_id/add_subtask" component={AddTask} />
+        <Route path="/task/:id/edit"               component={ViewTask} />
         <Route path="/task/:id/view"               component={ViewTask} />
         <Route path="/user"                        component={User} />
         <Route path="/user/create"                 component={EditUser} />

frontend/src/routes/task/Index.svelte

@@ -1,15 +1,26 @@
 <script>
-    import { onMount } from 'svelte';
+    import { onMount }       from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }     from '../../urls.svelte.js';
+    import { api }           from '../../urls.svelte.js';
-    import { t }       from '../../translations.svelte.js';
+    import { t }             from '../../translations.svelte.js';
 
     let error = $state(null);
+    let projects = $state({});
+    let router = useTinyRouter();
     let tasks = $state(null);
 
+    function edit(tid){
+        router.navigate(`/task/${tid}/edit`);
+    }
+
+    function go(module, id){
+        router.navigate(`/${module}/${id}/view`);
+    }
+
     async function load(){
-        const url  = api('task');
+        let url  = api('task');
-        const resp = await fetch(url,{credentials:'include'});
+        let resp = await fetch(url,{credentials:'include'});
         let project_ids = {};
         if (resp.ok){
             tasks = await resp.json();
@@ -17,8 +28,16 @@
         } else {
             error = await resp.text();
         }
-        project_ids = Object.keys(project_ids);
+        for (let pid of Object.keys(project_ids)){
-        console.log(project_ids);
+            url  = api(`project/${pid}`);
+            resp = await fetch(url,{credentials:'include'});
+            if (resp.ok){
+                projects[pid] = await resp.json();
+            } else {
+                error = await resp.text();
+            }
+        }
+        console.log(projects);
     }
 
     onMount(load);
@@ -33,16 +52,40 @@
     <table>
         <thead>
             <tr>
-                <th>{t('title')}</th>
+                <th>{t('name')}</th>
-                <th>{t('project')} / {t('parent_task')}</th>
+                <th>{t('project')} ({t('parent_task')})</th>
+                <th>{t('state')}</th>
+                <th>{t('start_date')}</th>
+                <th>{t('due_date')}</th>
+                <th>{t('actions')}</th>
             </tr>
         </thead>
         <tbody>
             {#each Object.entries(tasks) as [tid,task]}
             <tr>
-                <td>{task.name}</td>
+                <td onclick={() => go('task',tid)}>{task.name}</td>
-                <td>{task.project_id} {task.parent_task_id?tasks[task.parent_task_id]?.name:''}</td>
+                <td>
-                <td>TODO: load projects</td>
+                    <a href="#" onclick={() => go('project',task.project_id)}> {projects[task.project_id]?.name}</a>
+                    {#if task.parent_task_id}
+                    (<a href="#" onclick={() => go('task',task.parent_task_id)}>{tasks[task.parent_task_id]?.name}</a>)
+                    {/if}
+                </td>
+                <td>
+                    {task.status % 10 ? projects[task.project_id]?.allowed_states[task.status] : t('state_'+projects[task.project_id]?.allowed_states[task.status]?.toLowerCase())}
+                </td>
+                <td>
+                    {task.start_date}
+                </td>
+                <td>
+                    {task.due_date}
+                </td>
+                <td>
+                    <button class="symbol" onclick={() => edit(task.id)} title={t('edit')} ></button>
+                    <button class="symbol" onclick={() => postpone(task.id)} title={t('postpone')} ></button>
+                    <button class="symbol" onclick={() => start(task.id)} title={t('start')} ></button>
+                    <button class="symbol" onclick={() => complete(task.id)} title={t('complete')} ></button>
+                    <button class="symbol" onclick={() => abort(task.id)} title={t('abort')} ></button>
+                </td>
             </tr>
             {/each}
         </tbody>

translations/src/main/resources/de.json

@@ -223,6 +223,7 @@
   "tag_uses": "Verwendung des Tags „{tag}“",
   "tags": "Tags",
   "task": "Aufgabe",
+  "task_list": "Aufgabenliste",
   "tasks": "Aufgaben",
   "tax_id": "Steuernummer",
   "tax_rate": "Steuersatz",