freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Use enum to identify routes.

Browse source
This commit is contained in:
baldo 2022-08-23 15:07:37 +02:00
parent 68f893aa91
commit 4db53af7ce
5 changed files with 47 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/admin/StatisticsCard.vue
View file

@ -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>

9
frontend/src/components/page/PageHeader.vue
View file

@ -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>

21
frontend/src/router/index.ts
View file

@ -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;

11
frontend/src/views/AdminDashboardView.vue
View file

@ -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>

22
frontend/src/views/AdminNodesView.vue
View file

@ -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> {