WIP

src/App.vue

@@ -4,9 +4,6 @@
             <Menu/>
             <div class="col" id="page-wrapper">
                 <router-view/>
-                <span id="version">
-                    v{{ version }}
-                </span>
             </div>
         </div>
     </div>
@@ -16,6 +13,7 @@
     <TasksForTracker/>
     <Tasks/>
     <History/>
+    <Notes/>
     <Settings/>
 </template>
 
@@ -30,10 +28,12 @@ import HistoryForTracker from "./views/HistoryForTracker";
 import CustomBookForTracker from "./views/CustomBookForTracker";
 import Settings from "./views/Settings";
 import Tasks from "./views/Tasks";
+import Notes from "./views/Notes";
 
 export default {
     el: '#root',
     components: {
+        Notes,
         Tasks,
         Settings,
         CustomBookForTracker,
@@ -44,7 +44,6 @@ export default {
     },
     data() {
         return {
-            version: '0.8.24.1',
             sounds: {
                 bad: [
                     'alert',
@@ -57,7 +56,7 @@ export default {
             theme: 'materia',
             customBookingValue: '',
             customDateForPastDays: '',
-            newTaskInput: '',
+            newTaskInput: ''
         }
     },
     mounted() {
@@ -232,12 +231,4 @@ export default {
 #page-wrapper {
     padding-top: 15px;
 }
-
-#version {
-    position: fixed;
-    bottom: 1em;
-    right: 2em;
-    z-index: -1;
-    color: lightgrey;
-}
 </style>

src/router/index.js

@@ -3,7 +3,6 @@ import Trackers from "../views/Trackers";
 import Settings from "../views/Settings";
 import TrackersDetail from "../views/TrackersDetail";
 import Archive from "../views/Archive";
-import Notes from "../views/Notes";
 
 Array.prototype.pushToBeginning = function (toPush) {
   return this.unshift.apply(this, [toPush]);
@@ -25,11 +24,6 @@ const routes = [
     name: 'Archive',
     component: Archive
   },
-  {
-    path: '/notes',
-    name: 'Notes',
-    component: Notes
-  },
   {
     path: '/settings',
     name: 'Settings',

src/store/index.js

@@ -1,4 +1,4 @@
-import {createStore} from 'vuex' 
+import {createStore} from 'vuex'
 import moment from "moment";
 
 export default createStore({
@@ -117,7 +117,6 @@ export default createStore({
         },
         deleteNote(state, index) {
             state.notes.splice(index, 1);
-            localStorage.setItem('notes', JSON.stringify(state.notes));
         }
     }
 })

src/views/Menu.vue

@@ -46,14 +46,15 @@
             </router-link>
         </div>
         <div class="left-menu-item">
-            <router-link to="/notes"
+            <a type="button"
-                         type="button"
+               class="btn btn-info text-light bottom-menu-item"
-                         class="btn btn-info text-light bottom-menu-item"
+               style="background-color: #ffea77;"
-                         style="background-color: #ffea77;"
+               data-bs-toggle="offcanvas"
-                         data-bs-placement="left"
+               data-bs-target="#notesCanvas"
-                         title="Notizen">
+               data-bs-placement="top"
+               title="Notizen">
                 <i class="fas fa-pen"></i>
-            </router-link>
+            </a>
         </div>
         <div class="left-menu-item" v-if="($store.state.trackers.length + $store.state.archive.length) > 0">
             <a type="button"

src/views/Notes.vue

@@ -1,66 +1,73 @@
 <template>
-    <div class="row">
+    <div class="offcanvas offcanvas-end" id="notesCanvas"
-        <div class="col-md-12">
+         aria-hidden="true">
+        <div class="offcanvas-header">
+            <h5><i class="fa fa-pen"></i> Notizen</h5>
             <div class="float-end">
-                <div v-if="$store.state.notes.length > 0" class="filter-wrapper">
+                <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
+            </div>
+        </div>
+        <div class="filter-wrapper">
+            <div v-if="$store.state.notes.length > 0">
+                <a href="javascript:"
+                   v-if="colorToFilter !== ''"
+                   v-on:click="colorToFilter = ''"
+                   class="color-change-button disable-filter-button"
+                   :style="'background-color: '+colorToFilter">
+                    Filter aus
+                </a>
+                <span v-for="color in noteColors"
+                      v-bind:key="color">
                     <a href="javascript:"
-                       v-if="colorToFilter !== ''"
+                       v-if="colorToFilter !== color"
-                       v-on:click="colorToFilter = ''"
+                       v-on:click="colorToFilter = color"
-                       class="color-change-button disable-filter-button"
+                       class="color-change-button"
-                       :style="'background-color: '+colorToFilter">
+                       :style="'background-color: ' + color">
-                        Filter aus
+                        <i class="fas fa-filter filter-icon"></i>
                     </a>
-                    <span v-for="color in noteColors"
+            </span>
-                          v-bind:key="color">
+            </div>
+        </div>
+        <div class="offcanvas-body">
+            <div class="row">
+                <div id="note-container">
+                    <template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
+                        <div v-if="colorToFilter === '' || note.color === colorToFilter">
+                            <div class="card">
+                                <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
+                                    <textarea v-model="note.body" spellcheck="false"
+                                              @keydown="this.$store.commit('saveNotes')"></textarea>
+                                    <div class="color-changer">
+                                    <span v-for="color in noteColors"
+                                          v-bind:key="color">
+                                        <span href="javascript:"
+                                              @click="changeColor(note, color);"
+                                              class="color-change-button"
+                                              v-if="color !== note.color"
+                                              :style="'background-color: ' + color">
+                                        </span>
+                                    </span>
+                                    </div>
+                                    <div class="float-end">
+                                        <a href="javascript:" class="delete-button"
+                                           @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                    <span v-if="colorToFilter !== '' && !notesExistInFilteredColor">
+                        Keine Notizen mit gewählter Farbe vorhanden<br>
                         <a href="javascript:"
-                           v-if="colorToFilter !== color"
+                           class="color-change-button disable-filter-button"
-                           v-on:click="colorToFilter = color"
+                           :style="'background-color: '+colorToFilter"
-                           class="color-change-button"
+                           v-on:click="colorToFilter = ''">
-                           :style="'background-color: ' + color">
+                            Filter ausschalten
-                        <i class="fas fa-filter filter-icon"></i>
                         </a>
                     </span>
                 </div>
-
-                <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
             </div>
-            <h5><i class="fa fa-pen"></i> Notizen</h5>
         </div>
-        <template v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
-            <div v-if="colorToFilter === '' || note.color === colorToFilter" class="col-sm-6 col-md-4 col-lg-3 card-box">
-                <div class="card">
-                    <div class="card-body note"
-                         :style="'background-color:' + note.color ?? '#ffea77'">
-                        <textarea v-model="note.body" spellcheck="false"
-                              @keydown="this.$store.commit('saveNotes')"></textarea>
-                        <div class="color-changer">
-                            <span v-for="color in noteColors" v-bind:key="color">
-                                <span href="javascript:"
-                                      @click="changeColor(note, color);"
-                                      class="color-change-button"
-                                      v-if="color !== note.color"
-                                      :style="'background-color: ' + color">
-                                </span>
-                            </span>
-                        </div>
-                        <div class="float-end">
-                            <a href="javascript:" class="delete-button"
-                               @click="$store.commit('deleteNote', noteIndex)"><i
-                                class="fas fa-trash"></i></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <span v-if="colorToFilter !== '' && !notesExistInFilteredColor">
-            Keine Notizen mit gewählter Farbe vorhanden<br>
-            <a href="javascript:"
-               class="color-change-button disable-filter-button"
-               :style="'background-color: '+colorToFilter"
-               v-on:click="colorToFilter = ''">
-                Filter ausschalten
-            </a>
-        </span>
     </div>
 </template>
 
@@ -179,12 +186,6 @@ textarea:focus {
 }
 
 .filter-wrapper {
-    display: inline-block;
     margin: 0.3em 1em;
 }
-
-.card-box {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-}
 </style>

src/views/PluginStore.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="offcanvas offcanvas-end" id="moduleStoreCanvas"
+         aria-hidden="true">
+        <div class="offcanvas-header">
+            <h5><i class="fa-solid fa-puzzle-piece"></i> Plugins</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"  aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div class="col-12" v-for="(plugin, pluginKey) in plugins" v-bind:key="pluginKey">
+                <div class="card" :style="'background-color: '+plugin.color">
+                    <div class="plugin-card-icon">
+                        <i :class="plugin.icon"></i>
+                    </div>
+                    <div class="card-body">
+                        {{ plugin.name }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PluginStore",
+    data() {
+        return {
+            plugins: {
+                notes: {
+                    name: 'Notizen',
+                    icon: 'fa-solid fa-pencil',
+                    color: '#ffea77',
+                    active: true
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.plugin-card-icon {
+    display: inline-block;
+}
+</style>

src/views/TasksForTracker.vue

@@ -83,23 +83,13 @@ export default {
                 this.$store.state.selectedTracker.tasks = [];
             }
 
-            let newTasks = [];
+            this.$store.state.selectedTracker.tasks.pushToBeginning({
-            
+                name: this.newTaskInput,
-            if (this.newTaskInput.split(';').length > 3) {
+                done: false,
-                newTasks = this.newTaskInput.split(';').reverse().map((task) => task.trim());
+                created: moment(),
-            } else {
+                percentDone: 0,
-                newTasks.push(this.newTaskInput);
+                finished: null
-            }
+            });
-
-            newTasks.forEach((task) => {
-                this.$store.state.selectedTracker.tasks.pushToBeginning({
-                    name: task,
-                    done: false,
-                    created: moment(),
-                    percentDone: 0,
-                    finished: null
-                });
-            })
 
             this.newTaskInput = '';
             this.$store.commit('saveTrackers');