From 4db53af7ce66f37c08f1383b7d3355ad02c2c073 Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 23 Aug 2022 15:07:37 +0200
Subject: [PATCH] Use enum to identify routes.

---
 .../src/components/admin/StatisticsCard.vue   | 18 ++++++---------
 frontend/src/components/page/PageHeader.vue   |  9 ++++----
 frontend/src/router/index.ts                  | 21 ++++++++++++++----
 frontend/src/views/AdminDashboardView.vue     | 11 +++++-----
 frontend/src/views/AdminNodesView.vue         | 22 ++++++++++---------
 5 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/admin/StatisticsCard.vue b/frontend/src/components/admin/StatisticsCard.vue
index 25b93f3..1bc5b1e 100644
--- a/frontend/src/components/admin/StatisticsCard.vue
+++ b/frontend/src/components/admin/StatisticsCard.vue
@@ -1,29 +1,25 @@
 <script setup lang="ts">
 import {computed, defineProps} from "vue";
 import type {ComponentVariant, NodesFilter} from "@/types";
+import type {RouteName} from "@/router";
+import router, {route} from "@/router";
 
 interface Props {
     title: string;
     icon: string;
     variant: ComponentVariant;
     value: number;
-    link: string;
+    route: RouteName;
     filter?: NodesFilter;
 }
 
 const props = defineProps<Props>();
 
 const linkTarget = computed(() => {
-    if (props.filter) {
-        return {
-            path: props.link,
-            query: {
-                filter: JSON.stringify(props.filter),
-            },
-        }
-    } else {
-        return props.link;
-    }
+    const query = props.filter && {
+        filter: JSON.stringify(props.filter),
+    };
+    return route(props.route, query);
 });
 </script>
 
diff --git a/frontend/src/components/page/PageHeader.vue b/frontend/src/components/page/PageHeader.vue
index 9581d27..e99e1b7 100644
--- a/frontend/src/components/page/PageHeader.vue
+++ b/frontend/src/components/page/PageHeader.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useConfigStore } from "@/stores/config";
+import {route, RouteName} from "@/router";
 
 const config = useConfigStore();
 </script>
@@ -7,7 +8,7 @@ const config = useConfigStore();
 <template>
     <header v-if="config.getConfig">
         <nav>
-            <RouterLink class="logo" to="/">
+            <RouterLink class="logo" :to="route(RouteName.HOME)">
                 <img
                     src="/icon.svg"
                     alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"
@@ -16,13 +17,13 @@ const config = useConfigStore();
             </RouterLink>
 
             <h1>
-                <RouterLink to="/">
                     {{ config.getConfig.community.name }} – Knotenverwaltung
+                <RouterLink :to="route(RouteName.HOME)">
                 </RouterLink>
             </h1>
 
-            <RouterLink class="admin-link" to="/admin">
-                <i class="fa fa-wrench" aria-hidden="true" /> Admin-Panel
+            <RouterLink class="admin-link" :to="route(RouteName.ADMIN)">
+                <i class="fa fa-wrench" aria-hidden="true"/> Admin-Panel
             </RouterLink>
         </nav>
     </header>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index bf5a0fb..0394c0c 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,25 +1,38 @@
-import {createRouter, createWebHistory} from "vue-router";
+import {createRouter, createWebHistory, type LocationQueryRaw, type RouteLocationRaw} from "vue-router";
 import AdminDashboardView from "@/views/AdminDashboardView.vue";
 import AdminNodesView from "@/views/AdminNodesView.vue";
 import HomeView from "@/views/HomeView.vue";
 import {isNodesFilter, isNodeSortField, isSortDirection, type SearchTerm} from "@/types";
 
+export enum RouteName {
+    HOME = "home",
+    ADMIN = "admin",
+    ADMIN_NODES = "admin-nodes",
+}
+
+export function route(name: RouteName, query?: LocationQueryRaw): RouteLocationRaw {
+    return {
+        name,
+        query,
+    };
+}
+
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
             path: "/",
