Introduce custom bookings;

index.html

@@ -267,6 +267,17 @@
                                 <span v-if="getTotalTime(ticket) > 0">Gesamtzeit: {{ getTotalTime(ticket) }}</span>
                                 <br>
                                 <div class="row">
+                                    <template v-if="experimental.customManualBooking">
+                                        <div class="col">
+                                            <button class="btn btn-info ticket-action-button"
+                                                    @click="showCustomBookingForTicket(ticket)"
+                                                    title="Manuelle Buchung">
+                                                <i class="fas fa-user-edit"></i>
+                                            </button>
+                                        </div>
+                                    </template>
+                                    <template v-else>
+
                                         <div class="col-md-3">
                                             <button class="btn btn-success ticket-action-button"
                                                     @click="bookTimeManually(ticket, 30)">
@@ -291,6 +302,7 @@
                                                 - 1h
                                             </button>
                                         </div>
+                                    </template>
                                     <div class="col">
                                         <button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"
                                                 @click="archiveTicket(ticketIndex)" title="Archivieren">
@@ -552,6 +564,33 @@
         </div>
     </div>
 
+    <!-- Custom Booking Modal -->
+    <div class="modal fade" id="customBookingModal" tabindex="-1" role="dialog" aria-labelledby="customBookingModalLabel"
+         aria-hidden="true" v-if="selectedTicket">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="fas fa-user-edit"></i> Buchung für {{selectedTicket.number}}</h5>
+                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label>Zeit in Minuten:</label>
+                        <input type="text" class="form-control" v-model="customBookingValue">
+                    </div>
+                    <div class="row">
+                        <div class="col-6">
+                            <a href="javascript:" class="btn btn-success btn-full-width" data-dismiss="modal" @click="makeCustomBooking()">+ Hinzubuchen</a>
+                        </div>
+                        <div class="col-6">
+                            <a href="javascript:" class="btn btn-danger btn-full-width" data-dismiss="modal" @click="makeCustomBooking(true)">- Abbuchen</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Switcher Modal -->
     <div class="modal fade" id="switcherModal" tabindex="-1" role="dialog" aria-labelledby="switcherModalLabel"
          aria-hidden="true" v-if="experimental.portalSwitcher">

js/app.js

@@ -5,7 +5,8 @@ const TimeTrack = {
                 trackWorktime: false,
                 boardView: false,
                 snippetSpace: false,
-                portalSwitcher: true
+                portalSwitcher: true,
+                customManualBooking: true
             },
             view: 'board',
             theme: 'materia',
@@ -49,7 +50,8 @@ const TimeTrack = {
                 ]
             },
             snippets: [],
-            codeMirrors: []
+            codeMirrors: [],
+            customBookingValue: '',
         }
     },
     mounted() {
@@ -404,6 +406,26 @@ const TimeTrack = {
                 historyModal.toggle();
             }, 50);
         },
+        showCustomBookingForTicket(ticket) {
+            this.selectedTicket = ticket;
+            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.selectedTicket, this.customBookingValue);
+        },
         getPortalLink (test = false) {
             let finalPortalName = this.portal.replaceAll('_', '-');
             finalPortalName.replaceAll('-test', '');