Navigate to cell detail page on cell click

ts/route/config.ts

@@ -48,7 +48,7 @@ const routes: RouteRecordRaw[] = [
 		children: [
 			{
 				component: Cell,
-				name: "Cell",
+				name: ROUTE_NAMES.CELL_DETAIL,
 				path: "/_/cell/:cell",
 				props: true,
 			},

ts/route/name.ts

@@ -1,4 +1,5 @@
 export const ROUTE_NAMES = {
+	CELL_DETAIL: "cell-detail",
 	COMPLIANCE_ADDRESS: "compliance-address",
 	REVIEW_SITE: "review-site",
 } as const;

ts/route/use.ts

@@ -2,14 +2,14 @@ import { RouteLocationRaw } from "vue-router";
 import { ROUTE_NAMES } from "@/route/name";
 
 export function useRoutes() {
-	/*
-	const RMOComplianceAddress = (publicID: string): RouteLocationRaw => {
+	const CellDetail = (cell: string): RouteLocationRaw => {
 		return {
-			name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
-			...(publicID && { query: { publicID: publicID } })
-		}
-	}
-   */
+			name: ROUTE_NAMES.CELL_DETAIL,
+			params: {
+				cell: cell,
+			},
+		};
+	};
 	const ReviewSite = (siteID: string): RouteLocationRaw => {
 		return {
 			name: ROUTE_NAMES.REVIEW_SITE,
@@ -17,6 +17,7 @@ export function useRoutes() {
 		};
 	};
 	return {
+		CellDetail,
 		ReviewSite,
 	};
 }

ts/view/Dash.vue

@@ -244,6 +244,7 @@ import Source from "@/map/Source.vue";
 import { boundsDefault, boundsFromAPI } from "@/map/util";
 import { formatBigNumber, formatTimeRelative } from "@/format";
 import { router } from "@/route/config";
+import { useRoutes } from "@/route/use";
 import { useSessionStore } from "@/store/session";
 import { useStoreServiceRequest } from "@/store/service_request";
 import { useStoreSync } from "@/store/sync";
@@ -269,6 +270,7 @@ const dashboard = reactive({
 	recentRequests: [],
 });
 const mapCursor = ref<string>("");
+const routes = useRoutes();
 const storeServiceRequest = useStoreServiceRequest();
 const storeSync = useStoreSync();
 const session = useSessionStore();
@@ -278,11 +280,10 @@ onMounted(async () => {
 	console.log("syncs", syncs);
 });
 function doClickMap(e: MouseEvent) {
-	//router.push("/_/cell/" + cell);
 	if (!e.features || e.features.length == 0) return;
 	const feature = e.features[0];
 	const properties = feature.properties;
-	console.log("clicked", properties.cell);
+	router.push(routes.CellDetail(properties.cell));
 }
 function doLayerMouseEnter() {
 	mapCursor.value = "pointer";