implemented deletion of times

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

frontend/src/Components/TimeRecordEditor.svelte

@@ -4,7 +4,17 @@
     import MarkdownEditor from './MarkdownEditor.svelte';
     import TimeStampInput from './TimeStampInput.svelte';
 
-    let { record = null, onSet = time => {} } = $props();
+    let { record = null, onAbort = () => {}, onDrop = time_id => {}, onSet = time => {} } = $props();
+
+    function cancel(e){
+        e.preventDefault();
+        onAbort();
+    }
+
+    function drop(e){
+        e.preventDefault();
+        if (confirm(t('confirm_delete',{element:record.subject}))) onDrop(record.id);
+    }
 
     function onsubmit(e){
         e.preventDefault();
@@ -14,7 +24,7 @@
 
 {#if record}
 <form {onsubmit}>
-<fieldset>
+<fieldset class="time record">
     <legend>{t('edit_object',{object:t('record')})}</legend>
     <label>
         {t('subject')}
@@ -33,6 +43,8 @@
         <MarkdownEditor simple={true} bind:value={record.description} />
     </label>
     <button type="submit">{t('save')}</button>
+    <button class="cancel" onclick={cancel} >{t('cancel')}</button>
+    <button class="delete" onclick={drop} >{t('delete')}</button>
 </fieldset>
 </form>
 {record.description.source}

frontend/src/routes/time/Index.svelte

@@ -64,6 +64,24 @@
         }
     }
 
+    function onAbort(){
+        detail = null;
+    }
+
+    async function onDrop(time_id){
+        const url = api(`time/${time_id}`);
+        const res = await fetch(url,{
+            credentials:'include',
+            method:'DELETE'
+        });
+        if (res.ok){
+            delete times[time_id];
+            error = false;
+        } else {
+            error = await res.text();
+        }
+    }
+
     function openTask(tid){
         router.navigate(`/task/${tid}/view`);
     }
@@ -148,7 +166,7 @@
             {/if}
             {#if detail == time.id}
             <td colspan="5">
-                <TimeEditor record={time} onSet={update} />
+                <TimeEditor record={time} {onAbort} {onDrop} onSet={update} />
             </td>
             {:else}
             <td class="start_end" onclick={e => toggleSelect(time.id)}>