Updated

backend/routes/api/climbingRoute.js

@@ -5,6 +5,8 @@ const authMiddleware = require('../../middleware/authMiddleware');
 const PDFDocument = require('pdfkit');
 const QRCode = require('qrcode');
 const router = express.Router();
+const path = require('path');
+const logoPath = path.join(__dirname, '../../assets/logo.png');
 
 router.get('/', async (req, res) => {
     try {
@@ -165,6 +167,7 @@ router.get('/pdf', authMiddleware, async (req, res) => {
 
         let entryCount = 0; // Keep track of entries for new page logic
 
+
         for (let i = 0; i < ids.length; i++) {
             const climbingRoute = await ClimbingRoute.findByPk(ids[i]);
             if (!climbingRoute) {
@@ -215,7 +218,7 @@ router.get('/pdf', authMiddleware, async (req, res) => {
             }});
             doc.image(qrCodeBuffer, qrX, qrY, { fit: [qrSize, qrSize] });
 
-            doc.image('assets/logo.png', {
+            doc.image(logoPath, {
                 fit: [100, 100],
                 y: y + 100,
                 x: x + 165,

backend/server.js

@@ -35,4 +35,6 @@ migrateAndSeed().then(() => {
     app.listen(process.env.PORT || 3001, () => {
       logger.log(`Server is running on port ${process.env.PORT || 3001}`);
     });
-  });
+  });
+
+module.exports = app;

compose-dev.yaml

@@ -0,0 +1,12 @@
+services:
+  app:
+    entrypoint:
+    - sleep
+    - infinity
+    image: docker/dev-environments-default:stable-1
+    init: true
+    volumes:
+    - type: bind
+      source: /var/run/docker.sock
+      target: /var/run/docker.sock
+

frontend/app.vue

@@ -9,29 +9,28 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, onMounted, watchEffect } from 'vue';
 import { useMainStore } from '~/stores/main'; // Import your Pinia store
 import NavBar from '@/components/layout/NavBar.vue';
 import FootBar from '@/components/layout/FootBar.vue';
-import { useI18n } from '#imports'
+import { useTheme } from 'vuetify';
 export default {
   setup: () => {
     const mainStore = useMainStore();
-    const isLoggedIn = computed(() => mainStore.isLoggedIn());
- 
+    const isLoggedIn = computed(() => mainStore.isLoggedIn);
+    const theme = useTheme();
+
     onMounted(() => {
       const colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
+      
       const setTheme = () => {
-        const theme = mainStore.getColorTheme();
-        const colorTheme = colorSchemeMediaQuery.matches ? 'dark' : 'light';
-        mainStore.setColorTheme(colorTheme);
-        if (theme !== colorTheme) {
-          window.location.reload();
-        }
+          const currentTheme = mainStore.getColorTheme;
+          const colorTheme = colorSchemeMediaQuery.matches ? 'dark' : 'light';
+          mainStore.setColorTheme(colorTheme);
+          if (currentTheme !== colorTheme) {
+            theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+          }
       };
-      
-
       // Initial set of the theme
       setTheme();
 

frontend/components/layout/NavBar.vue

@@ -23,7 +23,7 @@
 
   <script>
   import LogOut from '@/components/auth/LogOut.vue';
-  import { toRefs } from 'vue';
+  import { toRefs, watch } from 'vue';
   import { useMainStore } from '@/stores/main';
   export default {
     name: "NavBar",
@@ -39,13 +39,18 @@
     },
     setup(props) {
     const { loggedIn } = toRefs(props);
-    const theme = useMainStore().getColorTheme();
+    const theme = ref(useMainStore().getColorTheme);
 
     const logoColor = computed(() => ({
       maxWidth: '90px',
-      filter: `brightness(0) invert(${theme === 'dark' ? 1 : 0})`,
+      filter: `brightness(0) invert(${theme.value === 'dark' ? 1 : 0})`,
     }));
 
+    watch(() => useMainStore().getColorTheme, (newTheme) => {
+      theme.value = newTheme;
+    });
+    
+
       return {
         isLoggedIn: loggedIn,
         theme,

frontend/middleware/auth.js

@@ -24,7 +24,7 @@ export default defineNuxtRouteMiddleware((to, from, next) => {
 
     const authRequired = to.meta.authRequired || false;
     const store = useMainStore();
-    let token = store.getToken();
+    let token = store.getToken;
     let isTokenValid = false;
 
     if (token) {
@@ -33,13 +33,14 @@ export default defineNuxtRouteMiddleware((to, from, next) => {
 
 
     if (authRequired) {
-        if (!isTokenValid) {
-            store.resetStore();
-            return navigateTo('/login');
-        }
-    } else if (to.name === 'Login' && isTokenValid) {
+      if (!isTokenValid) {
+          store.resetStore();
+          return navigateTo('/login');
+      }
+      if (to.name === 'Login' && isTokenValid) {
         // If already logged in, redirect to dashboard
         return navigateTo('/dashboard');
+    	}
     }
 });
 

frontend/nuxt.config.ts

@@ -1,29 +1,25 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: true,
   devtools: {
     enabled: true,
-
     timeline: {
       enabled: true,
     },
   },
   modules: [
     '@pinia/nuxt',
-    '@pinia-plugin-persistedstate/nuxt',
-    '@nuxtjs/i18n',
+    '@nuxtjs/i18n'
   ],
   plugins: [
     '~/plugins/vuetify.js',
-     '~/plugins/piniaPersist.js',],
+    { src: '~/plugins/persistStore.server.js', mode: 'client' },
+  ],
   css: [
     '~/assets/css/main.css',
     'vuetify/lib/styles/main.sass',
     '@mdi/font/css/materialdesignicons.min.css'
   ],
-  build: {
-    transpile: ['vuetify'],
-  },
-  ssr: true,
   nitro: {
     devProxy: {
       '/api': 
@@ -37,5 +33,8 @@ export default defineNuxtConfig({
   },
   i18n: {
     vueI18n: '~/plugins/i18n.js',
-  }
+  },
+  build: {
+    transpile: ['vuetify'],
+  },
 })

frontend/package.json

@@ -11,20 +11,20 @@
   },
   "devDependencies": {
     "@nuxtjs/i18n": "^8.0.0",
-    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
-    "nuxt": "^3.10.0",
+    "@pinia-plugin-persistedstate/nuxt": "1.2.0",
+    "nuxt": "^3.11.2",
     "vue": "^3.4.14"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.5.1",
     "axios": "^1.6.7",
     "fs": "^0.0.1-security",
+    "install": "^0.13.0",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
     "path": "^0.12.7",
     "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.1",
     "sass": "^1.70.0",
     "vite": "^5.0.12",
     "vite-plugin-vuetify": "^2.0.1",

frontend/pages/index.vue

@@ -78,7 +78,8 @@ export default {
         });
 
         const { t } = useI18n();
-        const climbingRoutes = ref([]);
+        //const climbingRoutes = ref([]);
+        const { pending, data: climbingRoutes } = useLazyFetch('/api/climbingroute');
         const selectedDifficulty = ref('');
         const selectedLocation = ref('');
         const searchRouteName = ref('');
@@ -145,14 +146,6 @@ export default {
             return filteredRoutes;
         });
 
-        onMounted(async () => {
-            try {
-                climbingRoutes.value = await getAllClimbingRoutes();
-            } catch (error) {
-                console.error('Error loading climbing routes:', error);
-            }
-        });
-
         return {
             climbingRoutes,
             selectedDifficulty,

frontend/pages/login.vue

@@ -79,13 +79,13 @@ export default {
         const loginFailed = ref(false);
         const loginSuccess = ref(false);
         const showPassword = ref(false);
+        const mainStore = useMainStore();
 
         const handleLogin = async () => {
             try {
                 loginFailed.value = false;
                 const token = await loginUser(email.value, password.value);
                 // Save the user data to the Vuex store
-                const mainStore = useMainStore();
                 mainStore.setToken(token);
                 // Redirect the user to the Dashboard
                 navigateTo('/dashboard');
@@ -96,6 +96,13 @@ export default {
             }
         };
 
+        watchEffect(() => {
+            const token = mainStore.getToken;
+            if (token) {
+                navigateTo('/dashboard');
+            }
+        });
+
         return {
             email,
             password,

frontend/plugins/i18n.js

@@ -3,7 +3,7 @@ import { useMainStore } from "#imports"
 
 export default defineNuxtPlugin(() => {
   const mainStore = useMainStore()
-  const locale = mainStore.getLocale() || 'de'
+  const locale = mainStore.getLocale || 'de'
 
   return {
     legacy: false,

frontend/plugins/persistStore.server.js

@@ -0,0 +1,31 @@
+// plugins/persistStore.server.js
+import { watch } from 'vue';
+import { useMainStore } from '~/stores/main';
+
+export default defineNuxtPlugin(nuxtApp => {
+  const mainStore = useMainStore();
+  const cookie = useCookie('verti-grade');
+
+  nuxtApp.hook('app:beforeMount', () => {
+    loadStore();
+    watch(() => mainStore.$state, saveStore, { deep: true });
+  });
+
+
+  function saveStore() {
+    const state = JSON.stringify(mainStore.$state);
+    cookie.value = state;
+  }
+
+  function loadStore() {
+    const cookieValue = JSON.stringify(cookie.value)
+    if (cookieValue) {
+      try {
+        const parsedState = JSON.parse(cookieValue);
+        mainStore.$patch(parsedState);
+      } catch (error) {
+        console.error('Error parsing state from cookie:', error);
+      }
+    }
+  }
+});

frontend/plugins/vuetify.js

@@ -70,7 +70,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     };
 
     const store = useMainStore();
-    const defaultTheme = store.getColorTheme();
+    const defaultTheme = store.getColorTheme;
 
     // Create Vuetify instance with your theme
     const vuetify = createVuetify({

frontend/services/config.js

@@ -13,7 +13,7 @@ API.interceptors.request.use(
     const mainStore = useMainStore();
 
     // Directly access the token from the store
-    const token = mainStore.getToken();
+    const token = mainStore.getToken;
 
     if (token) {
       // If your token is an object and you need to transform it, do it here.