Adopt Navigation.vue page to vuetify 2 #248

knutschsoft · Jan 20, 2025 · 2fadbee · 2fadbee
1 parent 02177f4
commit 2fadbee
Show file tree

Hide file tree

Showing 27 changed files with 346 additions and 368 deletions.
diff --git a/web/assets/css/vuetify-compatibility.scss b/web/assets/css/vuetify-compatibility.scss
@@ -1,3 +1,7 @@
+.w-full{
+    width: 100%;
+}
+
 .text-disabled {
     color: rgba(0,0,0,.38) !important;
 }

diff --git a/web/assets/js/Swapp.vue b/web/assets/js/Swapp.vue
@@ -12,17 +12,65 @@
             >
                 {{ errorData }}
             </v-alert>
-            <navigation />
+            <UseNetwork v-slot="{ isOnline }">
+                <v-system-bar
+                    v-if="!isOnline && isOnDemoOrStagePage"
+                    app
+                    fixed
+                    class="m-0 p-0"
+                    height="36"
+                >
+                    <v-row>
+                        <v-col
+                            v-if="!isOnline"
+                            cols="12"
+                            class="px-2 py-0 small text-center bg-danger w-full text-white font-weight-bold"
+                        >
+                            <mdicon name="WifiOff" size="18"/>
+                            Keine Internetverbindung
+                        </v-col>
+                        <v-col
+                            v-if="isOnDemoOrStagePage"
+                            cols="12"
+                            class="px-2 py-0 small text-center bg-info w-full text-white"
+                            v-text="`Du befindest dich auf der ${isOnDemoPage ? 'Demo' : 'Stage'}-Version von Swapp.`"
+                        >
+                        </v-col>
+                    </v-row>
+                </v-system-bar>
+                <v-system-bar
+                    v-else-if="!isOnline || isOnDemoOrStagePage"
+                    app
+                    fixed
+                    class="m-0 p-0"
+                    height="18"
+                >
+                    <v-row>
+                        <v-col
+                            v-if="!isOnline"
+                            cols="12"
+                            class="px-2 py-0 small text-center bg-danger w-full text-white font-weight-bold"
+                        >
+                            <mdicon name="WifiOff" size="18"/>
+                            Keine Internetverbindung
+                        </v-col>
+                        <v-col
+                            v-if="isOnDemoOrStagePage"
+                            cols="12"
+                            class="px-2 py-0 small text-center bg-info w-full text-white"
+                            v-text="`Du befindest dich auf der ${isOnDemoPage ? 'Demo' : 'Stage'}-Version von Swapp.`"
+                        >
+                        </v-col>
+                    </v-row>
+                </v-system-bar>
+            </UseNetwork>
 
-            <div
-                class="pb-5"
-            >
-                <vue-page-transition name="fade">
-                    <router-view
-                        class="pb-3 absolute w-100 col-12 col-xxl-10 offset-xxl-1 px-1 px-sm-2"
-                    />
-                </vue-page-transition>
-            </div>
+            <navigation />
+            <v-main>
+                <v-container fluid>
+                    <router-view />
+                </v-container>
+            </v-main>
             <v-snackbar
                 v-model="alertStore.showAlert"
                 multi-line
@@ -50,12 +98,13 @@ import Navigation from './components/Navigation.vue';
 import FrameError from './components/FrameError';
 import ReloadPrompt from "./components/ReloadPrompt.vue"
 import dayjs from 'dayjs';
