Add link to device page
This commit is contained in:
parent
370084b3bb
commit
7be81fe0e9
@ -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
|
||||||
|
@ -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 />
|
||||||
|
Loading…
Reference in New Issue
Block a user