Added CreatePage; Impl. full-height-wrapper for CreatePage

src/main/webapp/src/App.vue

@@ -2,7 +2,7 @@
 import { provide, ref } from 'vue';
 import { RouterView } from 'vue-router';
 
-import { infoModalShowFnKey } from './services/UtilService';
+import { infoModalShowFnKey, navbarKey } from './services/UtilService';
 
 import NavBar from '@/components/blocks/NavBar.vue';
 import GenericInfoModal from '@/components/modals/GenericInfoModal.vue';
@@ -30,11 +30,13 @@ function showInfoModal( title: string, text: string ): void {
 
 provide( infoModalShowFnKey, showInfoModal );
 
+const navbar = ref<InstanceType<typeof NavBar> | undefined>(undefined);
+provide( navbarKey, navbar);
 </script>
 
 <template>
   <div class="vh-100 overflow-y-scroll overflow-x-hidden">
-    <NavBar :userLoading="userLoading" />
+    <NavBar ref="navbar" :userLoading="userLoading" />
 
     <RouterView />
 

src/main/webapp/src/components/blocks/BoardSelector.vue

@@ -1,6 +1,10 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+const router = useRouter();
 
 const boards = ref([{
   id: 1,
@@ -15,6 +19,10 @@ const boards = ref([{
   id: 4,
   boardName: "Mocka Board 2",
 }]);
+
+function createNewBoard(){
+  router.push( { name: 'create' } );
+}
 </script>
 
 <template>
@@ -44,5 +52,11 @@ const boards = ref([{
         </div>
       </div>
     </template>
+    <div class="col-4 mb-3">
+      <button class="btn btn-outline-primary w-100 h-100 d-flex flex-column justify-content-center" @click="createNewBoard">
+        Create new Board
+        <FontAwesomeIcon :icon="['fas', 'plus']" size="2x"/>
+      </button>
+    </div>
   </div>
 </template>

src/main/webapp/src/components/blocks/BoardView.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+</script>
+
+<template>
+  <div>
+    Board View
+  </div>
+</template>

src/main/webapp/src/components/blocks/NavBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -8,6 +8,7 @@ import ThemeChanger from '@/components/blocks/ThemeChanger.vue';
 import LocaleChanger from '@/components/blocks/LocaleChanger.vue';
 import { useUserStore } from '@/stores/UserStore';
 import { authService } from '@/services/AuthService';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 const navNames = {
   HOME: "home",
@@ -21,6 +22,15 @@ const route = useRoute();
 
 const userStore = useUserStore();
 
+const navbar = ref<HTMLElement>();
+defineExpose({
+ navElement: navbar
+});
+
+onMounted( () => {
+  console.log(typeof navbar.value);
+})
+
 const isActiveNav = ( navName: string ) => {
   switch( navName ) {
     case navNames.HOME:
@@ -54,7 +64,7 @@ userStore.userCheckPromise
 </script>
 
 <template>
-  <nav id="navbar-main" class="navbar navbar-expand-lg bg-dark-accented">
+  <nav ref="navbar" id="navbar-main" class="navbar navbar-expand-lg bg-dark-accented">
     <div class="container px-5">
 
       <div class="position-absolute start-0 top-50 translate-middle-y d-flex ms-3 gap-3">
@@ -90,13 +100,13 @@ userStore.userCheckPromise
 
       <div class="position-absolute end-0 top-50 translate-middle-y d-flex me-3 align-items-center">
         <template v-if=" userCheckLoading ">
-
+          <FontAwesomeIcon :icon="['fas', 'spinner']" spin />
         </template>
         <template v-else-if=" userStore.loggedIn ">
-          <div class="dropdown-toggle pointer" data-bs-toggle="dropdown" aria-expanded="false">
+          <button class="dropdown-toggle pointer bg-dark py-1 px-2 btn" data-bs-toggle="dropdown" aria-expanded="false">
             <img class="pfp-sizing rounded-circle border border-1 border-primary" :src="userStore.pfpSource"
               alt="The Profile Pic of the user" />
-          </div>
+          </button>
           <ul class="dropdown-menu dropdown-menu-end">
             <li>
               <p class="dropdown-header fs-5 pt-0 text-primary fw-semibold">{{ userStore.getUserOutput }}</p>

src/main/webapp/src/components/pages/CreatePage.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import BoardView from '../blocks/BoardView.vue';
+import { computed, inject, onMounted, type Ref } from 'vue';
+import { navbarKey } from '@/services/UtilService';
+import type NavBar from '../blocks/NavBar.vue';
+
+const { t } = useI18n();
+
+const navbar = inject<Ref<InstanceType<typeof NavBar> | null>>(navbarKey);
+onMounted( () => {
+  console.log(navbar);
+  console.log(navbar?.value?.navElement);
+})
+
+function test() {
+  console.log(navbar);
+  console.log(navbar?.value?.navElement);
+}
+
+const navbarHeight = computed( () => {
+  return navbar?.value?.navElement?.clientHeight;
+});
+
+const restHeight = computed( () => {
+  return { height: `calc(100vh - ${navbarHeight.value}px)`};
+})
+
+</script>
+
+<template>
+  <div :style="restHeight">
+    <BoardView />
+    Create Page
+  </div>
+</template>

src/main/webapp/src/main.ts

@@ -9,7 +9,7 @@ import '@/assets/scss/customized_bootstrap.scss';
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faSun, faMoon, faCircleHalfStroke, faEdit, faPlay, faSpinner, faLanguage, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { faSun, faMoon, faCircleHalfStroke, faEdit, faPlay, faSpinner, faLanguage, faGlobe, faPlus } from '@fortawesome/free-solid-svg-icons';
 
 import enMessages from './locales/en.json';
 import deMessages from './locales/de.json';
@@ -33,6 +33,7 @@ library.add(
   faSpinner,
   faLanguage,
   faGlobe,
+  faPlus,
 )
 
 const app = createApp( App );

src/main/webapp/src/router/index.ts

@@ -1,11 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
+
+import { useUserStore } from '@/stores/UserStore';
+
 import HomePage from '@/components/pages/HomePage.vue';
 import AboutPage from '@/components/pages/AboutPage.vue';
 import LoginPage from '@/components/pages/LoginPage.vue';
 import SignupPage from '@/components/pages/SignupPage.vue';
 import GamePage from '@/components/pages/GamePage.vue';
 import ProfilePage from '@/components/pages/ProfilePage.vue';
-import { useUserStore } from '@/stores/UserStore';
+import CreatePage from '@/components/pages/CreatePage.vue';
 
 const router = createRouter( {
   history: createWebHistory( import.meta.env.BASE_URL ),
@@ -59,9 +62,9 @@ const router = createRouter( {
       }
     },
     {
-      path: '/board',
-      name: 'board',
-      component: ProfilePage,
+      path: '/create',
+      name: 'create',
+      component: CreatePage,
       meta: {
         requiresAuth: true,
       }

src/main/webapp/src/services/UtilService.ts

@@ -1,3 +1,6 @@
-import type { InjectionKey } from 'vue';
+import type NavBar from '@/components/blocks/NavBar.vue';
+import type { InjectionKey, Ref } from 'vue';
 
-export const infoModalShowFnKey = Symbol() as InjectionKey<Function>;
+export const infoModalShowFnKey = Symbol() as InjectionKey<Function>;
+export const navbarKey = Symbol() as InjectionKey<Ref<InstanceType<typeof NavBar> | undefined>>;
+// export const navbarKey = Symbol() as InjectionKey<Ref<InstanceType<typeof NavBar> | null>>;