From 5fde5543b340b5dced82f5c2c980358f664daf55 Mon Sep 17 00:00:00 2001
From: stingl <o.stingl@vemap.com>
Date: Mon, 13 Dec 2021 17:02:53 +0100
Subject: [PATCH] put Settings to off-canvas;

---
 src/App.vue            |   3 +
 src/views/Menu.vue     |  15 +++--
 src/views/Settings.vue | 123 +++++++++++++++++++++--------------------
 3 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d75967e..61090d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@
     <CustomBookForTracker/>
     <TasksForTracker/>
     <History/>
+    <Settings/>
 </template>
 
 <script>
@@ -23,10 +24,12 @@ import History from "./views/History";
 import TasksForTracker from "./views/TasksForTracker";
 import HistoryForTracker from "./views/HistoryForTracker";
 import CustomBookForTracker from "./views/CustomBookForTracker";
+import Settings from "./views/Settings";
 
 export default {
     el: '#root',
     components: {
+        Settings,
         CustomBookForTracker,
         HistoryForTracker,
         TasksForTracker,
diff --git a/src/views/Menu.vue b/src/views/Menu.vue
index 097f7ad..379402e 100644
--- a/src/views/Menu.vue
+++ b/src/views/Menu.vue
@@ -56,13 +56,16 @@
             </a>
         </div>
         <div class="left-menu-item">
-            <router-link to="/settings"
-                         type="button"
-                         class="btn btn-dark text-light bottom-menu-item"
-                         data-bs-placement="left"
-                         title="Einstellungen">
+            <a type="button"
+               class="btn btn-dark text-light bottom-menu-item"
+               data-bs-toggle="offcanvas"
+               data-bs-target="#settingsCanvas"
+               data-bs-placement="top"
+               title="Einstellungen">
                 <i class="fas fa-sliders-h"></i>
-            </router-link>
+            </a>
+        </div>
+        <div class="left-menu-item">
         </div>
     </div>
 </template>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 69a90d7..2a991da 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,72 +1,73 @@
 <template>
-    <h5><i class="fas fa-sliders-h"></i> Einstellungen</h5>
-    <hr/>
-    <div class="row">
-        <div class="col-md-6">
-            <h5>Allgemeine Einstellungen</h5>
-<!--            <div class="form-group">-->
-<!--                <label>Logo-Pfad</label>-->
-<!--                <input type="text" v-model="dashboardLogo" class="form-control">-->
-<!--            </div>-->
-            <div class="form-group">
-                <label>Ticket-Link <small>Link zu einem Ticket ohne Ticketnummer</small></label>
-                <input type="text" v-model="trackerSystemUrl" class="form-control">
-            </div>
-            <br/>
-            <div class="form-group">
-                <label>
-                    <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.showPT">
-                    Ab 8 Stunden nurmehr PT anzeigen
-                </label>
-            </div>
-            <br/>
-            <div class="form-group">
-                <label>
-                    <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.dontShowMinutes">
-                    Zeit immer in Stunden anzeigen
-                </label>
-            </div>
-            <br/>
-<!--            <div class="form-group">-->
-<!--                <label>Design</label>-->
-<!--                <select v-model="theme" class="form-control">-->
-<!--                    <option v-for="(availableTheme, themeIndex) in themes" :value="availableTheme.name.toLowerCase()"-->
-<!--                            v-bind:key="themeIndex">{{ availableTheme.name }}-->
-<!--                    </option>-->
-<!--                </select>-->
-<!--            </div>-->
-<!--            <br/>-->
+    <div class="offcanvas offcanvas-end" id="settingsCanvas"
+         aria-hidden="true">
+        <div class="offcanvas-header">
+            <h5><i class="fas fa-sliders-h"></i> Einstellungen</h5>
+            <button type="button" v-on:click="updateStorage()" class="btn-close" data-bs-dismiss="offcanvas"  aria-label="Close"></button>
         </div>
-        <div class="col-md-6">
-<!--            <h5>Zurücksetzen & Löschen</h5>-->
-<!--            <div class="row">-->
-<!--                <div class="col-md-6">-->
-<!--                    <button class="btn btn-outline-danger btn-full-width" @click="deleteAllData()">Alle Daten-->
-<!--                        löschen-->
-<!--                    </button>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <br/>-->
-            <h5>Import & Export</h5>
+        <div class="offcanvas-body">
             <div class="row">
-                <div class="col-md-6">
-                    <h6>Export-Json</h6>
-                    <textarea class="form-control" id="exportJsonInput" v-model="exportJson"></textarea>
-                    <button class="btn btn-success tracker-action-button" @click="copy2Clipboard">Export-String kopieren
-                    </button>
+                <div class="col-md-12">
+                    <h5>Allgemeine Einstellungen</h5>
+                    <div class="form-group">
+                        <label>Ticket-Link <small>Link zu einem Ticket ohne Ticketnummer</small></label>
+                        <input type="text" v-model="trackerSystemUrl" class="form-control">
+                    </div>
+                    <br/>
+                    <div class="form-group">
+                        <label>
+                            <input type="checkbox" class="form-control-checkbox" v-model="$store.state.settings.showPT">
+                            Ab 8 Stunden nurmehr PT anzeigen
+                        </label>
+                    </div>
+                    <br/>
+                    <div class="form-group">
+                        <label>
+                            <input type="checkbox" class="form-control-checkbox"
+                                   v-model="$store.state.settings.dontShowMinutes">
+                            Zeit immer in Stunden anzeigen
+                        </label>
+                    </div>
+                    <br/>
+                    <!--            <div class="form-group">-->
+                    <!--                <label>Design</label>-->
+                    <!--                <select v-model="theme" class="form-control">-->
+                    <!--                    <option v-for="(availableTheme, themeIndex) in themes" :value="availableTheme.name.toLowerCase()"-->
+                    <!--                            v-bind:key="themeIndex">{{ availableTheme.name }}-->
+                    <!--                    </option>-->
+                    <!--                </select>-->
+                    <!--            </div>-->
+                    <!--            <br/>-->
                 </div>
-                <div class="col-md-6">
-                    <h6>Import</h6>
-                    <textarea class="form-control" v-model="importJson"></textarea>
-                    <button class="btn btn-success tracker-action-button" @click="importData">Import</button>
+                <div class="col-md-12">
+                    <!--            <h5>Zurücksetzen & Löschen</h5>-->
+                    <!--            <div class="row">-->
+                    <!--                <div class="col-md-6">-->
+                    <!--                    <button class="btn btn-outline-danger btn-full-width" @click="deleteAllData()">Alle Daten-->
+                    <!--                        löschen-->
+                    <!--                    </button>-->
+                    <!--                </div>-->
+                    <!--            </div>-->
+                    <!--            <br/>-->
+                    <h5>Import & Export</h5>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h6>Export-Json</h6>
+                            <textarea class="form-control" id="exportJsonInput" v-model="exportJson"></textarea>
+                            <button class="btn btn-success tracker-action-button" @click="copy2Clipboard">Export-String
+                                kopieren
+                            </button>
+                        </div>
+                        <div class="col-md-6">
+                            <h6>Import</h6>
+                            <textarea class="form-control" v-model="importJson"></textarea>
+                            <button class="btn btn-success tracker-action-button" @click="importData">Import</button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="modal-footer">
-        <button class="btn btn-primary" v-on:click="updateStorage()" data-bs-dismiss="offcanvas" >Speichern</button>
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas" >Schließen</button>
-    </div>
 </template>
 
 <script>