From 0629753f733bd204da9a21e1658fbfd9035aa278 Mon Sep 17 00:00:00 2001
From: stingl <o.stingl@vemap.com>
Date: Tue, 14 Sep 2021 14:58:01 +0200
Subject: [PATCH] Introduce custom bookings;

---
 index.html | 87 +++++++++++++++++++++++++++++++++++++++---------------
 js/app.js  | 26 ++++++++++++++--
 2 files changed, 87 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index e4794d3..f334a9c 100644
--- a/index.html
+++ b/index.html
@@ -267,30 +267,42 @@
                                 <span v-if="getTotalTime(ticket) > 0">Gesamtzeit: {{ getTotalTime(ticket) }}</span>
                                 <br>
                                 <div class="row">
-                                    <div class="col-md-3">
-                                        <button class="btn btn-success ticket-action-button"
-                                                @click="bookTimeManually(ticket, 30)">
-                                            + ½h
-                                        </button>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <button class="btn btn-success ticket-action-button"
-                                                @click="bookTimeManually(ticket, 60)">
-                                            + 1h
-                                        </button>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <button class="btn btn-warning ticket-action-button"
-                                                @click="bookTimeManually(ticket, -30)">
-                                            - ½h
-                                        </button>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <button class="btn btn-warning ticket-action-button"
-                                                @click="bookTimeManually(ticket, -60)">
-                                            - 1h
-                                        </button>
-                                    </div>
+                                    <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)">
+                                                + ½h
+                                            </button>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <button class="btn btn-success ticket-action-button"
+                                                    @click="bookTimeManually(ticket, 60)">
+                                                + 1h
+                                            </button>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <button class="btn btn-warning ticket-action-button"
+                                                    @click="bookTimeManually(ticket, -30)">
+                                                - ½h
+                                            </button>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <button class="btn btn-warning ticket-action-button"
+                                                    @click="bookTimeManually(ticket, -60)">
+                                                - 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">
diff --git a/js/app.js b/js/app.js
index 116bf6b..c58c50d 100644
--- a/js/app.js
+++ b/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', '');