From 7be81fe0e926d35db3d20e7f41b49328606d2fce Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Wed, 17 Jul 2024 23:19:04 +0200
Subject: [PATCH] Add link to device page

---
 central_frontend/src/api/DeviceApi.ts        |  4 +++
 central_frontend/src/routes/DevicesRoute.tsx | 30 ++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/central_frontend/src/api/DeviceApi.ts b/central_frontend/src/api/DeviceApi.ts
index bd7cc69..47ab1b7 100644
--- a/central_frontend/src/api/DeviceApi.ts
+++ b/central_frontend/src/api/DeviceApi.ts
@@ -37,6 +37,10 @@ export interface Device {
   relays: DeviceRelay[];
 }
 
+export function DeviceURL(d: Device, edit: boolean = false): string {
+  return `/dev/${d.id}${edit ? "/edit" : ""}`;
+}
+
 export class DeviceApi {
   /**
    * Get the list of pending devices
diff --git a/central_frontend/src/routes/DevicesRoute.tsx b/central_frontend/src/routes/DevicesRoute.tsx
index 9b25123..142e3a8 100644
--- a/central_frontend/src/routes/DevicesRoute.tsx
+++ b/central_frontend/src/routes/DevicesRoute.tsx
@@ -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 {
-  Tooltip,
   IconButton,
   Paper,
   Table,
@@ -8,18 +10,18 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Tooltip,
 } from "@mui/material";
 import React from "react";
-import { Device, DeviceApi } from "../api/DeviceApi";
-import { AsyncWidget } from "../widgets/AsyncWidget";
-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 { Link, useNavigate } from "react-router-dom";
+import { Device, DeviceApi, DeviceURL } from "../api/DeviceApi";
 import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
 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 {
   const loadKey = React.useRef(1);
@@ -61,6 +63,7 @@ function ValidatedDevicesList(p: {
   list: Device[];
   onReload: () => void;
 }): React.ReactElement {
+  const navigate = useNavigate();
   const alert = useAlert();
   const confirm = useConfirm();
   const snackbar = useSnackbar();
@@ -108,7 +111,11 @@ function ValidatedDevicesList(p: {
         </TableHead>
         <TableBody>
           {p.list.map((dev) => (
-            <TableRow key={dev.id}>
+            <TableRow
+              hover
+              key={dev.id}
+              onDoubleClick={() => navigate(DeviceURL(dev))}
+            >
               <TableCell component="th" scope="row">
                 {dev.id}
               </TableCell>
@@ -122,6 +129,13 @@ function ValidatedDevicesList(p: {
                 <TimeWidget time={dev.time_update} />
               </TableCell>
               <TableCell>
+                <Tooltip title="Open device page">
+                  <Link to={DeviceURL(dev)}>
+                    <IconButton>
+                      <VisibilityIcon />
+                    </IconButton>
+                  </Link>
+                </Tooltip>
                 <Tooltip title="Delete device">
                   <IconButton onClick={() => deleteDevice(dev)}>
                     <DeleteIcon />