VBV-85: Update Navigation

client/src/App.vue

@@ -1,7 +1,8 @@
 <template>
-  <div id="app">
-    <MainNavigationBar />
-    <RouterView />
+  <div id="app" class="flex flex-col min-h-screen">
+    <MainNavigationBar class="flex-none" />
+    <RouterView class="flex-auto" />
+    <Footer class="flex-none" />
   </div>
 </template>
 
@@ -9,6 +10,7 @@
 import * as log from 'loglevel';
 
 import MainNavigationBar from '@/components/MainNavigationBar.vue';
+import Footer from '@/components/Footer.vue';
 
 log.debug('App created');
 </script>

client/src/components/Footer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+log.debug('Footer created');
+
+</script>
+
+<template>
+  <footer
+    class="
+        px-8
+        py-4
+        bg-gray-100
+        border-t border-gray-500
+      ">
+    @2022 VBV
+  </footer>
+</template>
+
+<style scoped>
+</style>

client/src/components/MainNavigationBar.vue

@@ -26,6 +26,18 @@ function menuActive(checkPath) {
   return route.path.startsWith(checkPath);
 }
 
+function inLearningPath() {
+  return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
+}
+
+function backButtonUrl() {
+  if (route.path.startsWith('/circle/')) {
+    return '/learningpath/versicherungsvermittlerin';
+  }
+
+  return '/';
+}
+
 </script>
 
 <template>
