feat(ui): add 'Not found' catch all

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 471a240ab579d7dbb3908368e12440e22c6c8a67..f8fe8b247a8f3474fc36c7a1e1bf9f385e38dc79 100644 (file)
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -1,6 +1,9 @@
 <template>
   <router-view />
-  <Container v-show="$route.path !== '/'" id="action-container">
+  <Container
+    v-show="$route.name !== 'charging-stations' && $route.name !== 'not-found'"
+    id="action-container"
+  >
     <router-view name="action" />
   </Container>
 </template>

diff --git a/ui/web/src/router/index.ts b/ui/web/src/router/index.ts
index bdb22503198337c01c2786bea3dc72c3156be686..23cca6a4913c23e3d65ecaceae24c539ad4c5010 100644 (file)
--- a/ui/web/src/router/index.ts
+++ b/ui/web/src/router/index.ts
@@ -3,6 +3,7 @@ import ChargingStationsView from '@/views/ChargingStationsView.vue'
 import StartTransaction from '@/components/actions/StartTransaction.vue'
 import AddChargingStations from '@/components/actions/AddChargingStations.vue'
 import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
+import NotFoundView from '@/views/NotFoundView.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -39,6 +40,13 @@ export const router = createRouter({
         action: StartTransaction
       },
       props: { default: false, action: true }
+    },
+    {
+      name: 'not-found',
+      path: '/:pathMatch(.*)*',
+      components: {
+        default: NotFoundView
+      }
     }
   ]
 })

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 213832c1ec2862b1b7d3b0230479cb47abdf282b..c250b9a62207235d9b28aa6ac4813515204de080 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -20,7 +20,7 @@
                   () => {
                     setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
                     clearToggleButtons()
-                    $router.currentRoute.value.name !== 'charging-stations' &&
+                    $route.name !== 'charging-stations' &&
                       $router.push({ name: 'charging-stations' })
                   },
                   { once: true }

diff --git a/ui/web/src/views/NotFoundView.vue b/ui/web/src/views/NotFoundView.vue
new file mode 100644 (file)
index 0000000..a87072a
--- /dev/null
+++ b/ui/web/src/views/NotFoundView.vue
@@ -0,0 +1,15 @@
+<template><Container id="not-found">404 - Not found</Container></template>
+
+<script setup lang="ts">
+import Container from '@/components/Container.vue'
+</script>
+
+<style>
+#not-found {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  font-weight: bold;
+}
+</style>