+import { UseNetwork } from '@vueuse/components';
 import { useAlertStore, useAuthStore, useChangelogStore } from './stores';
 import apiClient from './api';
 
 export default {
     name: 'Swapp',
-    components: {ReloadPrompt, FrameError, Navigation},
+    components: {ReloadPrompt, FrameError, Navigation, UseNetwork},
     props: {},
     data() {
         return {
@@ -73,6 +122,15 @@ export default {
         currentUser() {
             return this.authStore.user;
         },
+        isOnDemoPage() {
+            return window.location.host.includes('swapp.demo') || this.$route.query.demo;
+        },
+        isOnStagePage() {
+            return window.location.host.includes('swapp.stage') || this.$route.query.stage;
+        },
+        isOnDemoOrStagePage() {
+            return this.isOnDemoPage || this.isOnStagePage;
+        }
     },
     mounted() {
         if (!this.currentUser) {

diff --git a/web/assets/js/components/Changelog.vue b/web/assets/js/components/Changelog.vue
@@ -66,7 +66,7 @@
 import { ref, computed, onMounted } from 'vue';
 import ContentCollapse from './ContentCollapse.vue';
 import dayjs, {Dayjs} from 'dayjs';
-import { useChangelogStore } from '../stores/changelog';
+import { useChangelogStore } from '../stores';
 
 export default {
     name: 'Changelog',

diff --git a/web/assets/js/components/Clients/ClientForm.vue b/web/assets/js/components/Clients/ClientForm.vue
@@ -5,7 +5,7 @@ import * as EmailValidator from 'email-validator';
 import FormError from '../Common/FormError.vue';
 import WalkRating from '../Walk/WalkRating.vue';
 // import { getViolationsFeedback } from '../../utils/validation';
-import { useClientStore } from '../../stores/client';
+import { useClientStore } from '../../stores';
 import { Client } from '../../model';
 
 const props = defineProps({

diff --git a/web/assets/js/components/Common/ClientSelect.vue b/web/assets/js/components/Common/ClientSelect.vue
@@ -39,7 +39,7 @@ const value = computed({
     },
     set(value) {
         // emit('update:modelValue', value); // vue3
-        emit('input', value)
+        emit('input', value === null ? '' : value)
     }
 });
 

diff --git a/web/assets/js/components/ContentLoadingSpinner.vue b/web/assets/js/components/ContentLoadingSpinner.vue
diff --git a/web/assets/js/components/Dashboard.vue b/web/assets/js/components/Dashboard.vue
@@ -45,9 +45,7 @@
     import WalkList from './Dashboard/WalkList.vue';
     import WayPointList from './Dashboard/WayPointList.vue';
     import ContentCollapse from './ContentCollapse.vue';
-    import { useClientStore } from '../stores/client';
-    import { useTeamStore } from '../stores/team';
-    import { useWalkStore } from '../stores/walk';
+    import { useClientStore, useTeamStore, useWalkStore } from '../stores';
 
     export default {
         name: "Dashboard",

diff --git a/web/assets/js/components/Dashboard/StartWalk.vue b/web/assets/js/components/Dashboard/StartWalk.vue
@@ -127,10 +127,7 @@
 
 <script>
     "use strict";
-    import { useSystemicQuestionStore } from '../../stores/systemic-question';
-    import { useTeamStore } from '../../stores/team';
-    import { useAuthStore } from '../../stores/auth';
-    import { useUserStore } from '../../stores/user';
+    import { useAuthStore, useSystemicQuestionStore, useTeamStore, useUserStore } from '../../stores';
     import WalkAPI from '../../api/walk.js';
     import dayjs from "dayjs";
 

diff --git a/web/assets/js/components/Dashboard/WalkList.vue b/web/assets/js/components/Dashboard/WalkList.vue
@@ -331,9 +331,7 @@ import WalkAPI from '../../api/walk.js';
 import dayjs from 'dayjs';
 import dateRangePicker from '../../utils/date-range-picker'
 import WalkRating from '../Walk/WalkRating.vue';
-import { useClientStore } from '../../stores/client';
-import { useGeneralStore } from '../../stores/general';
-import { useWalkStore } from '../../stores/walk';
+import { useClientStore, useGeneralStore, useWalkStore } from '../../stores';
 
 export default {
     name: 'WalkList',

diff --git a/web/assets/js/components/Dashboard/WayPointList.vue b/web/assets/js/components/Dashboard/WayPointList.vue
@@ -415,10 +415,7 @@ import dateRangePicker from '../../utils/date-range-picker'
 import WayPointAPI from '../../api/wayPoint';
 import WalkAPI from '../../api/walk.js';
 import TagAPI from '../../api/tag.js';
-import { useTagStore } from '../../stores/tag';
-import { useWayPointStore } from '../../stores/way-point';
-import { useWalkStore } from '../../stores/walk';
-import { useGeneralStore } from '../../stores/general';
+import { useGeneralStore, useTagStore, useWalkStore, useWayPointStore } from '../../stores';
 
 export default {
     name: 'WayPointList',

diff --git a/web/assets/js/components/Login.vue b/web/assets/js/components/Login.vue
@@ -107,7 +107,7 @@
 <script>
     "use strict";
     import DemoInfo from './Demo/DemoInfo.vue';
-    import { useAuthStore } from '../stores/auth';
+    import { useAuthStore } from '../stores';
 
     export default {
         name: "Login",

diff --git a/web/assets/js/components/Logout.vue b/web/assets/js/components/Logout.vue
@@ -3,14 +3,7 @@
 </template>
 
 <script>
-    import { useAuthStore } from '../stores/auth';
-    import { useClientStore } from '../stores/client';
-    import { useTeamStore } from '../stores/team';
-    import { useSystemicQuestionStore } from '../stores/systemic-question';
-    import { useTagStore } from '../stores/tag';
-    import { useUserStore } from '../stores/user';
-    import { useWalkStore } from '../stores/walk';
-    import { useWayPointStore } from '../stores/way-point';
+import {useAuthStore, useClientStore, useSystemicQuestionStore, useTagStore, useTeamStore, useUserStore, useWalkStore, useWayPointStore} from '../stores';
     export default {
         name: "Logout",
         data() {