Implement tasks for trackers;

css/app.css

@@ -222,3 +222,15 @@ nav, .card {
     bottom: 0;
     left: 0;
 }
+
+.finished-task {
+    text-decoration: line-through;
+}
+
+#trackerTasksModal a li {
+    color: black !important;
+}
+
+#trackerTasksModal input[type=range] {
+    width: 100%;
+}

index.html

@@ -92,6 +92,13 @@
                                                     </button>
                                                 </div>
 
+                                                <div class="col-md-12">
+                                                    <button type="button" class="btn btn-primary ticket-action-button"
+                                                            @click="openTasksForTracker(ticket)" >
+                                                        <i class="fas fa-clipboard-check"></i>
+                                                    </button>
+                                                </div>
+
                                                 <div class="col-6">
                                                     <button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"
                                                             @click="archiveTracker(ticketIndex)" title="Archivieren">
@@ -398,6 +405,70 @@
         </div>
     </div>
 
+    <!-- Tasks Modal -->
+    <div class="modal modal-fullscreen fade"
+         v-if="selectedTracker"
+         id="trackerTasksModal"
+         tabindex="-1"
+         role="dialog"
+         aria-labelledby="showTrackerTasksModal"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="fas fa-clock"></i> Tasks für {{ selectedTracker.number }}</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <input type="text" id="newTaskInput" class="form-control"
+                               v-model="newTaskInput" placeholder="Neuer Task" v-on:keyup.enter="addTask()"/>
+                    </div>
+                    <ul class="list-group" v-if="selectedTracker.tasks && selectedTracker.tasks.length > 0">
+                        <template v-for="(task, taskIndex) in selectedTracker.tasks">
+                            <li class="list-group-item" v-if="!task.done">
+                                <span class="float-end">
+                                    <a href="javascript:">
+                                        <i class="fas fa-trash" @click="deleteTask(taskIndex)"></i>
+                                    </a>
+                                </span>
+                                <a href="javascript:" @click="toggleTask(task)">
+                                    <i class="far fa-square"></i>
+                                </a> {{ task.name }}
+                                <div class="form-group">
+                                    <div class="float-end">
+                                        {{ task.percentDone }}% erledigt
+                                    </div>
+                                    <input type="range"
+                                           class="range range-success range-tasks"
+                                           min="0"
+                                           max="100"
+                                           v-model="task.percentDone"
+                                           @change="checkForCompletionOfTask(task)">
+                                </div>
+                            </li>
+                        </template>
+                    </ul>
+                    <br/>
+                    <ul class="list-group" v-if="selectedTracker.tasks && selectedTracker.tasks.length > 0">
+                        <template v-for="(task, taskIndex) in selectedTracker.tasks">
+                            <li class="list-group-item" v-if="task.done">
+                                <span class="float-end">
+                                    <a href="javascript:">
+                                        <i class="fas fa-trash" @click="deleteTask(taskIndex)"></i>
+                                    </a>
+                                </span>
+                                <a href="javascript:" @click="toggleTask(task)">
+                                    <i class="far fa-check-square"></i>
+                                </a> <span class="finished-task">{{ task.name }}</span>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Archive Modal -->
     <div class="modal modal-fullscreen fade" id="showArchivedTicketsModal" tabindex="-1" role="dialog"
          aria-labelledby="showArchivedTicketsModalLabel"

js/app.js

@@ -53,7 +53,8 @@ const TimeTrack = {
             snippets: [],
             codeMirrors: [],
             customBookingValue: '',
-            customDateForPastDays: ''
+            customDateForPastDays: '',
+            newTaskInput: ''
         }
     },
     mounted() {
@@ -466,14 +467,22 @@ const TimeTrack = {
                 console.log(error);
             });
         },
-        showHistoryForTracker(ticket) {
-            this.selectedTracker = ticket;
+        showHistoryForTracker(tracker) {
+            this.selectedTracker = tracker;
             this.$forceUpdate();
             setTimeout(() => {
                 let historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
                 historyModal.toggle();
             }, 50);
         },
+        openTasksForTracker(tracker) {
+            this.selectedTracker = tracker;
+            this.$forceUpdate();
+            setTimeout(() => {
+                let tasksModal = new bootstrap.Modal(document.getElementById('trackerTasksModal'));
+                tasksModal.toggle();
+            }, 50);
+        },
         showCustomBookingForTracker(ticket) {
             this.selectedTracker = ticket;
             this.$forceUpdate();
@@ -677,10 +686,52 @@ const TimeTrack = {
         tellJoke(category, language = 'en') {
             let jokeService = new JokeService(category ?? undefined, language);
             jokeService.tell();
+        },
+        addTask() {
+            if (this.newTaskInput.length <= 0 || this.newTaskInput.trim() === '') {
+                return false;
+            }
+
+            if (!this.selectedTracker.tasks) {
+                this.selectedTracker.tasks = [];
+            }
+
+            this.selectedTracker.tasks.push({
+                name: this.newTaskInput,
+                done: false,
+                created: moment(),
+                percentDone: 0,
+                finished: null
+            });
+
+            this.newTaskInput = '';
+            this.updateStorage();
+        },
+        deleteTask(taskIndex) {
+            this.selectedTracker.tasks.splice(taskIndex, 1)
+            this.updateStorage();
+        },
+        toggleTask(task) {
+            task.done = !task.done;
+
+            if (task.done) {
+                task.finished = moment();
+                task.percentDone = 100;
+            } else {
+                task.finished = null;
+                task.percentDone = 0;
+            }
+
+            this.updateStorage();
+        },
+        checkForCompletionOfTask(task) {
+            task.done = task.percentDone == 100;
+            this.$forceUpdate();
+            this.updateStorage();
         }
     },
     beforeDestroy() {
-        this.stopTrackingTicket();
+        this.stopActiveTracker();
     },
     watch: {
         publicDB() {