Minor refacto

This commit is contained in:
Pierre HUBERT 2024-09-25 22:00:36 +02:00
parent e0f0067e89
commit 821b4644a2
4 changed files with 22 additions and 12 deletions

View File

@ -3,7 +3,7 @@ import { TableCell, TableRow } from "@mui/material";
export function DeviceInfoProperty(p: {
icon?: React.ReactElement;
label: string;
value: string;
value: string | React.ReactElement;
color?: string;
}): React.ReactElement {
return (

View File

@ -1,10 +1,11 @@
import { Table, TableBody } from "@mui/material";
import React from "react";
import { Device, DeviceApi, DeviceState } from "../../api/DeviceApi";
import { AsyncWidget } from "../../widgets/AsyncWidget";
import { DeviceRouteCard } from "./DeviceRouteCard";
import { Table, TableBody } from "@mui/material";
import { DeviceInfoProperty } from "./DeviceInfoProperty";
import { BoolText } from "../../widgets/BoolText";
import { timeDiff } from "../../widgets/TimeWidget";
import { DeviceInfoProperty } from "./DeviceInfoProperty";
import { DeviceRouteCard } from "./DeviceRouteCard";
export function DeviceStateBlock(p: { device: Device }): React.ReactElement {
const [state, setState] = React.useState<DeviceState>();
@ -32,7 +33,13 @@ function DeviceStateInner(p: { state: DeviceState }): React.ReactElement {
<TableBody>
<DeviceInfoProperty
label="Status"
value={p.state.online ? "Online" : "Offline"}
value={
<BoolText
val={p.state.online}
positive="ONLINE"
negative="Offline"
/>
}
/>
<DeviceInfoProperty
label="Last ping"

View File

@ -3,6 +3,7 @@ import { IconButton, Table, TableBody, Tooltip } from "@mui/material";
import React from "react";
import { Device } from "../../api/DeviceApi";
import { EditDeviceMetadataDialog } from "../../dialogs/EditDeviceMetadataDialog";
import { BoolText } from "../../widgets/BoolText";
import { formatDate } from "../../widgets/TimeWidget";
import { DeviceInfoProperty } from "./DeviceInfoProperty";
import { DeviceRouteCard } from "./DeviceRouteCard";
@ -55,8 +56,9 @@ export function GeneralDeviceInfo(p: {
/>
<DeviceInfoProperty
label="Enabled"
value={p.device.enabled ? "YES" : "NO"}
color={p.device.enabled ? "green" : "red"}
value={
<BoolText val={p.device.enabled} positive="YES" negative="NO" />
}
/>
<DeviceInfoProperty
label="Maximum number of relays"

View File

@ -15,6 +15,7 @@ import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { Device, DeviceApi, DevicesState, DeviceURL } from "../api/DeviceApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { BoolText } from "../widgets/BoolText";
import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
import { TimeWidget } from "../widgets/TimeWidget";
@ -109,11 +110,11 @@ function ValidatedDevicesList(p: {
<TimeWidget time={dev.time_update} />
</TableCell>
<TableCell align="center">
{p.states.get(dev.id)!.online ? (
<strong>Online</strong>
) : (
<em>Offline</em>
)}
<BoolText
val={p.states.get(dev.id)!.online}
positive="Online"
negative="Offline"
/>
<br />
<TimeWidget diff time={p.states.get(dev.id)!.last_ping} />
</TableCell>