From 2f86b4c434b91f9113c856f9e867d0e16b558954 Mon Sep 17 00:00:00 2001
From: steev <mauricefl@outlook.de>
Date: Sat, 4 Jan 2025 23:15:36 +0100
Subject: [PATCH] feat: :sparkles: introduced views, introduced vue_router,
 made settings a view

---
 web/package-lock.json                         |  51 ++++++++
 web/package.json                              |   1 +
 web/src/App.vue                               |  17 +--
 web/src/components/cookiePrompt.vue           |   4 -
 web/src/components/navbar.vue                 |  21 ++-
 .../components/{cloud.vue => pointcloud.vue}  |   0
 web/src/main.ts                               |  26 +++-
 web/src/views/driver.vue                      |  19 +++
 web/src/views/home.vue                        |  19 +++
 web/src/views/login.vue                       |  19 +++
 web/src/views/register.vue                    |  19 +++
 web/src/views/route.vue                       |  19 +++
 web/src/views/settings.vue                    | 122 ++++++++++++++++++
 web/src/views/uploadcenter.vue                |  19 +++
 web/src/views/vehicle.vue                     |  19 +++
 15 files changed, 351 insertions(+), 24 deletions(-)
 rename web/src/components/{cloud.vue => pointcloud.vue} (100%)
 create mode 100644 web/src/views/driver.vue
 create mode 100644 web/src/views/home.vue
 create mode 100644 web/src/views/login.vue
 create mode 100644 web/src/views/register.vue
 create mode 100644 web/src/views/route.vue
 create mode 100644 web/src/views/settings.vue
 create mode 100644 web/src/views/uploadcenter.vue
 create mode 100644 web/src/views/vehicle.vue

diff --git a/web/package-lock.json b/web/package-lock.json
index bb8bb09..d2591f6 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -17,6 +17,7 @@
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
+        "@types/three": "^0.171.0",
         "@vitejs/plugin-vue": "^5.1.2",
         "@vue/cli-plugin-pwa": "~5.0.0",
         "daisyui": "^4.12.10",
@@ -2683,6 +2684,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -2971,6 +2978,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "dev": true
+    },
     "node_modules/@types/supercluster": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
@@ -2979,12 +2992,32 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/three": {
+      "version": "0.171.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.171.0.tgz",
+      "integrity": "sha512-oLuT1SAsT+CUg/wxUTFHo0K3NtJLnx9sJhZWQJp/0uXqFpzSk1hRHmvWvpaAWSfvx2db0lVKZ5/wV0I0isD2mQ==",
+      "dev": true,
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "dev": true
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
+      "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.13",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
@@ -3643,6 +3676,12 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.52",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.52.tgz",
+      "integrity": "sha512-eI883Nlag2hGIkhXxAnq8s4APpqXWuPL3Gbn2ghiU12UjLvfCbVqHK4XfXl3eLRTatqcMmeK7jws7IwWsGfbzw==",
+      "dev": true
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -6312,6 +6351,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true
+    },
     "node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -8486,6 +8531,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "dev": true
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
diff --git a/web/package.json b/web/package.json
index bd93bd5..904250c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,7 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
+    "@types/three": "^0.171.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/cli-plugin-pwa": "~5.0.0",
     "daisyui": "^4.12.10",
diff --git a/web/src/App.vue b/web/src/App.vue
index 47ad784..eb50392 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,15 +1,14 @@
 <script lang="ts">
 import {defineComponent, Ref, ref, SetupContext} from 'vue';
 import DebugLog from "./classes/debugger";
-import Settings from "./components/Settings.vue";
 import cookiePrompt from "./components/cookiePrompt.vue";
 import FileUpload from './components/fileUpload.vue';
-import PointCloud from './components/cloud.vue';
+import PointCloud from './components/pointcloud.vue';
 import Navbar from './components/navbar.vue';
