implemented timetracking as kanban drag target

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

frontend/src/Components/TimeRecorder.svelte

@@ -4,12 +4,47 @@
 
     import { api }           from '../urls.svelte';
     import { t }             from '../translations.svelte';
+    import { error, yikes }  from '../warn.svelte';
     import { msToTime, now } from '../time.svelte';
     import { timetrack }     from '../user.svelte';
 
     let interval = null;
     const router  = useTinyRouter();
 
+    async function addTime(task_id){
+        const url  = api(`time/track_task/${task_id}`);
+        const resp = await fetch(url,{
+            credentials : 'include',
+            method      : 'POST',
+            body        : now()
+        }); // create new time or return time with assigned tasks
+        if (resp.ok) {
+            const track = await resp.json();
+            timetrack.running = track;
+            yikes();
+        } else {
+            error(resp);
+        }
+    }
+
+
+    function go(){
+        router.navigate('/time');
+    }
+
+    function ondragover(ev){
+        ev.preventDefault();
+    }
+
+    function ondragleave(ev){
+        ev.preventDefault();
+    }
+
+    function ondrop(ev){
+        let task_id = ev.dataTransfer.getData('task');
+        if (task_id) addTime(task_id);
+    }
+
     async function stopTrack(){
         if (timetrack.running.id){
             const url = api(`time/${timetrack.running.id}/stop`);
@@ -28,9 +63,6 @@
         }
     }
 
-    function go(){
-        router.navigate('/time');
-    }
 
     function updateElapsed(){
         timetrack.elapsed = msToTime(Date.now() - timetrack.start);
@@ -54,7 +86,7 @@
 
 
 {#if timetrack.running}
-<span class="timetracking">
+<span class="timetracking" {ondrop} {ondragover} {ondragleave} >
     <span onclick={go} >{timetrack.running.subject} {#if timetrack.elapsed}({timetrack.elapsed}){/if}</span>
     <button onclick={stopTrack} title={t('stop')} class="symbol"></button>
 </span>

frontend/src/routes/project/Kanban.svelte

@@ -207,6 +207,11 @@
         return false;
     }
 
+    function ondragstart(ev, task){
+        dragged = task;
+        ev.dataTransfer.setData("task",task.id);
+    }
+
     function openTask(task_id){
         window.open(`/task/${task_id}/view`, '_blank').focus();
     }
@@ -306,7 +311,7 @@
             <div class={['state_'+state, is_custom(state) ? '':'state_custom' ,highlight.user == u.id && highlight.state == state ? 'highlight':'']} ondragover={ev => hover(ev,u.id,state)} ondragleave={e => delete highlight.user} ondrop={ev => drop(u.id,state)} >
                 {#each Object.values(tasks[u.id][state]).sort(byName) as task}
                     {#if !filter || task.name.toLowerCase().includes(filter) || (task.tags && task.tags.filter(tag => tag.toLowerCase().includes(filter)).length)}
-                    <Card onclick={e => openTask(task.id)} ondragstart={ev => dragged=task} {task} tag_colors={project.tag_colors} />
+                    <Card onclick={e => openTask(task.id)} ondragstart={ev => ondragstart(ev,task)} {task} tag_colors={project.tag_colors} />
                     {/if}
                 {/each}
                 <div class="add_task" onclick={ev => show_task_form(project.id,u.id,+state)}>

frontend/src/translations.svelte.js

@@ -21,4 +21,4 @@ export function t(key,args = {}){
     }
     for (var key of Object.keys(args)) set = set.replace(`{${key}}`,args[key]);
     return set;
-}
+}

translations/src/main/resources/en.json

@@ -329,7 +329,7 @@
   "saved": "saved",
   "save_object": "save {object}",
   "search": "search",
-  "searching…": "searhcing…",
+  "searching…": "searching…",
   "select a new parent for {entity}": "select a new parent for '{entity}'",
   "select_company" : "select on of you companies:",
   "select_customer": "select customer",
@@ -380,7 +380,7 @@
   "subtask": "subtask",
   "subtasks": "subtasks",
   "succeeding_document": "succeeding document",
-  "sum external";"sum of external positions",
+  "sum external":"sum of external positions",
   "sum_of_records": "sum of records",
   "sums": "sums",
 

web/src/main/resources/web/css/bloodshed.css

@@ -356,6 +356,10 @@ span.timetracking {
     grid-column-end: span 2;
 }
 
+.markdown svg{
+	display: block;
+}
+
 .editable:hover{
     border: 1px dotted;
 }

web/src/main/resources/web/css/default.css

@@ -450,6 +450,10 @@ span.timetracking {
     grid-column-end: span 2;
 }
 
+.markdown svg{
+	display: block;
+}
+
 .editable:hover{
     border: 1px dotted;
 }

web/src/main/resources/web/css/winter.css

@@ -449,6 +449,10 @@ span.timetracking {
     grid-column-end: span 2;
 }
 
+.markdown svg{
+	display: block;
+}
+
 .editable:hover{
     border: 1px dotted;
 }