Add history feature; Add sound;

index.html

@@ -40,7 +40,7 @@
                 <div class="row">
                     <template v-for="(ticket, ticketIndex) in tickets">
                         <div class="col-lg-4 col-md-6">
-                            <div :class="'card ' + (ticket.isTimeBox ? 'bg-timebox' : 'bg-gradient-secondary')">
+                            <div :class="'card ' + (ticket.isTimeBox ? 'bg-timebox' : 'bg-gradient-secondary')" :style="ticket.isTimeBox ? 'background: linear-gradient(90deg, grey ' + ((timeBoxTimeLeft(ticket) * 100) / ticket.timeBoxMinutes)+'% , black 100%':''">
                                 <div class="card-body">
                                     <div class="card-text">
                                         <input type="text"
@@ -698,6 +698,37 @@
         </div>
     </div>
 
+    <!-- Past Days Modal -->
+    <div class="modal fade" id="pastDaysModal" tabindex="-1" role="dialog" aria-labelledby="pastDaysModalLabel"
+         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-random"></i> Buchungsverlauf</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="form-group">
+                                <div class="form-group">
+                                    <h6 for="date">Datum</h6>
+                                    <input id="date" type="date" class="form-control" v-model="customDateForPastDays">
+                                </div>
+                                <ul class="list-group">
+                                    <li class="list-group-item" v-for="entry in collectDataForDay(0, customDateForPastDays)">
+                                        {{ entry.ticket }}
+                                        <span class="float-end">{{ timeWithPostFix(entry.minutes) }}</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- SnippetSpace Modal -->
     <div class="modal fade" id="snippetSpaceModal" tabindex="-1" role="dialog" aria-labelledby="snippetSpaceModalLabel"
          aria-hidden="true" v-if="experimental.snippetSpace">
@@ -785,6 +816,16 @@
                         <i class="fas fa-code"></i>
                     </a>
                 </div>
+                <div class="col">
+                    <a type="button"
+                       class="btn btn-info text-light bottom-menu-item"
+                       data-bs-toggle="modal"
+                       data-bs-target="#pastDaysModal"
+                       data-bs-placement="top"
+                       title="Buchungsverlauf">
+                        <i class="fas fa-history"></i>
+                    </a>
+                </div>
                 <div class="col">
                     <a type="button"
                        class="btn btn-dark text-light bottom-menu-item"

js/app.js

@@ -52,6 +52,7 @@ const TimeTrack = {
             snippets: [],
             codeMirrors: [],
             customBookingValue: '',
+            customDateForPastDays: ''
         }
     },
     mounted() {
@@ -475,10 +476,14 @@ const TimeTrack = {
 
             return 'https://' + finalPortalName + '.vemap.com';
         },
-        collectDataForDay(subtractDays = 0) {
+        collectDataForDay(subtractDays = 0, customDate = false) {
             let day = moment().subtract(subtractDays, "days").format("MMM Do YY");
             let collection = [];
 
+            if (customDate) {
+                day = moment(customDate).format("MMM Do YY");
+            }
+
             this.tickets.forEach((ticket) => {
                 ticket.history.forEach((historyEntry) => {
                     if (moment(historyEntry.trackingStarted).format("MMM Do YY") === day) {