From 821b4644a2a1c4d4a0118009d552e69f534ad999 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Wed, 25 Sep 2024 22:00:36 +0200
Subject: [PATCH] Minor refacto

---
 .../src/routes/DeviceRoute/DeviceInfoProperty.tsx |  2 +-
 .../src/routes/DeviceRoute/DeviceStateBlock.tsx   | 15 +++++++++++----
 .../src/routes/DeviceRoute/GeneralDeviceInfo.tsx  |  6 ++++--
 central_frontend/src/routes/DevicesRoute.tsx      | 11 ++++++-----
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/central_frontend/src/routes/DeviceRoute/DeviceInfoProperty.tsx b/central_frontend/src/routes/DeviceRoute/DeviceInfoProperty.tsx
index cffd8a7..0714f1f 100644
--- a/central_frontend/src/routes/DeviceRoute/DeviceInfoProperty.tsx
+++ b/central_frontend/src/routes/DeviceRoute/DeviceInfoProperty.tsx
@@ -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 (
diff --git a/central_frontend/src/routes/DeviceRoute/DeviceStateBlock.tsx b/central_frontend/src/routes/DeviceRoute/DeviceStateBlock.tsx
index 726c0e3..2180558 100644
--- a/central_frontend/src/routes/DeviceRoute/DeviceStateBlock.tsx
+++ b/central_frontend/src/routes/DeviceRoute/DeviceStateBlock.tsx
@@ -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"
diff --git a/central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx b/central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx
index 1a581ca..27f21a6 100644
--- a/central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx
+++ b/central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx
@@ -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"
diff --git a/central_frontend/src/routes/DevicesRoute.tsx b/central_frontend/src/routes/DevicesRoute.tsx
index 68ed590..e0ab75f 100644
--- a/central_frontend/src/routes/DevicesRoute.tsx
+++ b/central_frontend/src/routes/DevicesRoute.tsx
@@ -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>