add portalswitcher

css/app.css

@@ -138,4 +138,16 @@ nav, .card {
 
 .bottom-menu-item {
     width: 100%;
+}
+
+.btn-switcher {
+    width: 100%;
+}
+
+.container {
+    margin-top: 1em;
+}
+
+.form-control {
+    margin-bottom: 1em;
 }

index.html

@@ -93,7 +93,7 @@
         </div>
     </div>
 
-
+    <!-- Tickets Modal -->
     <div class="modal modal-fullscreen fade" id="showTicketsModal" tabindex="-1" role="dialog"
          aria-labelledby="showTicketsModalLabel"
          aria-hidden="true">
@@ -174,6 +174,7 @@
         </div>
     </div>
 
+    <!-- Archive Modal -->
     <div class="modal modal-fullscreen fade" id="showArchivedTicketsModal" tabindex="-1" role="dialog"
          aria-labelledby="showArchivedTicketsModalLabel"
          aria-hidden="true">
@@ -235,6 +236,7 @@
         </div>
     </div>
 
+    <!-- Settings Modal -->
     <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel"
          aria-hidden="true">
         <div class="modal-dialog" role="document">
@@ -308,6 +310,7 @@
         </div>
     </div>
 
+    <!-- History Modal -->
     <div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel"
          aria-hidden="true" v-if="selectedTicket">
         <div class="modal-dialog" role="document">
@@ -371,6 +374,38 @@
         </div>
     </div>
 
+    <!-- Switcher Modal -->
+    <div class="modal fade" id="switcherModal" tabindex="-1" role="dialog" aria-labelledby="switcherModalLabel"
+         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> Portal Switcher</h5>
+                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="form-group">
+                                <label class="text-muted">Portalname:</label>
+                                <input class="form-control" @keydown="updateStorage()" v-model="portal"/>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <a class="btn btn-info btn-switcher" href="https://my.vemap.docker" target="_blank">Docker</a>
+                        </div>
+                        <div class="col">
+                            <a class="btn btn-warning btn-switcher" :href="getPortalLink(true)" target="_blank">Test</a>
+                        </div>
+                        <div class="col">
+                            <a class="btn btn-success btn-switcher" :href="getPortalLink()" target="_blank">Live</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="bottom-menu">
         <div class="container">
             <div class="row">
@@ -406,6 +441,17 @@
                         <i class="fas fa-archive"></i>
                     </a>
                 </div>
+                <div class="col">
+                    <a type="button"
+                       class="btn btn-warning text-light bottom-menu-item"
+                       data-toggle="modal"
+                       data-target="#switcherModal"
+                       data-bs-toggle="tooltip"
+                       data-bs-placement="top"
+                       title="Portal Switcher">
+                        <i class="fas fa-random"></i>
+                    </a>
+                </div>
                 <div class="col">
                     <a type="button"
                        class="btn btn-dark text-light bottom-menu-item"

js/app.js

@@ -13,7 +13,8 @@ const TimeTrack = {
             tickets: [],
             archive: [],
             selectedTicket: null,
-            searchQuery: ''
+            searchQuery: '',
+            portal: ''
         }
     },
     mounted() {
@@ -54,6 +55,9 @@ const TimeTrack = {
 
             let storedTheme = localStorage.getItem('theme');
             this.theme = storedTheme == null ? 'materia' : storedTheme;
+
+            let storedPortal = localStorage.getItem('portal');
+            this.portal = storedPortal == null ? '' : storedPortal;
         },
         updateStorage() {
             localStorage.setItem('tickets', JSON.stringify(this.tickets));
@@ -61,6 +65,7 @@ const TimeTrack = {
             localStorage.setItem('ticketSystemUrl', this.ticketSystemUrl);
             localStorage.setItem('showPT', this.showPT);
             localStorage.setItem('theme', this.theme);
+            localStorage.setItem('portal', this.portal);
 
             this.$forceUpdate();
         },
@@ -291,6 +296,9 @@ const TimeTrack = {
                 historyModal.toggle();
             }, 50)
         },
+        getPortalLink (test = false) {
+            return 'https://' + this.portal + (test ? '-test' : '') + '.vemap.com';
+        },
         collectDataForDay() {
             let collection = [];
 
@@ -303,7 +311,7 @@ const TimeTrack = {
             });
 
             return collection;
-        }
+        },
     },
     watch: {
         showPT() {