Update to Vue 3, split archive to own collection;

css/app.css

@@ -7,10 +7,6 @@ body {
     margin: 20px auto 20px auto;
 }
 
-.add-button {
-    padding: 1px 5px 1px 5px;
-}
-
 .ticket-action-button {
     margin-top: 10px;
     padding: 1px 5px 1px 5px;
@@ -25,7 +21,7 @@ body {
 }
 
 .side-button-right {
-    position: absolute;
+    position: fixed;
     right: 30px;
 
     height: 60px;
@@ -35,7 +31,7 @@ body {
 }
 
 .add-tracker-button {
-    position: absolute;
+    position: fixed;
     left: 30px;
     bottom: 30px;
 
@@ -51,17 +47,10 @@ body {
 
 .second-button {
     bottom: 110px;
-    padding-left: 16px;
 }
 
 .third-button {
     bottom: 190px;
-    padding-left: 16px;
-}
-
-.fourth-button {
-    bottom: 270px;
-    padding-left: 16px;
 }
 
 .navbar-brand {
@@ -106,7 +95,7 @@ nav, .card {
     margin-bottom: 1px;
 }
 
-#showTrackedTicketsModal .showTrackedTicketsModalDialog,
+#showTicketsModal .showTicketsModalDialog,
 #showArchivedTicketsModal .showArchivedTicketsModalDialog{
     max-width: 900px;
 }

index.html

@@ -22,9 +22,8 @@
     <div class="row">
         <div class="col-md-12">
             <div class="row">
-                <div class=" col-lg-4 col-md-6"
-                     v-for="(ticket, ticketIndex) in trackedTickets"
-                     v-if="!ticket.archived">
+                <template v-for="ticket in tickets">
+                    <div class="col-lg-4 col-md-6">
                         <div class="card bg-gradient-secondary">
                             <div class="card-body">
                                 <div class="card-text">
@@ -61,7 +60,7 @@
                                     <span class="">Heute: </span>
 
                                     <div class="row">
-                                    <div class="col-md-12" v-if="ticket.tracking == false">
+                                        <div class="col-md-12" v-if="!ticket.tracking">
                                             <button type="button" class="btn btn-info ticket-action-button"
                                                     @click="startTracking(ticket)">
                                                 <i class="far fa-play-circle"></i>
@@ -79,6 +78,7 @@
                             </div>
                         </div>
                     </div>
+                </template>
             </div>
         </div>
     </div>
@@ -87,13 +87,13 @@
         <i class="fas fa-plus"></i>
     </a>
 
-    <a type="button" :class="'btn btn-primary side-button-right text-light ' + (archivedTrackers > 0 ? 'third-button' : 'second-button')" data-toggle="modal"
-       data-target="#showTrackedTicketsModal" v-if="activeTrackers > 0">
+    <a type="button" :class="'btn btn-primary side-button-right text-light ' + (archive.length > 0 ? 'third-button' : 'second-button')" data-toggle="modal"
+       data-target="#showTicketsModal" v-if="tickets.length > 0">
         <i class="fas fa-user-clock"></i>
     </a>
 
     <a type="button" :class="'btn btn-secondary side-button-right text-dark second-button'" data-toggle="modal"
-       data-target="#showArchivedTicketsModal" v-if="archivedTrackers > 0">
+       data-target="#showArchivedTicketsModal" v-if="archive.length > 0">
         <i class="fas fa-archive"></i>
     </a>
 
@@ -102,10 +102,10 @@
         <i class="fas fa-sliders-h"></i>
     </a>
 
-    <div class="modal modal-fullscreen fade" id="showTrackedTicketsModal" tabindex="-1" role="dialog"
-         aria-labelledby="showTrackedTicketsModalLabel"
+    <div class="modal modal-fullscreen fade" id="showTicketsModal" tabindex="-1" role="dialog"
+         aria-labelledby="showTicketsModalLabel"
          aria-hidden="true">
-        <div class="modal-dialog showTrackedTicketsModalDialog" role="document">
+        <div class="modal-dialog showTicketsModalDialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title"><i class="fas fa-user-clock"></i> Tracker</h5>
@@ -113,14 +113,15 @@
                 </div>
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-md-6" v-for="(ticket, ticketIndex) in trackedTickets" v-if="!ticket.archived">
+                        <template v-for="(ticket, ticketIndex) in tickets">
+                            <div class="col-md-6">
                                 <h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
 
                                 <div class="form-group">
                                     <input type="text" class="form-control" v-model="ticket.description" @keydown="updateStorage()" placeholder="Beschreibung">
                                 </div>
 
-                            <span>Gesamtzeit: {{ getTotalTime(ticket) }}</span>
+                                <span v-if="getTotalTime(ticket) > 0">Gesamtzeit: {{ getTotalTime(ticket) }}</span>
                                 <br>
                                 <div class="row">
                                     <div class="col-md-3">
@@ -149,7 +150,7 @@
                                     </div>
                                     <div class="col">
                                         <button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"
-                                            @click="archiveTicket(ticket)" title="Archivieren">
+                                                @click="archiveTicket(ticketIndex)" title="Archivieren">
                                             <i class="fas fa-archive"></i>
                                         </button>
                                     </div>
@@ -172,7 +173,9 @@
                                         </a>
                                     </div>
                                 </div>
+                                <br/>
                             </div>
+                        </template>
                     </div>
                 </div>
             </div>
@@ -190,17 +193,18 @@
                 </div>
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-md-6" v-for="(ticket, ticketIndex) in trackedTickets" v-if="ticket.archived">
+                        <template v-for="(ticket, ticketIndex) in archive">
+                            <div class="col-md-6">
                                 <h6><span v-if="isTicketNumber(ticket.number)"></span>{{ ticket.number }}</h6>
                                 <div v-if="ticket.description">
                                     <p class="blockquote">{{ ticket.description }}</p>
                                 </div>
-                            <span>Gesamtzeit: {{ getTotalTime(ticket) }}</span>
+                                <span v-if="getTotalTime(ticket) > 0">Gesamtzeit: {{ getTotalTime(ticket) }}</span>
                                 <br>
                                 <div class="col-md-12 row">
                                     <div class="col">
                                         <button class="btn btn-success ticket-action-button" data-bs-dismiss="modal"
-                                        @click="reactivateTicket(ticket)" title="Reaktivieren">
+                                                @click="reactivateTicket(ticketIndex)" title="Reaktivieren">
                                             <i class="fas fa-power-off"></i>
                                         </button>
                                     </div>
@@ -223,7 +227,9 @@
                                         </a>
                                     </div>
                                 </div>
+                                <br/>
                             </div>
+                        </template>
                     </div>
                 </div>
             </div>
@@ -309,7 +315,8 @@
                 </div>
                 <div class="modal-body">
                     <ul class="list-group ticket-history">
-                        <li class="list-group-item" v-for="(tracker, historyIndex) in selectedTicket.history" v-if="!tracker.manually">
+                        <template v-for="(tracker, historyIndex) in selectedTicket.history">
+                            <li class="list-group-item" v-if="!tracker.manually">
                                 <div>
                                     <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
                                         {{ formattedDate(tracker.trackingStarted) }}
@@ -333,8 +340,10 @@
                                 </a>
                                 <br/>
                             </li>
-                        <li class="list-group-item bg-light" v-for="(tracker, historyIndex) in selectedTicket.history"
-                            v-if="tracker.manually && tracker.manually == true">
+                        </template>
+                        <template v-for="(tracker, historyIndex) in selectedTicket.history">
+                            <li class="list-group-item bg-light"
+                                v-if="tracker.manually">
                                 <div>
                                     <div class="float-end" :title="exactTimestamp(tracker.trackingStarted)">
                                         {{ formattedDate(tracker.trackingStarted) }}
@@ -352,17 +361,17 @@
                                 </a>
                                 <br/>
                             </li>
+                        </template>
                     </ul>
                 </div>
             </div>
         </div>
     </div>
-
 </div>
 
 <script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
-<script src="js/vue.js"></script>
+<script src="https://unpkg.com/vue@next"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

js/app.js

@@ -1,6 +1,6 @@
-let tab = new Vue({
-    el: '#root',
-    data: {
+const TimeTrack = {
+    data() {
+        return {
             theme: 'quartz',
             themes: null,
             dashboardLogo: 'img/logo.png',
@@ -10,8 +10,10 @@ let tab = new Vue({
             inputs: {
                 importJson: ''
             },
-        trackedTickets: [],
+            tickets: [],
+            archive: [],
             selectedTicket: null
+        }
     },
     mounted() {
         let vue = this;
@@ -26,8 +28,11 @@ let tab = new Vue({
     },
     methods: {
         loadStorage() {
-            let storedTrackedTickets = JSON.parse(localStorage.getItem('trackedTickets'));
-            this.trackedTickets = storedTrackedTickets == null ? [] : storedTrackedTickets;
+            let storedTickets = JSON.parse(localStorage.getItem('tickets'));
+            this.tickets = storedTickets == null ? [] : storedTickets;
+
+            let storedArchive = JSON.parse(localStorage.getItem('archive'));
+            this.archive = storedArchive == null ? [] : storedArchive;
 
             let storedticketSystemUrl = localStorage.getItem('ticketSystemUrl');
             this.ticketSystemUrl = storedticketSystemUrl == null ? '' : storedticketSystemUrl;
@@ -39,17 +44,19 @@ let tab = new Vue({
             this.theme = storedTheme == null ? 'materia' : storedTheme;
         },
         updateStorage() {
-            localStorage.setItem('trackedTickets', JSON.stringify(this.trackedTickets));
+            localStorage.setItem('tickets', JSON.stringify(this.tickets));
+            localStorage.setItem('archive', JSON.stringify(this.archive));
             localStorage.setItem('ticketSystemUrl', this.ticketSystemUrl);
             localStorage.setItem('showPT', this.showPT);
             localStorage.setItem('theme', this.theme);
+
+            this.$forceUpdate();
         },
         resetToDefault() {
             this.updateStorage();
         },
         addTrackedTicket() {
             let newTicket = {
-                archived: false,
                 tracking: false,
                 number: '#',
                 trackingStarted: null,
@@ -57,7 +64,7 @@ let tab = new Vue({
                 history: []
             };
 
-            this.trackedTickets.push(newTicket);
+            this.tickets.push(newTicket);
             this.updateStorage();
         },
         startTracking(ticket) {
@@ -153,7 +160,7 @@ let tab = new Vue({
         stopTrackingTicket() {
             let vue = this;
 
-            vue.trackedTickets.forEach(function (ticket) {
+            vue.tickets.forEach(function (ticket) {
                 if (ticket.tracking === true) {
                     vue.stopTracking(ticket);
                 }
@@ -166,24 +173,26 @@ let tab = new Vue({
             return number.indexOf('#') >= 0;
         },
         deleteTicket(index) {
-            this.trackedTickets.splice(index, 1);
+            this.tickets.splice(index, 1);
             this.updateStorage();
         },
-        archiveTicket(ticket) {
-            ticket.archived = true;
-            if (ticket.tracking) {
+        archiveTicket(index) {
+            if (this.tickets[index].tracking) {
                 this.stopTrackingTicket();
             }
+
+            this.archive.push(this.tickets[index]);
+            this.tickets.splice(index, 1);
             this.updateStorage();
-            this.$forceUpdate();
         },
-        reactivateTicket(ticket) {
-            ticket.archived = false;
+        reactivateTicket(index) {
+            this.tickets.push(this.archive[index]);
+            this.archive.splice(index, 1);
             this.updateStorage();
         },
         deleteHistoryEntry(ticketIndex, historyIndex) {
             if (ticketIndex) {
-                this.trackedTickets[ticketIndex].history.splice(historyIndex, 1);
+                this.tickets[ticketIndex].history.splice(historyIndex, 1);
             } else {
                 this.selectedTicket.history.splice(historyIndex, 1);
             }
@@ -202,7 +211,8 @@ let tab = new Vue({
         importData() {
             let json = JSON.parse(this.inputs.importJson);
 
-            this.trackedTickets = json.trackedTickets;
+            this.tickets = json.tickets;
+            this.archive = json.archive;
             this.ticketSystemUrl = json.ticketSystemUrl;
             this.showPT = json.showPT;
             this.theme = json.theme;
@@ -237,6 +247,19 @@ let tab = new Vue({
                 let historyModal = new bootstrap.Modal(document.getElementById('historyModal'));
                 historyModal.toggle();
             }, 50)
+        },
+        collectDataForDay() {
+            let collection = [];
+
+            this.tickets.forEach((ticket) => {
+                ticket.history.forEach((historyEntry) => {
+                    if (moment(historyEntry.trackingStarted).format("MMM Do YY") === moment().format("MMM Do YY")) {
+                        collection.push(historyEntry);
+                    }
+                });
+            });
+
+            return collection;
         }
     },
     watch: {
@@ -252,33 +275,13 @@ let tab = new Vue({
     computed: {
         exportJson() {
             return JSON.stringify({
-                trackedTickets: this.trackedTickets,
+                tickets: this.tickets,
                 ticketSystemUrl: this.ticketSystemUrl,
                 showPT: this.showPT,
                 theme: this.theme
             });
-        },
-        archivedTrackers() {
-            let vue = this;
-            let count = 0;
-
-            this.trackedTickets.forEach((ticket) => {
-                count += (ticket.archived ? 1 : 0);
-            })
-
-            return count;
-        },
-        activeTrackers() {
-            let vue = this;
-            let count = 0;
-
-            this.trackedTickets.forEach((ticket) => {
-                count += (ticket.archived ? 0 : 1);
-            })
-
-            return count;
         }
-    },
-    created() {
     }
-});
+};
+
+Vue.createApp(TimeTrack).mount('#root');