refactored timetracking to only use client-supplied times

frontend/src/Components/Menu.svelte

@@ -2,10 +2,10 @@
 import { onDestroy, onMount }       from 'svelte';
 import { useTinyRouter } from 'svelte-tiny-router';
 
-import { api }           from '../urls.svelte.js';
 import { logout, user }  from '../user.svelte.js';
 import { t }             from '../translations.svelte.js';
-import { timetrack }     from '../user.svelte.js';
+
+import TimeRecorder from './TimeRecorder.svelte';
 
 let key = $state(null);
 const router  = useTinyRouter();
@@ -30,56 +30,12 @@ function go(path){
     return false;
 }
 
-function msToTime(ms) {
-    const days = Math.floor(ms / (24 * 60 * 60 * 1000));
-    ms %= 24 * 60 * 60 * 1000;
-    const hours = Math.floor(ms / (60 * 60 * 1000));
-    ms %= 60 * 60 * 1000;
-    const minutes = Math.floor(ms / (60 * 1000));
-    ms %= 60 * 1000;
-    const seconds = Math.floor(ms / 1000);
-
-    let daysStr = days > 0 ? padTo2Digits(days) + ':' : '';
-    return `${daysStr}${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(seconds)}`;
-}
-
-function padTo2Digits(num) {
-    return num.toString().padStart(2, '0');
-}
-
 async function search(e){
     e.preventDefault();
     router.navigate(`/search?key=${key}`);
     return false;
 }
 
-async function stopTrack(){
-    if (timetrack.running.id){
-        const url = api(`time/${timetrack.running.id}/stop`);
-        const res = await fetch(url,{credentials:'include'});
-        if (res.ok){
-            timetrack.running = null;
-            timetrack.elapsed = null;
-            timetrack.start   = null;
-            router.navigate('/time');
-        }
-    }
-}
-
-let interval = null;
-
-$effect(() => {
-    if (timetrack.running) {
-        console.log('effect!');
-        timetrack.start = Date.parse(timetrack.running.start_time);
-        interval = setInterval(() => { timetrack.elapsed = msToTime(Date.now() - timetrack.start); },1000);
-    } else {
-        clearInterval(interval);
-        timetrack.elapsed = null;
-        interval = null;
-    }
-});
-
 onMount(fetchModules);
 
 onDestroy(() => {
@@ -113,9 +69,5 @@ onDestroy(() => {
     {#if user.name }
     <a onclick={logout}>{t('logout')}</a>
     {/if}
-    {#if timetrack.running}
-    <span class="timetracking">{timetrack.elapsed} {timetrack.running.subject}
-        <button onclick={stopTrack} title={t('stop')} class="symbol"></button>
-    </span>
-    {/if}
+    <TimeRecorder />
 </nav>

frontend/src/Components/TimeRecordEditor.svelte

@@ -1,6 +1,8 @@
 <script>
+    import { display }    from '../time.svelte.js';
     import { t }          from '../translations.svelte.js';
     import MarkdownEditor from './MarkdownEditor.svelte';
+    import TimeStampInput from './TimeStampInput.svelte';
 
     let { record = null, onSet = time => {} } = $props();
 
@@ -20,11 +22,11 @@
     </label>
     <label>
         {t('start')}
-        <input type="datetime-local" bind:value={record.start_time} />
+        <TimeStampInput bind:timestamp={record.start_time} />
     </label>
     <label>
         {t('end')}
-        <input type="datetime-local" bind:value={record.end_time} />
+        <TimeStampInput bind:timestamp={record.end_time} />
     </label>
     <label>
         {t('description')}

frontend/src/Components/TimeRecorder.svelte

@@ -0,0 +1,55 @@
+<script>
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    import { api }           from '../urls.svelte';
+    import { t }             from '../translations.svelte';
+    import { msToTime, now } from '../time.svelte';
+    import { timetrack }     from '../user.svelte';
+
+    let interval = null;
+    const router  = useTinyRouter();
+
+    async function stopTrack(){
+        if (timetrack.running.id){
+            const url = api(`time/${timetrack.running.id}/stop`);
+            const resp = await fetch(url,{
+                credentials : 'include',
+                method      : 'POST',
+                body        : now()
+            });
+            if (resp.ok){
+                timetrack.running = null;
+                timetrack.elapsed = null;
+                timetrack.start   = null;
+                go();
+            }
+        }
+    }
+
+    function go(){
+        router.navigate('/time');
+    }
+
+    function updateElapsed(){
+        timetrack.elapsed = msToTime(Date.now() - timetrack.start);
+    }
+
+    $effect(() => {
+        if (timetrack.running) {
+            timetrack.start = new Date(timetrack.running.start_time*1000);
+            interval = setInterval(updateElapsed,1000);
+        } else {
+            clearInterval(interval);
+            timetrack.elapsed = null;
+            interval = null;
+        }
+    });
+</script>
+
+
+{#if timetrack.running}
+<span class="timetracking">
+    <span onclick={go} >{timetrack.running.subject} {#if timetrack.elapsed}({timetrack.elapsed}){/if}</span>
+    <button onclick={stopTrack} title={t('stop')} class="symbol"></button>
+</span>
+{/if}

frontend/src/Components/TimeStampInput.svelte

@@ -0,0 +1,16 @@
+<script>
+    import { display, to_secs } from '../time.svelte.js';
+    let { timestamp = $bindable() } = $props();
+
+    let datetime = $state(null);
+
+    $effect(() => {
+        datetime = display(timestamp);
+    });
+
+    $effect(() => {
+         timestamp = to_secs(datetime);
+    });
+</script>
+
+<input type="datetime-local" bind:value={datetime} />