-            name: "home",
+            name: RouteName.HOME,
             component: HomeView,
         },
         {
             path: "/admin",
-            name: "admin",
+            name: RouteName.ADMIN,
             component: AdminDashboardView,
         },
         {
             path: "/admin/nodes",
-            name: "admin-nodes",
+            name: RouteName.ADMIN_NODES,
             component: AdminNodesView,
             props: route => {
                 let filter: any;
diff --git a/frontend/src/views/AdminDashboardView.vue b/frontend/src/views/AdminDashboardView.vue
index 35a1217..a3d607b 100644
--- a/frontend/src/views/AdminDashboardView.vue
+++ b/frontend/src/views/AdminDashboardView.vue
@@ -2,6 +2,7 @@
 import StatisticsCard from "@/components/admin/StatisticsCard.vue";
 import {useStatisticsStore} from "@/stores/statistics";
 import {ComponentVariant, MonitoringState} from "@/types";
+import {RouteName} from "@/router";
 import PageContainer from "@/components/page/PageContainer.vue";
 
 const statistics = useStatisticsStore();
@@ -23,14 +24,14 @@ refresh();
                 icon="circle-o"
                 :variant="ComponentVariant.INFO"
                 :value="statistics.getStatistics.nodes.registered"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
             />
             <StatisticsCard
                 title="Mit hinterlegtem fastd-Key"
                 icon="lock"
                 :variant="ComponentVariant.WARNING"
                 :value="statistics.getStatistics.nodes.withVPN"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{hasKey: true}"
             />
             <StatisticsCard
@@ -38,7 +39,7 @@ refresh();
                 icon="map-marker"
                 :variant="ComponentVariant.SUCCESS"
                 :value="statistics.getStatistics.nodes.withCoords"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{hasCoords: true}"
             />
             <StatisticsCard
@@ -46,7 +47,7 @@ refresh();
                 icon="heartbeat"
                 :variant="ComponentVariant.SUCCESS"
                 :value="statistics.getStatistics.nodes.monitoring.active"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{monitoringState: MonitoringState.ACTIVE}"
             />
             <StatisticsCard
@@ -54,7 +55,7 @@ refresh();
                 icon="envelope"
                 :variant="ComponentVariant.DANGER"
                 :value="statistics.getStatistics.nodes.monitoring.pending"
-                link="/admin/nodes"
+                :route="RouteName.ADMIN_NODES"
                 :filter="{monitoringState: MonitoringState.PENDING}"
             />
         </div>
diff --git a/frontend/src/views/AdminNodesView.vue b/frontend/src/views/AdminNodesView.vue
index 44c8710..0b273f8 100644
--- a/frontend/src/views/AdminNodesView.vue
+++ b/frontend/src/views/AdminNodesView.vue
@@ -8,7 +8,7 @@ import ActionButton from "@/components/form/ActionButton.vue";
 import LoadingContainer from "@/components/LoadingContainer.vue";
 import NodesFilterPanel from "@/components/nodes/NodesFilterPanel.vue";
 import {SortTH} from "@/components/table/SortTH.vue";
-import router from "@/router";
+import router, {route, RouteName} from "@/router";
 
 const NODE_PER_PAGE = 50;
 
@@ -92,15 +92,17 @@ async function updateRouterState(
     sortField: NodeSortField,
 ): Promise<void> {
     const filterStr = Object.keys(filter).length > 0 ? JSON.stringify(filter) : undefined;
-    await router.replace({
-        path: '/admin/nodes',
-        query: {
-            q: searchTerm || undefined,
-            filter: filterStr,
-            sortDir: sortDirection,
-            sortField: sortField,
-        }
-    });
+    await router.replace(
+        route(
+            RouteName.ADMIN_NODES,
+            {
+                q: searchTerm || undefined,
+                filter: filterStr,
+                sortDir: sortDirection,
+                sortField: sortField,
+            }
+        )
+    );
 }
 
 async function updateFilter(filter: NodesFilter, searchTerm: SearchTerm): Promise<void> {