WIP - Tasks working;

src/App.vue

@@ -8,22 +8,24 @@
         </div>
     </div>
 
+    <HistoryForTracker/>
     <TasksForTracker/>
     <History/>
 </template>
 
 <script>
 import moment from 'moment'
-import iziToast from 'izitoast'
-import axios from 'axios'
 import bootstrap from 'bootstrap'
+import iziToast from "izitoast";
 import Menu from "./views/Menu";
 import History from "./views/History";
 import TasksForTracker from "./views/TasksForTracker";
+import HistoryForTracker from "./views/HistoryForTracker";
 
 export default {
     el: '#root',
     components: {
+        HistoryForTracker,
         TasksForTracker,
         History,
         Menu
@@ -70,7 +72,7 @@ export default {
     methods: {
         loadTooltips() {
             let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-            tooltipTriggerList.map(function (tooltipTriggerEl) {
+            tooltipTriggerList.map((tooltipTriggerEl) => {
                 return new bootstrap.Tooltip(tooltipTriggerEl)
             });
         },
@@ -103,7 +105,7 @@ export default {
         stopActiveTracker() {
             let component = this;
 
-            component.trackers.forEach(function (tracker) {
+            component.trackers.forEach((tracker) => {
                 if (tracker.tracking === true) {
                     component.stopTracking(tracker);
                 }
@@ -112,119 +114,6 @@ export default {
         getTrackingStartTime(tracker) {
             return moment(tracker.trackingStarted).format('LT');
         },
-        deleteTracker(index, archive = false) {
-            let component = this;
-            let message = '';
-
-            if (archive) {
-                Object.assign(this.trashed, this.archive[index]);
-                let name = this.archive[index].number;
-                message = 'Tracker "' + name + '" wurde gelöscht';
-                this.archive.splice(index, 1);
-            } else {
-                Object.assign(this.trashed, this.trackers[index]);
-                let name = this.trackers[index].number;
-                message = 'Tracker "' + name + '" wurde gelöscht';
-                this.trackers.splice(index, 1);
-            }
-
-            iziToast.show({
-                message: message,
-                color: 'blue',
-                buttons: [
-                    ['<button><i class="fas fa-undo"></i></button>', function (instance, toast) {
-                        instance.hide({
-                            transitionOut: 'fadeOutUp',
-                            onClosing: function(){
-                                component.restoreTrashed();
-                            }
-                        }, toast, 'buttonName');
-                    }, true]
-                ]
-            });
-
-            this.$store.commit('saveTrackers');
-        },
-        deleteHistoryEntry(trackerIndex, historyIndex) {
-            if (trackerIndex) {
-                this.trackers[trackerIndex].history.splice(historyIndex, 1);
-            } else {
-                this.selectedTracker.history.splice(historyIndex, 1);
-            }
-            this.$store.commit('saveTrackers');
-        },
-        bookTimeManually(tracker, minutes) {
-            tracker.history.pushToBeginning({
-                trackingStarted: moment(),
-                trackingStopped: moment(),
-                manually: true,
-                minutes: Math.round(minutes)
-            });
-
-            this.$store.commit('saveTrackers');
-        },
-        showCustomBookingForTracker(tracker) {
-            this.selectedTracker = tracker;
-            this.$forceUpdate();
-            setTimeout(() => {
-                let customBookingModal = new bootstrap.Modal(document.getElementById('customBookingModal'));
-                customBookingModal.toggle();
-            }, 50);
-        },
-        makeCustomBooking(subtract = false) {
-            if (subtract) {
-                this.customBookingValue -= (this.customBookingValue * 2)
-            }
-
-            iziToast.show({
-                message: 'Buchung erfolgreich',
-                color: 'green'
-            });
-
-            this.bookTimeManually(this.selectedTracker, this.customBookingValue);
-        },
-        getPortalLink (test = false) {
-            let finalPortalName = this.portal.replaceAll('_', '-');
-            finalPortalName.replaceAll('-test', '');
-            finalPortalName += test ? '-test' : '';
-
-            return 'https://' + finalPortalName + '.vemap.com';
-        },
-        sendPortalChangeRequest() {
-            let component = this;
-            let publicDBParam = this.publicDB ? '&publicDB=1' : '';
-            axios.get(
-                'https://settings.vemap.docker/?portal2change=' + component.portal + publicDBParam
-            ).then((response) => {
-                console.log(response)
-            }).catch((error) => {
-                console.log(error);
-                // An error is expected here due to apache restarting
-                iziToast.show({
-                    message: 'Portal-Wechsel erfolgreich',
-                    color: 'green'
-                });
-
-                if (component.fun) {
-                    playSound(oneOf(component.sounds.animals));
-                }
-
-                component.updateStorage();
-            })
-        },
-        importPortalsJson() {
-            if (this.importStringForPortals !== '') {
-                this.portals = JSON.parse(this.importStringForPortals);
-
-                this.importStringForPortals = '';
-
-                iziToast.show({
-                    message: 'Portalnamen importiert',
-                    color: 'green'
-                });
-                this.$store.commit('saveTrackers');
-            }
-        },
         checkTimeBoxes() {
             let component = this;
 
@@ -254,7 +143,7 @@ export default {
             let totalTime = 0;
 
             if (tracker.history.length > 0) {
-                tracker.history.forEach(function (historyEntry) {
+                tracker.history.forEach((historyEntry) => {
                     totalTime += Math.round(historyEntry.minutes);
                 });
             }
@@ -301,11 +190,6 @@ export default {
         theme() {
             this.$store.commit('saveTrackers');
             this.$forceUpdate();
-        },
-        fun() {
-            this.fun = this.validateBooleans(this.fun)
-            this.$store.commit('saveTrackers');
-            this.$forceUpdate();
         }
     },
     computed: {
@@ -320,15 +204,6 @@ export default {
     }
 }
 
-function oneOf(collection) {
-    return collection[Math.floor(Math.random()*collection.length)];
-}
-
-function playSound(sound, extension = null) {
-    let audio = new Audio('/timetrack/assets/audio/' + sound + (extension ?? '.mp3'));
-    audio.play();
-}
-
 </script>
 
 <style>

src/css/app.scss

@@ -11,30 +11,10 @@ body {
     width: 100%;
 }
 
-.delete-tracker-button {
-    margin-top: 10px;
-    margin-bottom: 15px;
-    padding: 1px 5px 1px 5px;
-    width: 100%;
-}
-
-.side-button-right {
-    font-size: 1.7em;
-}
-
-.add-tracker-button {
-    font-size: 1.7em;
-}
-
 .navbar-brand {
     width: 100%;
 }
 
-.logo-nav {
-    max-height: 35px;
-    margin: 5px;
-}
-
 nav {
     border-radius: 45px;
 }

src/store/index.js

@@ -38,7 +38,6 @@ export default createStore({
                 number: '#',
                 trackingStarted: null,
                 trackingStopped: null,
-                trashed: {},
                 history: []
             });
         },

src/views/Boardview.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="row" v-if="experimental.boardView && view === 'board'" id="board-view">
+    <div class="row" id="board-view">
         <div class="col-4 col-board-inner">
             <h5>Todo</h5>
-            <template v-for="(tracker, trackerIndex) in trackers">
+            <template v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
             </template>
         </div>
         <div class="col-4 col-board-inner">
             <h5>On hold</h5>
-            <template v-for="(tracker, trackerIndex) in trackers">
+            <template v-for="(tracker, trackerIndex) in $store.state.trackers" v-bind:key="trackerIndex">
                 <div class="card bg-gradient-secondary" v-if="tracker.status === 'onhold'">
                     <div class="card-body">
                         <div class="card-text">
@@ -72,7 +72,7 @@
         </div>
         <div class="col-4">
             <h5>Work in progress</h5>
-            <template v-for="(tracker, trackerIndex) in trackers">
+            <template v-for="(tracker, trackerIndex) in trackers" v-bind:key="trackerIndex">
                 <div class="card bg-gradient-secondary" v-if="tracker.status === 'wip'">
                     <div class="card-body">
                         <div class="card-text">

src/views/History.vue

@@ -11,7 +11,7 @@
                 <div class="col-12">
                     <div class="form-group">
                         <div class="form-group">
-                            <h6 for="date">Datum</h6>
+                            <h6>Datum</h6>
                             <input id="date" type="date" class="form-control" v-model="customDateForPastDays">
                         </div>
                         <ul class="list-group">

src/views/HistoryForTracker.vue

@@ -75,7 +75,37 @@ export default {
     methods: {
         exactTimestamp(date) {
             return moment(date).format('LTS');
+        },
+        deleteHistoryEntry(trackerIndex, historyIndex) {
+            if (trackerIndex) {
+                this.trackers[trackerIndex].history.splice(historyIndex, 1);
+            } else {
+                this.selectedTracker.history.splice(historyIndex, 1);
             }
+            this.$store.commit('saveTrackers');
+        },
+        formattedDate(date) {
+            return moment(date).format('llll');
+        },
+        timeWithPostFix(time) {
+            let postFix = ' Minute';
+
+            if (time >= 480 && this.showPT) {
+                postFix = ' PT';
+                time = (time / 480).toFixed(1);
+            } else if (time >= 60 || this.$store.state.settings.dontShowMinutes) {
+                postFix = ' Stunde';
+                time = (time / 60).toFixed(2);
+            }
+
+            let plural = '';
+
+            if (((time > 1 || time <= 0) || this.$store.state.settings.dontShowMinutes) && postFix !== ' PT') {
+                plural = 'n'
+            }
+
+            return time + postFix + plural;
+        },
     }
 }
 </script>

src/views/Trackers.vue

@@ -56,7 +56,7 @@
                                                 </button>
                                             </div>
 
-                                            <div class="col-6">
+                                            <div class="col-md-6">
                                                 <button class="btn btn-warning tracker-action-button"
                                                         data-bs-dismiss="modal"
                                                         @click="archiveTracker(trackerIndex)" title="Archivieren">
@@ -72,7 +72,7 @@
                                                 </button>
                                             </div>
 
-                                            <div class="col-6">
+                                            <div class="col-md-6">
                                                 <button class="btn btn-danger tracker-action-button"
                                                         @click="deleteTracker(trackerIndex)" title="Löschen">
                                                     <i class="fas fa-trash"></i> <small>Löschen</small>
@@ -344,9 +344,11 @@ export default {
         openTasksForTracker(tracker) {
             this.$store.commit('selectTracker', tracker);
 
+            setTimeout(() => {
                 let canvas = document.getElementById('trackerTasksModal');
                 let tasksCanvas = new Offcanvas(canvas);
                 tasksCanvas.show();
+            }, 50)
         },
     }
 }

src/views/TrackersDetail.vue

@@ -59,6 +59,7 @@
 <script>
 import moment from "moment";
 import bootstrap from "bootstrap";
+import iziToast from "izitoast";
 
 export default {
     name: "TrackersDetail",
@@ -132,6 +133,36 @@ export default {
                 historyModal.toggle();
             }, 50);
         },
+        bookTimeManually(tracker, minutes) {
+            tracker.history.pushToBeginning({
+                trackingStarted: moment(),
+                trackingStopped: moment(),
+                manually: true,
+                minutes: Math.round(minutes)
+            });
+
+            this.$store.commit('saveTrackers');
+        },
+        showCustomBookingForTracker(tracker) {
+            this.selectedTracker = tracker;
+            this.$forceUpdate();
+            setTimeout(() => {
+                let customBookingModal = new bootstrap.Modal(document.getElementById('customBookingModal'));
+                customBookingModal.toggle();
+            }, 50);
+        },
+        makeCustomBooking(subtract = false) {
+            if (subtract) {
+                this.customBookingValue -= (this.customBookingValue * 2)
+            }
+
+            iziToast.show({
+                message: 'Buchung erfolgreich',
+                color: 'green'
+            });
+
+            this.bookTimeManually(this.selectedTracker, this.customBookingValue);
+        },
     }
 }
 </script>