From 1ce9ca3321b9ef4d5d4b27f0fcd7028cbe9da45e Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Thu, 18 Jul 2024 20:06:46 +0200
Subject: [PATCH] Display basic device information

---
 central_backend/src/server/servers.rs         |   4 +
 .../src/server/web_api/devices_controller.rs  |  12 +++
 central_frontend/src/App.tsx                  |   4 +-
 central_frontend/src/api/DeviceApi.ts         |  16 ++-
 central_frontend/src/routes/DeviceRoute.tsx   | 102 ++++++++++++++++++
 5 files changed, 135 insertions(+), 3 deletions(-)
 create mode 100644 central_frontend/src/routes/DeviceRoute.tsx

diff --git a/central_backend/src/server/servers.rs b/central_backend/src/server/servers.rs
index e272246..446b2b9 100644
--- a/central_backend/src/server/servers.rs
+++ b/central_backend/src/server/servers.rs
@@ -139,6 +139,10 @@ pub async fn secure_server(energy_actor: EnergyActorAddr) -> anyhow::Result<()>
                 "/web_api/devices/list_validated",
                 web::get().to(devices_controller::list_validated),
             )
+            .route(
+                "/web_api/device/{id}",
+                web::get().to(devices_controller::get_single),
+            )
             .route(
                 "/web_api/device/{id}/validate",
                 web::post().to(devices_controller::validate_device),
diff --git a/central_backend/src/server/web_api/devices_controller.rs b/central_backend/src/server/web_api/devices_controller.rs
index 1ab0db2..a072b48 100644
--- a/central_backend/src/server/web_api/devices_controller.rs
+++ b/central_backend/src/server/web_api/devices_controller.rs
@@ -33,6 +33,18 @@ pub struct DeviceInPath {
     id: DeviceId,
 }
 
+/// Get a single device information
+pub async fn get_single(actor: WebEnergyActor, id: web::Path<DeviceInPath>) -> HttpResult {
+    let Some(dev) = actor
+        .send(energy_actor::GetSingleDevice(id.id.clone()))
+        .await?
+    else {
+        return Ok(HttpResponse::NotFound().json("Requested device was not found!"));
+    };
+
+    Ok(HttpResponse::Ok().json(dev))
+}
+
 /// Validate a device
 pub async fn validate_device(actor: WebEnergyActor, id: web::Path<DeviceInPath>) -> HttpResult {
     actor
diff --git a/central_frontend/src/App.tsx b/central_frontend/src/App.tsx
index db625d8..9f7c016 100644
--- a/central_frontend/src/App.tsx
+++ b/central_frontend/src/App.tsx
@@ -12,6 +12,7 @@ import { HomeRoute } from "./routes/HomeRoute";
 import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { PendingDevicesRoute } from "./routes/PendingDevicesRoute";
 import { DevicesRoute } from "./routes/DevicesRoute";
+import { DeviceRoute } from "./routes/DeviceRoute";
 
 export function App() {
   if (!AuthApi.SignedIn && !ServerApi.Config.auth_disabled)
@@ -21,8 +22,9 @@ export function App() {
     createRoutesFromElements(
       <Route path="*" element={<BaseAuthenticatedPage />}>
         <Route path="" element={<HomeRoute />} />
-        <Route path="devices" element={<DevicesRoute />} />
         <Route path="pending_devices" element={<PendingDevicesRoute />} />
+        <Route path="devices" element={<DevicesRoute />} />
+        <Route path="dev/:id" element={<DeviceRoute />} />
         <Route path="*" element={<NotFoundRoute />} />
       </Route>
     )
diff --git a/central_frontend/src/api/DeviceApi.ts b/central_frontend/src/api/DeviceApi.ts
index 47ab1b7..0362283 100644
--- a/central_frontend/src/api/DeviceApi.ts
+++ b/central_frontend/src/api/DeviceApi.ts
@@ -37,8 +37,8 @@ export interface Device {
   relays: DeviceRelay[];
 }
 
-export function DeviceURL(d: Device, edit: boolean = false): string {
-  return `/dev/${d.id}${edit ? "/edit" : ""}`;
+export function DeviceURL(d: Device): string {
+  return `/dev/${encodeURIComponent(d.id)}`;
 }
 
 export class DeviceApi {
@@ -76,6 +76,18 @@ export class DeviceApi {
     });
   }
 
+  /**
+   * Get the information about a single device
+   */
+  static async GetSingle(id: string): Promise<Device> {
+    return (
+      await APIClient.exec({
+        uri: `/device/${encodeURIComponent(id)}`,
+        method: "GET",
+      })
+    ).data;
+  }
+
   /**
    * Delete a device
    */
diff --git a/central_frontend/src/routes/DeviceRoute.tsx b/central_frontend/src/routes/DeviceRoute.tsx
new file mode 100644
index 0000000..d4d4349
--- /dev/null
+++ b/central_frontend/src/routes/DeviceRoute.tsx
@@ -0,0 +1,102 @@
+import { useParams } from "react-router-dom";
+import { Device, DeviceApi } from "../api/DeviceApi";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
+import {
+  Card,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Typography,
+} from "@mui/material";
+
+export function DeviceRoute(): React.ReactElement {
+  const { id } = useParams();
+  const [device, setDevice] = React.useState<Device | undefined>();
+
+  const loadKey = React.useRef(1);
+
+  const load = async () => {
+    setDevice(await DeviceApi.GetSingle(id!));
+  };
+
+  const reload = () => {
+    loadKey.current += 1;
+    setDevice(undefined);
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={loadKey.current}
+      errMsg="Failed to load device information"
+      load={load}
+      ready={!!device}
+      build={() => <DeviceRouteInner device={device!} onReload={reload} />}
+    />
+  );
+}
+
+function DeviceRouteInner(p: {
+  device: Device;
+  onReload: () => void;
+}): React.ReactElement {
+  return (
+    <SolarEnergyRouteContainer label={`Device ${p.device.name}`}>
+      <GeneralDeviceInfo {...p} />
+    </SolarEnergyRouteContainer>
+  );
+}
+
+function GeneralDeviceInfo(p: { device: Device }): React.ReactElement {
+  return (
+    <TableContainer component={Paper}>
+      <Typography variant="h6" style={{ padding: "6px" }}>
+        General device information
+      </Typography>
+      <Table size="small">
+        <TableBody>
+          <DeviceInfoProperty label="ID" value={p.device.id} />
+          <DeviceInfoProperty
+            label="Reference"
+            value={p.device.info.reference}
+          />
+          <DeviceInfoProperty label="Version" value={p.device.info.version} />
+          <DeviceInfoProperty label="Name" value={p.device.name} />
+          <DeviceInfoProperty
+            label="Description"
+            value={p.device.description}
+          />
+          <DeviceInfoProperty
+            label="Enabled"
+            value={p.device.enabled ? "YES" : "NO"}
+          />
+          <DeviceInfoProperty
+            label="Maximum number of relays"
+            value={p.device.info.max_relays.toString()}
+          />
+          <DeviceInfoProperty
+            label="Number of configured relays"
+            value={p.device.relays.length.toString()}
+          />
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+function DeviceInfoProperty(p: {
+  icon?: React.ReactElement;
+  label: string;
+  value: string;
+}): React.ReactElement {
+  return (
+    <TableRow hover sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
+      <TableCell>{p.label}</TableCell>
+      <TableCell>{p.value}</TableCell>
+    </TableRow>
+  );
+}