implemented editing of times

frontend/src/Components/DateTimeEditor.svelte

@@ -0,0 +1,24 @@
+<script>
+
+    let { onSet = (dateTime) => {}, value = ' ' } = $props();
+
+    let date = $state(value.split(' ')[0]);
+    let time = $state(value.split(' ')[1]);
+
+    console.log({date:date,time:time,value:value});
+
+    function handleSubmit(e){
+        e.preventDefault();
+        onSet(`${date} ${time}`);
+    }
+</script>
+
+<style>
+    button{ display: none }
+</style>
+
+<form onsubmit={handleSubmit} >
+    <input type="date" bind:value={date} />
+    <input type="time" bind:value={time} />
+    <button type="submit">ok</button>
+</form>

frontend/src/Components/LineEditor.svelte

@@ -3,14 +3,15 @@
     import { t } from '../translations.svelte.js';
 
     let {
-        editable = false,
+        simple   = false,
+        editable = simple,
         onclick  = evt => { startEdit() },
         onSet    = newVal => {return true;},
         type     = 'div',
         value    = $bindable(null)
     } = $props();
 
-    let editing   = $state(false);
+    let editing   = $state(simple);
     let editValue = value;
     let start     = 0;
 
@@ -64,6 +65,7 @@
     }
 
     activeField.subscribe((val) => resetEdit());
+    if (simple) startEdit();
 </script>
 
 <style>

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>