+import { RouterView } from 'vue-router';
 export default defineComponent({
-  components: {Settings, cookiePrompt, PointCloud, Navbar},
+  components: {cookiePrompt, PointCloud, Navbar},
   setup() {
-    var showSettings:Ref<boolean> = ref(false);
     var showCookiePrompt:Ref<boolean> = ref(localStorage.getItem('allow-data-storage') == undefined);
       
 
@@ -32,11 +31,7 @@ export default defineComponent({
     ]
     DebugLog(debugInputs);
 
-    const toggleSettings = () => {
-      showSettings.value = !showSettings.value;
-    }
-
-    return { showSettings, toggleSettings, showCookiePrompt };
+    return { showCookiePrompt };
   },
 });
 </script>
@@ -44,10 +39,8 @@ export default defineComponent({
 <template>
   <div class="appContainer">
     <Navbar></Navbar>
-    <Settings v-if="showSettings" @close="toggleSettings"/>
     <cookiePrompt v-if="showCookiePrompt"></cookiePrompt>
-    <FileUpload></FileUpload>
-    <PointCloud></PointCloud>
+    <RouterView></RouterView>
   </div>        
 </template>
 
diff --git a/web/src/components/cookiePrompt.vue b/web/src/components/cookiePrompt.vue
index 06054e4..5199ca0 100644
--- a/web/src/components/cookiePrompt.vue
+++ b/web/src/components/cookiePrompt.vue
@@ -1,16 +1,12 @@
 <script lang="ts">
 import {defineComponent, SetupContext, ref, Ref} from 'vue';
 import GetLocalizedText from "../classes/language";
-import {SettingsHandler, SettingsNodes} from "../classes/settings";
-import ISettings from "../interfaces/ISettings"
 
 export default defineComponent({
     emits: ['close'],
     name: 'cookiePrompt',
     setup(_, { emit }: SetupContext) {
 
-        var settings:ISettings = new SettingsHandler();
-
         function acceptCookies(){
             localStorage.setItem("allow-data-storage", "true")
         }
diff --git a/web/src/components/navbar.vue b/web/src/components/navbar.vue
index 9630791..b6d828f 100644
--- a/web/src/components/navbar.vue
+++ b/web/src/components/navbar.vue
@@ -3,8 +3,15 @@ import {defineComponent, SetupContext} from 'vue';
 
 export default defineComponent({
   name: 'Navbar',
+  emits: ['settings'],
   setup(_, { emit }: SetupContext) {
+
+    const toggleSettings = () => {
+      emit("settings");
+    };
+
     return { 
+        toggleSettings
     };
   },
 });
@@ -47,19 +54,19 @@ export default defineComponent({
   </div>
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1">
-      <li><a>Home</a></li>
-      <li><a>Driver</a></li>
-      <li><a>Vehicle</a></li>
-      <li><a>Routes</a></li>
+      <li><RouterLink to="/">Home</RouterLink></li>
+      <li><RouterLink to="/driver">Driver</RouterLink></li>
+      <li><RouterLink to="/vehicle">Vehicle</RouterLink></li>
+      <li><RouterLink to="/route">Routes</RouterLink></li>
     </ul>
   </div>
   <div class="navbar-end">
     <details class="dropdown">
         <summary class="btn m-1">menu</summary>
         <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-            <li><a>login</a></li>
-            <li><a>register</a></li>
-            <li><a>Settings</a></li>
+          <li><RouterLink to="/login">Login</RouterLink></li>
+          <li><RouterLink to="/register">Register</RouterLink></li>
+          <li><RouterLink to="/settings">Settings</RouterLink></li>
         </ul>
     </details>
   </div>
diff --git a/web/src/components/cloud.vue b/web/src/components/pointcloud.vue
similarity index 100%
rename from web/src/components/cloud.vue
rename to web/src/components/pointcloud.vue
diff --git a/web/src/main.ts b/web/src/main.ts
index 6c141ba..ffad234 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,11 +1,35 @@
 import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
+import { createMemoryHistory, createRouter } from "vue-router"
 
 // @ts-ignore
 import { createThemeManager } from 'vue-daisyui-theme-manager';
+import Home from './views/home.vue';
+import Driver from './views/driver.vue';
+import Route from './views/route.vue';
+import Vehicle from './views/vehicle.vue';
+import Settings from './views/settings.vue';
+
+const routes = [
+    { path: '/', component: Home },
+    { path: '/driver', component: Driver },
+    { path: '/driver/:id', component: Driver },
+    { path: '/vehicle', component: Vehicle },
+    { path: '/vehicle/:id', component: Vehicle },
+    { path: '/route', component: Route },
+    { path: '/route/:id', component: Route },
+    { path: '/route/:from/:to', component: Route },
+    { path: '/settings', component: Settings },
+]
+
+const router = createRouter({
+    history: createMemoryHistory(),
+    routes,
+})
 
 const app = createApp(App);
 
 // Mount the app
-app.mount('#app');
+app.use(router);
+app.mount('#app');
\ No newline at end of file
diff --git a/web/src/views/driver.vue b/web/src/views/driver.vue
new file mode 100644
index 0000000..80ea68f
--- /dev/null
+++ b/web/src/views/driver.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+  name: 'map',
+  setup(_, { emit }: SetupContext) {
+    return { 
+    };
+  },
+});
+</script>
+
+
+<template>
+  driver
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/home.vue b/web/src/views/home.vue
new file mode 100644
index 0000000..65c3695
--- /dev/null
+++ b/web/src/views/home.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+  name: 'map',
+  setup(_, { emit }: SetupContext) {
+    return { 
+    };
+  },
+});
+</script>
+
+
+<template>
+  home
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/login.vue b/web/src/views/login.vue
new file mode 100644
index 0000000..7bac902
--- /dev/null
+++ b/web/src/views/login.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+  name: 'map',
+  setup(_, { emit }: SetupContext) {
+    return { 
+    };
+  },
+});
+</script>
+
+
+<template>
+  user login
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/register.vue b/web/src/views/register.vue
new file mode 100644
index 0000000..cca2da2
--- /dev/null
+++ b/web/src/views/register.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+  name: 'map',
+  setup(_, { emit }: SetupContext) {
+    return { 
+    };
+  },
+});
+</script>
+
+
+<template>
+  user register
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/route.vue b/web/src/views/route.vue
new file mode 100644
index 0000000..44dfd50
--- /dev/null
+++ b/web/src/views/route.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+  name: 'map',
+  setup(_, { emit }: SetupContext) {
+    return { 
+    };
+  },
+});
+</script>
+
+
+<template>
+  route
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/settings.vue b/web/src/views/settings.vue
new file mode 100644
index 0000000..7b5c987
--- /dev/null
+++ b/web/src/views/settings.vue
@@ -0,0 +1,122 @@
+<script lang="ts">
+import { defineComponent, SetupContext, ref, Ref } from 'vue';
+import GetLocalizedText from "../classes/language";
+
+export default defineComponent({
+    emits: ['close'],
+    name: 'settings',
+    setup(_, { emit }: SetupContext) {
+        var attributeTheme: Ref<string> = ref(document.documentElement.getAttribute("data-theme") ?? "dark")
+        var attributeLang: Ref<string> = ref(document.documentElement.getAttribute("data-language") ?? "english")
+
+        // localized text
+        var settingsThemeLocalized: Ref<string> = ref("");
+        var settingsLangLocalized: Ref<string> = ref("");
+        async function getLocalization() {
+            settingsThemeLocalized.value = await GetLocalizedText("theme")
+            settingsLangLocalized.value = await GetLocalizedText("lang")
+        }
+
+        // TODO: if time rework this to function with the new intended settings class
+        // NOTE: this has low priority as the system inplace allthough not very intuitive works
+        const changeTheme = (theme: string) => {
+
+            document.documentElement.setAttribute('data-theme', theme);
+            if (localStorage.getItem("allow-data-storage") == "true") {
+                localStorage.setItem("theme", theme)
+            }
+
+        }
+
+        const changeLang = (lang: string) => {
+            document.documentElement.setAttribute('data-language', lang);
+            if (localStorage.getItem("allow-data-storage") == "true") {
+                localStorage.setItem("lang", lang)
+            }
+        }
+
+        getLocalization()
+        const close = () => {
+            emit("close");
+        };
+
+        return {
+            close,
+            changeTheme,
+            changeLang,
+            settingsThemeLocalized,
+            settingsLangLocalized,
+            attributeTheme,
+            attributeLang
+        };
+    },
+});
+</script>
+
+
+<template>
+    <div class="card bg-base-100 w-full shadow-xl" style="">
+        <div class="card-body">
+
+            <h2 class="card-title">Settings</h2>
+            <label class="input input-bordered flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
+                    class="h-4 w-4 opacity-70">
+                    <path
+                        d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+                    <path
+                        d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+                </svg>
+                <input type="text" class="grow" placeholder="Email" />
+            </label>
+            <label class="input input-bordered flex items-center gap-2">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
+                    class="h-4 w-4 opacity-70">
+                    <path fill-rule="evenodd"
+                        d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+                        clip-rule="evenodd" />
+                </svg>
+                <input type="password" class="grow" value="password" />
+            </label>
+
+            <div class="w-full">
+                {{ settingsLangLocalized }}:
+                <div class="dropdown dropdown-bottom">
+                    <div tabindex="0" role="button" class="btn m-1"> {{ attributeLang }}</div>
+                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-fill p-2 shadow">
+                        <li @click="changeLang('ger')"><a>Deutsch</a></li>
+                        <li @click="changeLang('en')"><a>English</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="w-full">
+                {{ settingsThemeLocalized }}:
+                <div class="dropdown dropdown-bottom">
+                    <div tabindex="0" role="button" class="btn m-1"> {{ attributeTheme }}</div>
+                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-fill p-2 shadow">
+                        <li @click="changeTheme('dark')"><a>Dark</a></li>
+                        <li @click="changeTheme('light')"><a>Light</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+.settingsBody {
+    position: absolute;
+    margin: 10% 10% 0 10%;
+    width: 80%;
+    z-index: 10;
+}
+
+.btn.close {
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/uploadcenter.vue b/web/src/views/uploadcenter.vue
new file mode 100644
index 0000000..e6e1d0b
--- /dev/null
+++ b/web/src/views/uploadcenter.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+    name: 'map',
+    setup(_, { emit }: SetupContext) {
+        return { 
+        };
+    },
+});
+</script>
+
+
+<template>
+    upload center
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/web/src/views/vehicle.vue b/web/src/views/vehicle.vue
new file mode 100644
index 0000000..12ae9c7
--- /dev/null
+++ b/web/src/views/vehicle.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+import {defineComponent, SetupContext} from 'vue';
+
+export default defineComponent({
+  name: 'map',
+  setup(_, { emit }: SetupContext) {
+    return { 
+    };
+  },
+});
+</script>
+
+
+<template>
+  vehicle
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file