implemented selection of timetrack entries and display of sum of durations of selected records

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

frontend/src/Components/TimeRecordEditor.svelte

@@ -14,6 +14,10 @@
 <form {onsubmit}>
 <fieldset>
     <legend>{t('edit_object',{object:t('record')})}</legend>
+    <label>
+        {t('subject')}
+        <input type="text" bind:value={record.subject} />
+    </label>
     <label>
         {t('start')}
         <input type="datetime-local" bind:value={record.start_time} />
@@ -22,10 +26,6 @@
         {t('end')}
         <input type="datetime-local" bind:value={record.end_time} />
     </label>
-    <label>
-        {t('subject')}
-        <input type="text" bind:value={record.subject} />
-    </label>
     <label>
         {t('description')}
         <MarkdownEditor simple={true} bind:value={record.description} />

frontend/src/routes/time/Index.svelte

@@ -13,7 +13,10 @@
     let sortedTimes = $derived.by(() => Object.values(times).sort((b, a) => a.start_time.localeCompare(b.start_time)));
     let selected = $state({});
     let ranges = {};
-    let timeMap = $derived.by(() => {
+    let timeMap = $derived.by(calcYearMap);
+    let selectionSum = $derived(sortedTimes.filter(time => selected[time.id]).map(time => time.duration).reduce((acc, a) => acc + a, 0));
+
+    function calcYearMap(){
         let result = {
             months : {},
             years  : {}
@@ -42,17 +45,10 @@
                 monthCount = 0;
                 monthIndex = idx;
             }
-            monthCount +=1;            
+            monthCount +=1;
         }
         if (yearCount)  result.years[yearIndex] = yearCount;
         if (monthCount) result.months[monthIndex] = monthCount;
-        console.log(result);
-        return result;
-    });
-
-    function calcYearMap(){
-        let result = Object.values(times).length;
-        console.log({result:result});
         return result;
     }
 
@@ -115,27 +111,22 @@
     onMount(loadTimes);
 </script>
 
-<style>
-    td { vertical-align: top; }
-    .year, .month{
-        border: 1px solid;
-    }
-    .selected td:not(.year):not(.month){
-        background: navy;
-    }
-</style>
-
 <h1>{t('timetracking')}</h1>
 {#if error}
 <span class="error">{error}</span>
 {/if}
 {#if times}
+{#if selectionSum}
+<div class="timetracks sum">
+    {t('sum_of_records')}: <span>{selectionSum.toFixed(3)}&nbsp;{t('hours')}</span>
+</div>
+{/if}
 <table class="timetracks">
     <thead>
         <tr>
             <th>{t('year')}</th>
             <th>{t('month')}</th>
-            <th>{t('start_end')}</th>
+            <th>{t('start')}…{t('end')}</th>
             <th>{t('duration')}</th>
             <th>{t('subject')}</th>
             <th>{t('tasks')}</th>
@@ -184,4 +175,4 @@
         {/each}
     </tbody>
 </table>
-{/if}
+{/if}