implemented editing of times

frontend/src/routes/time/Index.svelte

@@ -4,9 +4,14 @@
     import { api }     from '../../urls.svelte.js';
     import { t }       from '../../translations.svelte.js';
 
+    import DateTimeEditor from '../../Components/DateTimeEditor.svelte';
+    import LineEditor     from '../../Components/LineEditor.svelte';
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+
     let error = $state(null);
     let router = useTinyRouter();
     let times = $state(null);
+    let detail = $state(null);
 
     async function loadTimes(){
         const url  = api('time');
@@ -22,9 +27,32 @@
         router.navigate(`task/${tid}/view`);
     }
 
+    async function update(tid,field,newVal){
+        times[tid][field] = newVal;
+        detail = null;
+        const url = api(`time/${tid}`);
+        const res = await fetch(url,{
+            credentials:'include',
+            method:'PATCH',
+            body:JSON.stringify(times[tid])
+        });
+        if (res.ok){
+            times[tid] = await res.json();
+            error = null;
+            return true;
+        } else {
+            error = await res.text();
+            return false;
+        }
+    }
+
     onMount(loadTimes);
 </script>
 
+<style>
+    td { vertical-align: top; }
+</style>
+
 <h1>{t('timetracking')}</h1>
 {#if error}
 <span class="error">{error}</span>
@@ -32,11 +60,32 @@
 {#if times}
 <table class="timetracks">
     <thead>
-
+        <tr>
+            <th>{t('start_end')}</th>
+            <th>{t('duration')}</th>
+            <th>{t('subject')}</th>
+            <th>{t('tasks')}</th>
+            <th>{t('state')}</th>
+        </tr>
     </thead>
     <tbody>
         {#each Object.entries(times) as [tid,time]}
+        {#if detail == tid}
         <tr>
+            <td>
+                <div>
+                    <DateTimeEditor value={time.start_time} onSet={dateTime => update(tid,'start_time',dateTime)} />
+                    …
+                    <DateTimeEditor value={time.end_time} onSet={dateTime => update(tid,'end_time',dateTime)} />
+                </div>
+            </td>
+            <td colspan="2">
+                <LineEditor     simple={true} value={time.subject} onSet={subject => update(tid,'subject',subject)} />
+                <MarkdownEditor simple={true} value={time.description} onSet={desc => update(tid,'description',desc)} />
+            </td>
+        </tr>
+        {:else}
+        <tr onclick={e => {detail = tid}}>
             <td class="start_end">
                 {time.start_time}{#if time.end_time}…{time.end_time}{/if}
             </td>
@@ -56,6 +105,7 @@
                 {t("state_"+time.state.name.toLowerCase())}
             </td>
         </tr>
+        {/if}
         {/each}
     </tbody>
 </table>