@@ -59,12 +71,13 @@ function menuActive(checkPath) {
           <button
             type="button"
             class="
+              w-8
               text-white
               hover:text-sky-500
               focus:outline-none focus:text-sky-500
             "
           >
-            <it-icon-menu class="h-8 w-10"/>
+            <it-icon-menu class="h-8 w-8"/>
           </button>
         </div>
       </div>
@@ -81,22 +94,35 @@ function menuActive(checkPath) {
         "
       >
         <router-link
-          to="/dashboard"
+          v-if="userStore.loggedIn && !inLearningPath()"
+          to="/"
           class="nav-item"
-          :class="{'nav-item--active': menuActive('/dashboard')}"
+          :class="{'nav-item--active': route.path === '/'}"
         >
-          Dashboard
+          Cockpit
         </router-link>
         <router-link
+          v-if="userStore.loggedIn && !inLearningPath()"
           to="/shop"
           class="nav-item"
           :class="{'nav-item--active': menuActive('/shop')}"
         >
           Shop
         </router-link>
+
+        <router-link
+          v-if="userStore.loggedIn && inLearningPath()"
+          to="/learningpath/versicherungsvermittlerin"
+          class="nav-item"
+          :class="{'nav-item--active': menuActive('/learningpath/')}"
+        >
+          Lernpfad
+        </router-link>
+
         <hr class="text-white lg:hidden">
         <div class="hidden lg:list-item flex-auto"></div>
         <router-link
+          v-if="userStore.loggedIn"
           to="/mediacenter"
           class="nav-item"
           :class="{'nav-item--active': menuActive('/mediacenter')}"
@@ -104,6 +130,7 @@ function menuActive(checkPath) {
           Mediathek
         </router-link>
         <router-link
+          v-if="userStore.loggedIn"
           to="/messages"
           class="nav-item flex flex-row items-center"
         >

client/src/router/index.ts

@@ -1,5 +1,5 @@
 import {createRouter, createWebHistory} from 'vue-router'
-import HomeView from '@/views/HomeView.vue';
+import CockpitView from '@/views/CockpitView.vue';
 import LoginView from '@/views/LoginView.vue';
 import {redirectToLoginIfRequired, updateLoggedIn} from '@/router/guards';
 
@@ -7,24 +7,17 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: HomeView,
+      path: '/login',
+      component: LoginView,
       meta: {
         // no login required -> so `public === true`
         public: true
       }
     },
     {
-      path: '/login',
-      component: LoginView,
-      meta: {
-        public: true
-      }
-    },
-    {
-      path: '/dashboard',
-      component: () => import('@/views/DashboardView.vue'),
+      path: '/',
+      name: 'home',
+      component: CockpitView,
     },
     {
       path: '/shop',

client/src/views/CockpitView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+import {useUserStore} from '@/stores/user';
+
+log.debug('CockpitView created');
+
+const userStore = useUserStore();
+
+</script>
+
+<template>
+  <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-100">
+    <h1>Willkommen, {{userStore.first_name}}</h1>
+
+    <h2 class="mt-12">Deine Kurse</h2>
+
+    <div class="mt-8 p-8 break-words bg-white max-w-xl">
+      <h3>Versicherungsvermittler/in</h3>
+      <div class="mt-4">
+        <router-link class="btn-blue" to="/learningpath/versicherungsvermittlerin">
+          Weiter gehts
+        </router-link>
+      </div>
+    </div>
+
+
+  </main>
+</template>
+
+<style scoped>
+</style>

client/src/views/DashboardView.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import * as log from 'loglevel';
-
-log.debug('DashboardView created');
-
-</script>
-
-<template>
-  <main class="px-8 py-8">
-    <h1>Dashboard</h1>
-  </main>
-</template>
-
-<style scoped>
-</style>

client/src/views/LearningPathView.vue

@@ -1,14 +1,15 @@
 <script>
 import axios from 'axios';
 import * as log from 'loglevel';
+import { mapStores } from 'pinia';
 
-import MainNavigationBar from '../components/MainNavigationBar.vue';
 import LearningPathDiagram from '../components/circle/LearningPathDiagram.vue';
+import { useUserStore } from '../stores/user';
 
 export default {
 
 
-  components: {MainNavigationBar, LearningPathDiagram},
+  components: {LearningPathDiagram},
   props: ['learningPathSlug',],
   data() {
     return {
@@ -19,6 +20,9 @@ export default {
       learningSequences: [],
     }
   },
+  computed: {
+    ...mapStores(useUserStore)
+  },
   mounted() {
     log.debug('LearningPath mounted', this.learningPathSlug);
     axios({
@@ -62,7 +66,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-gray-300 h-screen" v-if="learningPathContents">
+  <div class="bg-gray-100" v-if="learningPathContents">
 
     <div class="learningpath flex flex-col">
       <div class="flex flex-col h-max">
@@ -70,21 +74,21 @@ export default {
           <LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
         </div>
 
-        <div class="text-blue-dark font-bold text-7xl m-12">
-          {{ learningPathData.title }}
-        </div>
+        <h1 class="m-12">{{ learningPathData.title }}</h1>
 
-        <div class="bg-white m-12  p-8 flex flex-row  justify-start">
-          <div class="p-8">
-
-            <h2>Willkommmen zurück, Jan</h2>
-            Du hast bereits drei circles bearbeitet, mach weiter so!
+        <div class="bg-white m-12 p-8 flex flex-row  justify-start">
+          <div class="p-8 flex-auto">
+            <h2>Willkommmen zurück, {{userStore.first_name}}</h2>
+            <p class="mt-4 text-xl">
+              Du hast bereits drei circles bearbeitet, mach weiter so!
+            </p>
           </div>
-          <div class="p-8  border-l ">Nächster Schirtt
+          <div class="p-8  border-l border-gray-500 flex-1">
+            Nächster Schirtt
             <h3>Analyse: Anwenden</h3>
-            <button class="btn-blue mt-4">
+            <router-link class="mt-4 btn-blue" to="/circle/analyse">
               Los geht's
-            </button>
+            </router-link>
           </div>
 
         </div>

client/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
-    '../server/vbv_lernwelt/**/*.{html,js}',
+    // '../server/vbv_lernwelt/**/*.{html,js}',
   ],
   theme: {
     fontFamily: {