diff --git a/central_frontend/src/api/DeviceApi.ts b/central_frontend/src/api/DeviceApi.ts index bd7cc69..47ab1b7 100644 --- a/central_frontend/src/api/DeviceApi.ts +++ b/central_frontend/src/api/DeviceApi.ts @@ -37,6 +37,10 @@ export interface Device { relays: DeviceRelay[]; } +export function DeviceURL(d: Device, edit: boolean = false): string { + return `/dev/${d.id}${edit ? "/edit" : ""}`; +} + export class DeviceApi { /** * Get the list of pending devices diff --git a/central_frontend/src/routes/DevicesRoute.tsx b/central_frontend/src/routes/DevicesRoute.tsx index 9b25123..142e3a8 100644 --- a/central_frontend/src/routes/DevicesRoute.tsx +++ b/central_frontend/src/routes/DevicesRoute.tsx @@ -1,5 +1,7 @@ +import DeleteIcon from "@mui/icons-material/Delete"; +import RefreshIcon from "@mui/icons-material/Refresh"; +import VisibilityIcon from "@mui/icons-material/Visibility"; import { - Tooltip, IconButton, Paper, Table, @@ -8,18 +10,18 @@ import { TableContainer, TableHead, TableRow, + Tooltip, } from "@mui/material"; import React from "react"; -import { Device, DeviceApi } from "../api/DeviceApi"; -import { AsyncWidget } from "../widgets/AsyncWidget"; -import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer"; -import RefreshIcon from "@mui/icons-material/Refresh"; -import { TimeWidget } from "../widgets/TimeWidget"; -import DeleteIcon from "@mui/icons-material/Delete"; +import { Link, useNavigate } from "react-router-dom"; +import { Device, DeviceApi, DeviceURL } from "../api/DeviceApi"; import { useAlert } from "../hooks/context_providers/AlertDialogProvider"; import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider"; import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider"; import { useSnackbar } from "../hooks/context_providers/SnackbarProvider"; +import { AsyncWidget } from "../widgets/AsyncWidget"; +import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer"; +import { TimeWidget } from "../widgets/TimeWidget"; export function DevicesRoute(): React.ReactElement { const loadKey = React.useRef(1); @@ -61,6 +63,7 @@ function ValidatedDevicesList(p: { list: Device[]; onReload: () => void; }): React.ReactElement { + const navigate = useNavigate(); const alert = useAlert(); const confirm = useConfirm(); const snackbar = useSnackbar(); @@ -108,7 +111,11 @@ function ValidatedDevicesList(p: { {p.list.map((dev) => ( - + navigate(DeviceURL(dev))} + > {dev.id} @@ -122,6 +129,13 @@ function ValidatedDevicesList(p: { + + + + + + + deleteDevice(dev)}>