v0.15.0 - added a "play" and "stop" button

* added a "play" and "stop" button, to launch the task, and to stop tracking it
* these buttons are necessary in order to be able to tell if the task is currently being tracked or not
* had to add a volatile "isTracking" field on the task model
* had to deal with a vicious bug in Todo.svelte. The play / stop font awesome icon, conditionally rendered by svelte, was crashing the app. Had to add an additional container span. cf    sveltejs/svelte#5290 (comment) and https://stackoverflow.com/questions/58768701/sapper-how-do-i-fix-parentnode-is-null-when-navigating-away-from-a-page-with
* layout => moved the play / stop icon before the task title

Author: Plastique Brian

src/Todo.svelte

@@ -16,18 +16,50 @@ export let todo;
     text-align: right;
 }
 
+/* TODO: messy styles => may be cleaned later maybe. Just did what I needed.. class below
+   to align the play/stop button with the title... */
+.task-title {
+    /* vertical-align: middle; */
+    display: flex;
+    /* align-items: center; */
+    align-items: stretch;
+}
+
 .modify-duration-button {
     color: hsl(14, 100%, 53%);
     display: none;
 }
+
+.stop-button {
+    height: 100%;
+    margin-right: 10px;
+}
 </style>
 <!-------------------------------------------------------------------------------->
 <!---------------                 LAYOUT OF A TASK                ---------------->
 <!-------------------------------------------------------------------------------->
 <div transition:fade class="box">
     <div class="content columns is-multiline is-mobile">
-        <div class="{'done-' + todo.done} column task-title is-5 py-0 is-clickable" on:click={()=> dispatch('switchTracking')}>
-            <strong>{todo.title}</strong>
+        <div class="{'done-' + todo.done} column task-title is-5 is-clickable" on:click={()=> dispatch('switchTracking')}>
+            {#if todo.isTracking}
+            <span class="task-title">
+                <!-- must keep this apparently useless span container => fixes conflict between
+                svelte registering the original span , and font awesome transforming it to an svg
+                https://github.com/sveltejs/svelte/issues/5290#issuecomment-691712604
+                https://stackoverflow.com/questions/58768701/sapper-how-do-i-fix-parentnode-is-null-when-navigating-away-from-a-page-with
+            -->
+            
+                <span class='stop-button fas fa-stop-circle has-text-danger is-size-5'></span>
+            
+                <strong>{todo.title}</strong>
+            </span>
+            {:else}
+            <span>
+                <span class='fas fa-play is-size-7'></span>
+                |
+                <strong>{todo.title}</strong>
+            </span>
+            {/if}
         </div>
         <div class="column task-more-info is-2 py-0 modal-button" data-target="my-modal">
             <span class="icon has-text-info">

src/TodoList.svelte

@@ -77,6 +77,12 @@
     }
   }
 
+  function getCurrentTask() {
+    console.log("current task:" + JSON.stringify(todos.find((task) => task._id === currentTaskTracking.taskId)));
+    return todos.find((task) => task._id === currentTaskTracking.taskId);
+  }
+
+
   /* const moreThanOneHourInSeconds = 3667;
   console.log(timeConvert(moreThanOneHourInSeconds)); */
 
@@ -140,6 +146,7 @@
     todos.forEach((todo) => {
       todo.duration = todo.durationForToday; // tmp TODO remove!!!!!!!!!!
       updateDurationToDisplay(todo);
+      todo.isTracking = false;
     });
 
     // get currentTaskTracking
@@ -153,6 +160,11 @@
 
     updateCurrentTaskTrackingDuration();
 
+    if (currentTaskTracking.isTracking) {
+      let currentTask = getCurrentTask();
+      currentTask.isTracking = true;      
+    }
+
     // launch the "eternal" timer that updates the display of the duration
     interval = setInterval(() => {
       updateCurrentTaskTrackingDuration();
@@ -239,6 +251,7 @@
       // updates the task duration
       previousTodo = todos.find((t) => t._id === currentTaskTracking.taskId);
       previousTodo.duration += durationSeconds;
+      previousTodo.isTracking = false;      
 
       // must save the tracking period we've just ended
       previousTodo.trackingByDate.push({
@@ -250,33 +263,45 @@
       // TODO => bug?? useless call ???? sendUpdateCurrentTaskTracking();
       // hack to update the array of todos in child Task.svelte,
       // in order to update this previousTodo display
-      todos = todos;
+      // todos = todos;
       console.log(previousTodo);
       sendUpdateTask(previousTodo);
     }
 
-    const currentTaskTitle = todos.find((t) => t._id === todoId).title;
+    const newTaskTracking = todos.find((t) => t._id === todoId);
 
     // if we were tracking the selected task of id todoId => just stop tracking
     if (currentTaskTracking.taskId == todoId) {
       currentTaskTracking = { ...NO_TASK_TRACKING };
-      console.log(`${getCurrentTimeString()}: stopped task '${currentTaskTitle}'`);
+      console.log(`${getCurrentTimeString()}: stopped task '${newTaskTracking.title}'`);
     } else {
       // else switch to selected task
       currentTaskTracking.isTracking = true;
       currentTaskTracking.taskId = todoId;
       currentTaskTracking.timeBeginTracking = Date.now() - 1000;
+      newTaskTracking.isTracking = true;
+      console.log(newTaskTracking);
+      console.log(`${getCurrentTimeString()}: switching to task '${newTaskTracking.title}'`);
     }
 
     updateCurrentTaskTrackingDuration();
-    sendUpdateCurrentTaskTracking();
-    console.log(`${getCurrentTimeString()}: switching to task '${currentTaskTitle}`);
+    sendUpdateCurrentTaskTracking();    
+
+    todos = todos; // hack
+console.log('switched to task:' + JSON.stringify(todos.find((t) => t._id === todoId)));
 
     interval = setInterval(() => {
       updateCurrentTaskTrackingDuration();
     }, 500);
   }
 
+  function switchTracking2(todoId) {
+    const newTaskTracking = todos.find((t) => t._id === todoId);
+      newTaskTracking.isTracking = true;
+      todos = todos;
+
+  }
+
   const createTodo = (title, done = false, duration = 0, enabled = true) => {
   // async function createTodo(title, done = false, duration = 0, enabled = true) {
     const newTodo = {
@@ -325,6 +350,7 @@
     vertical-align: top;
   } */
   .make-children-div-full-height {
+    display: flex;
     align-items: stretch; 
     /* a "flex" option apparently, needed to have the info header dv (the one with the nb of tasks) to be full height
        to align the text to the new task input field...