add general tasks;

src/App.vue

@@ -11,6 +11,7 @@
     <HistoryForTracker/>
     <CustomBookForTracker/>
     <TasksForTracker/>
+    <Tasks/>
     <History/>
     <Settings/>
 </template>
@@ -25,16 +26,18 @@ import TasksForTracker from "./views/TasksForTracker";
 import HistoryForTracker from "./views/HistoryForTracker";
 import CustomBookForTracker from "./views/CustomBookForTracker";
 import Settings from "./views/Settings";
+import Tasks from "./views/Tasks";
 
 export default {
     el: '#root',
     components: {
+        Tasks,
         Settings,
         CustomBookForTracker,
         HistoryForTracker,
         TasksForTracker,
         History,
-        Menu
+        Menu,
     },
     data() {
         return {

src/store/index.js

@@ -8,7 +8,8 @@ export default createStore({
             theme: 'materia'
         },
         trashed: {},
-        selectedTracker: {}
+        selectedTracker: {},
+        tasks: []
     },
     mutations: {
         loadSavedData(state) {
@@ -22,6 +23,11 @@ export default createStore({
                 state.archive = JSON.parse(storedArchive);
             }
 
+            let storedTasks = localStorage.getItem('tasks');
+            if (storedTasks !== null && storedTasks !== undefined) {
+                state.tasks = JSON.parse(storedTasks);
+            }
+
             let storedSettings = localStorage.getItem('settings');
             state.settings = storedSettings == null ? {
                 theme: '',
@@ -55,6 +61,9 @@ export default createStore({
             localStorage.setItem('trackers', JSON.stringify(state.trackers));
             localStorage.setItem('archive', JSON.stringify(state.archive));
         },
+        saveTasks(state) {
+            localStorage.setItem('tasks', JSON.stringify(state.tasks));
+        },
         saveSettings(state) {
             localStorage.setItem('settings', JSON.stringify(state.settings));
         },

src/views/Menu.vue

@@ -55,6 +55,17 @@
                 <i class="fas fa-history"></i>
             </a>
         </div>
+        <div class="left-menu-item">
+            <a type="button"
+               class="btn text-light bottom-menu-item"
+               data-bs-toggle="offcanvas"
+               data-bs-target="#tasksCanvas"
+               data-bs-placement="top"
+               style="background-color: beige;"
+               title="Tasks">
+                <<i class="fas fa-tasks"></i>
+            </a>
+        </div>
         <div class="left-menu-item">
             <a type="button"
                class="btn btn-dark text-light bottom-menu-item"

src/views/Tasks.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="offcanvas offcanvas-end"
+         id="tasksCanvas"
+         tabindex="-1"
+         role="dialog"
+         aria-labelledby="showTasksCanvas"
+         aria-hidden="true">
+        <div class="offcanvas-header">
+            <h5><i class="fas fa-clock"></i> To-Do's</h5>
+        </div>
+        <div class="offcanvas-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="$store.state.tasks && $store.state.tasks.length > 0">
+                <template v-for="(task, taskIndex) in $store.state.tasks" v-bind:key="taskIndex">
+                    <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"
+                                   step="5"
+                                   v-model="task.percentDone"
+                                   @change="checkForCompletionOfTask(task)">
+                        </div>
+                    </li>
+                </template>
+            </ul>
+            <br/>
+            <ul class="list-group" v-if="$store.state.tasks && $store.state.tasks.length > 0">
+                <template v-for="(task, taskIndex) in $store.state.tasks" v-bind:key="taskIndex">
+                    <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>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+    name: "Tasks",
+    data() {
+        return {
+            newTaskInput: ''
+        }
+    },
+    methods: {
+        deleteTask(taskIndex) {
+            this.$store.state.tasks.splice(taskIndex, 1)
+            this.$store.commit('saveTasks');
+        },
+        addTask() {
+            if (this.newTaskInput.length <= 0 || this.newTaskInput.trim() === '') {
+                return false;
+            }
+
+            if (!this.$store.state.tasks) {
+                this.$store.state.tasks = [];
+            }
+
+            this.$store.state.tasks.pushToBeginning({
+                name: this.newTaskInput,
+                done: false,
+                created: moment(),
+                percentDone: 0,
+                finished: null
+            });
+
+            this.newTaskInput = '';
+            this.$store.commit('saveTasks');
+        },
+        toggleTask(task) {
+            task.done = !task.done;
+
+            if (task.done) {
+                task.finished = moment();
+                task.percentDone = 100;
+            } else {
+                task.finished = null;
+                task.percentDone = 0;
+            }
+
+            this.$store.commit('saveTasks');
+        },
+        checkForCompletionOfTask(task) {
+            task.done = task.percentDone === 100;
+            this.$forceUpdate();
+            this.$store.commit('saveTasks');
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>