Add link to device page

This commit is contained in:
Pierre HUBERT 2024-07-17 23:19:04 +02:00
parent 370084b3bb
commit 7be81fe0e9
2 changed files with 26 additions and 8 deletions

View File

@ -37,6 +37,10 @@ export interface Device {
relays: DeviceRelay[]; relays: DeviceRelay[];
} }
export function DeviceURL(d: Device, edit: boolean = false): string {
return `/dev/${d.id}${edit ? "/edit" : ""}`;
}
export class DeviceApi { export class DeviceApi {
/** /**
* Get the list of pending devices * Get the list of pending devices

View File

@ -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 { import {
Tooltip,
IconButton, IconButton,
Paper, Paper,
Table, Table,
@ -8,18 +10,18 @@ import {
TableContainer, TableContainer,
TableHead, TableHead,
TableRow, TableRow,
Tooltip,
} from "@mui/material"; } from "@mui/material";
import React from "react"; import React from "react";
import { Device, DeviceApi } from "../api/DeviceApi"; import { Link, useNavigate } from "react-router-dom";
import { AsyncWidget } from "../widgets/AsyncWidget"; import { Device, DeviceApi, DeviceURL } from "../api/DeviceApi";
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 { useAlert } from "../hooks/context_providers/AlertDialogProvider"; import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider"; import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider"; import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
import { useSnackbar } from "../hooks/context_providers/SnackbarProvider"; 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 { export function DevicesRoute(): React.ReactElement {
const loadKey = React.useRef(1); const loadKey = React.useRef(1);
@ -61,6 +63,7 @@ function ValidatedDevicesList(p: {
list: Device[]; list: Device[];
onReload: () => void; onReload: () => void;
}): React.ReactElement { }): React.ReactElement {
const navigate = useNavigate();
const alert = useAlert(); const alert = useAlert();
const confirm = useConfirm(); const confirm = useConfirm();
const snackbar = useSnackbar(); const snackbar = useSnackbar();
@ -108,7 +111,11 @@ function ValidatedDevicesList(p: {
</TableHead> </TableHead>
<TableBody> <TableBody>
{p.list.map((dev) => ( {p.list.map((dev) => (
<TableRow key={dev.id}> <TableRow
hover
key={dev.id}
onDoubleClick={() => navigate(DeviceURL(dev))}
>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{dev.id} {dev.id}
</TableCell> </TableCell>
@ -122,6 +129,13 @@ function ValidatedDevicesList(p: {
<TimeWidget time={dev.time_update} /> <TimeWidget time={dev.time_update} />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Tooltip title="Open device page">
<Link to={DeviceURL(dev)}>
<IconButton>
<VisibilityIcon />
</IconButton>
</Link>
</Tooltip>
<Tooltip title="Delete device"> <Tooltip title="Delete device">
<IconButton onClick={() => deleteDevice(dev)}> <IconButton onClick={() => deleteDevice(dev)}>
<DeleteIcon /> <DeleteIcon />