Main Site Work

+ Updatet Router
+ "Hauptseite" mit Großem Bild

GUI/.prettierrc.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "printWidth": 100
 }

GUI/src/Layout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useTheme } from 'vuetify';
-import routesLayout from './plugins/routesLayout';
+import { Visibility, routes } from './plugins/routesLayout';
 import { useRoute } from 'vue-router';
 
 const theme = useTheme();
@@ -9,36 +9,38 @@ const route = useRoute();
 const showDrawer = ref(true);
 
 function changeTheme() {
-    theme.toggle();
-    localStorage.setItem("theme", theme.name.value);
+  theme.toggle();
+  localStorage.setItem('theme', theme.name.value);
 }
 
 function toggleDrawer() {
-    showDrawer.value = !showDrawer.value;
-    localStorage.setItem("drawer", showDrawer.value ? "Y" : "N")
+  showDrawer.value = !showDrawer.value;
+  localStorage.setItem('drawer', showDrawer.value ? 'Y' : 'N');
 }
 
 onMounted(() => {
-    theme.change(localStorage.getItem("theme") || "light");
-    showDrawer.value = localStorage.getItem("drawer")?.startsWith("Y") || false;
+  theme.change(localStorage.getItem('theme') || 'light');
+  showDrawer.value = localStorage.getItem('drawer')?.startsWith('Y') || false;
 });
 </script>
 
 <template>
   <v-app>
-    <v-app-bar image="./appBarIcon.png">
+    <v-app-bar image="/static/images/appBarIcon.png">
       <template v-slot:image>
         <v-img
-          :gradient="theme.name.value === 'dark' ? 'to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)' : 'to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)'"
+          :gradient="
+            theme.name.value === 'dark'
+              ? 'rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)'
+              : 'rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)'
+          "
         />
       </template>
       <template v-slot:prepend>
         <v-app-bar-nav-icon @click="toggleDrawer()"></v-app-bar-nav-icon>
       </template>
-      
-      <v-app-bar-title class="title">
-          Judoteam - Stadtlohn
-      </v-app-bar-title>
+
+      <v-app-bar-title class="title"> Judoteam - Stadtlohn </v-app-bar-title>
 
       <v-tooltip>
         <template #activator="{ props }">
@@ -54,7 +56,7 @@ onMounted(() => {
             <v-icon>mdi-brightness-6</v-icon>
           </v-btn>
         </template>
-        {{ theme.name.value === 'dark' ? 'Dunklen Modus aktivieren' : 'Hellen Modus aktivieren' }}
+        {{ theme.name.value === 'dark' ? 'Hellen Modus aktivieren' : 'Dunklen Modus aktivieren' }}
       </v-tooltip>
     </v-app-bar>
 
@@ -65,7 +67,7 @@ onMounted(() => {
     >
       <v-list>
         <v-list-item
-          v-for="item in routesLayout"
+          v-for="item in routes.filter((x) => x.visible === Visibility.Public)"
           :key="item.path"
           :to="item.path"
           :active="route.path === item.path"
@@ -84,4 +86,4 @@ onMounted(() => {
   </v-app>
 </template>
 
-<style scoped></style>
+<style scoped></style>

GUI/src/css/global.css

@@ -1,3 +1,11 @@
-.title{
-    font-weight: 600;
-}
+.title {
+  font-weight: 600;
+}
+
+.whiteTransp {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.blackTransp {
+  background-color: rgb(0, 0, 0, 0.5);
+}

GUI/src/plugins/routesLayout.ts

@@ -1,8 +1,42 @@
-export default [
+import Home from '@/routes/Home.vue'
+import NotFound from '@/routes/404NotFound.vue'
+import type { RouteRecordRaw } from 'vue-router'
+
+export enum Visibility {
+    Hidden,
+    Authorized,
+    Public
+}
+
+
+export interface LayoutRoute {
+  path: string,
+  name: string,
+  description: string,
+  icon: string,
+  visible: Visibility,
+  meta: RouteRecordRaw
+}
+
+export const routes: LayoutRoute[] = [
     {
         path: "/",
         name: "Startseite",
         description: "Übersicht der Anwendung",
         icon: "mdi-home",
+        visible: Visibility.Public,
+        meta: {
+            name: 'Home',
+            path: '/',
+            component: Home
+        }
+    },
+    {
+        path: "/notFound",
+        name: "Nicht Verfügbar",
+        description: "Diese Seite wurde nicht gefunden",
+        icon: "mdi-information-outline",
+        visible: Visibility.Hidden,
+        meta: { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
     }
-]
+] 

GUI/src/router/index.ts

@@ -1,17 +1,9 @@
-import Home from '@/routes/Home.vue'
-import NotFound from '@/routes/404NotFound.vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/plugins/routesLayout'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      name: 'Home',
-      path: '/',
-      component: Home,
-    },
-    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
-  ],
+  routes: routes.map(x => x.meta)
 })
 
 export default router

GUI/src/routes/Home.vue

@@ -1,10 +1,23 @@
 <script setup lang="ts">
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
 </script>
 
 <template>
-    <h1>Home Vue</h1>
-    <h2>Willkommen bei JudoWeb</h2>
+  <v-container fluid>
+    <v-img
+      class="rounded-lg"
+      height="30vh"
+      src="/static/images/house/front.jpg"
+      cover
+      :gradient="
+        theme.name.value === 'dark'
+          ? 'rgba(0,0,0,0.5), rgba(0,0,0,0.5)'
+          : 'rgba(255,255,255,0.5), rgba(255,255,255,0.5)'
+      "
+    />
+  </v-container>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>