From 74cfa283a1d20a917f2f0aac84ab8cda536c31d6 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Sat, 4 Oct 2025 16:43:09 +0200
Subject: [PATCH] Add basic routing and layout structure

Replaced App.vue with Layout.vue to serve as the main layout. Added Home and 404NotFound route components and configured router to handle home and fallback routes. Updated main.ts to use the new layout component.
---
 GUI/src/App.vue                | 11 -----------
 GUI/src/Layout.vue             |  8 ++++++++
 GUI/src/main.ts                |  2 +-
 GUI/src/router/index.ts        | 11 ++++++++++-
 GUI/src/routes/404NotFound.vue | 21 +++++++++++++++++++++
 GUI/src/routes/Home.vue        |  9 +++++++++
 6 files changed, 49 insertions(+), 13 deletions(-)
 delete mode 100644 GUI/src/App.vue
 create mode 100644 GUI/src/Layout.vue
 create mode 100644 GUI/src/routes/404NotFound.vue
 create mode 100644 GUI/src/routes/Home.vue

diff --git a/GUI/src/App.vue b/GUI/src/App.vue
deleted file mode 100644
index abfd315..0000000
--- a/GUI/src/App.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
-</template>
-
-<style scoped></style>
diff --git a/GUI/src/Layout.vue b/GUI/src/Layout.vue
new file mode 100644
index 0000000..adc4f91
--- /dev/null
+++ b/GUI/src/Layout.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>You did it!</h1>
+  <router-view></router-view>
+</template>
+
+<style scoped></style>
diff --git a/GUI/src/main.ts b/GUI/src/main.ts
index c09854a..08d2815 100644
--- a/GUI/src/main.ts
+++ b/GUI/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './Layout.vue'
 import router from './router'
 import vuetify from './plugins/vuetify'
 
diff --git a/GUI/src/router/index.ts b/GUI/src/router/index.ts
index e1eab52..07d76ff 100644
--- a/GUI/src/router/index.ts
+++ b/GUI/src/router/index.ts
@@ -1,8 +1,17 @@
+import Home from '@/routes/Home.vue'
+import NotFound from '@/routes/404NotFound.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    {
+      name: 'Home',
+      path: '/',
+      component: Home,
+    },
+    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
+  ],
 })
 
 export default router
diff --git a/GUI/src/routes/404NotFound.vue b/GUI/src/routes/404NotFound.vue
new file mode 100644
index 0000000..7b62b86
--- /dev/null
+++ b/GUI/src/routes/404NotFound.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>404</h1>
+</template>
+
+<style scoped>
+.error-title {
+  font-size: 3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  letter-spacing: 2px;
+  color: #fff;
+}
+
+.error-message {
+  font-size: 1.25rem;
+  opacity: 0.85;
+  color: #fff;
+}
+</style>
diff --git a/GUI/src/routes/Home.vue b/GUI/src/routes/Home.vue
new file mode 100644
index 0000000..eba75b9
--- /dev/null
+++ b/GUI/src/routes/Home.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <h1>Home Vue</h1>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file