working on time list

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

frontend/src/routes/time/Index.svelte

@@ -1,9 +1,11 @@
 <script>
     import { onMount } from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
     import { api }     from '../../urls.svelte.js';
     import { t }       from '../../translations.svelte.js';
 
     let error = $state(null);
+    let router = useTinyRouter();
     let times = $state(null);
 
     async function loadTimes(){
@@ -16,6 +18,10 @@
         }
     }
 
+    function openTask(tid){
+        router.navigate(`task/${tid}/view`);
+    }
+
     onMount(loadTimes);
 </script>
 
@@ -34,14 +40,20 @@
             <td>
                 {time.start_time}…{time.end_time}
             </td>
+            <td>
+                {time.duration}&nbsp;h
+            </td>
             <td>
                 {time.subject}
             </td>
             <td>
-                {#each time.task_ids as tid}
-                {tid}&nbsp;
+                {#each Object.entries(time.tasks) as [tid,task]}
+                <a href="#" onclick={e => openTask(tid)}>{task}</a>
                 {/each}
             </td>
+            <td>
+                {t("state_"+time.state.name.toLowerCase())}
+            </td>
         </tr>
         {/each}
     </tbody>