Move delete device button to button page

central_frontend/src/routes/DeviceRoute.tsx

@@ -1,18 +1,24 @@
-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,
+  IconButton,
   Paper,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TableRow,
+  Tooltip,
   Typography,
 } from "@mui/material";
+import React from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useParams } from "react-router-dom";
+import { Device, DeviceApi } from "../api/DeviceApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
+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";
 
 export function DeviceRoute(): React.ReactElement {
   const { id } = useParams();
@@ -44,8 +50,43 @@ function DeviceRouteInner(p: {
   device: Device;
   onReload: () => void;
 }): React.ReactElement {
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+
+  const deleteDevice = async (d: Device) => {
+    try {
+      if (
+        !(await confirm(
+          `Do you really want to delete the device ${d.id}? The operation cannot be reverted!`
+        ))
+      )
+        return;
+
+      loadingMessage.show("Deleting device...");
+      await DeviceApi.Delete(d);
+
+      snackbar("The device has been successfully deleted!");
+      p.onReload();
+    } catch (e) {
+      console.error(`Failed to delete device! ${e})`);
+      alert("Failed to delete device!");
+    } finally {
+      loadingMessage.hide();
+    }
+  };
   return (
-    <SolarEnergyRouteContainer label={`Device ${p.device.name}`}>
+    <SolarEnergyRouteContainer
+      label={`Device ${p.device.name}`}
+      actions={
+        <Tooltip title="Delete device">
+          <IconButton onClick={() => deleteDevice(p.device)}>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      }
+    >
       <GeneralDeviceInfo {...p} />
     </SolarEnergyRouteContainer>
   );

central_frontend/src/routes/DevicesRoute.tsx

@@ -1,4 +1,3 @@
-import DeleteIcon from "@mui/icons-material/Delete";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
@@ -15,10 +14,6 @@ import {
 import React from "react";
 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";
@@ -64,32 +59,6 @@ function ValidatedDevicesList(p: {
   onReload: () => void;
 }): React.ReactElement {
   const navigate = useNavigate();
-  const alert = useAlert();
-  const confirm = useConfirm();
-  const snackbar = useSnackbar();
-  const loadingMessage = useLoadingMessage();
-
-  const deleteDevice = async (d: Device) => {
-    try {
-      if (
-        !(await confirm(
-          `Do you really want to delete the device ${d.id}? The operation cannot be reverted!`
-        ))
-      )
-        return;
-
-      loadingMessage.show("Deleting device...");
-      await DeviceApi.Delete(d);
-
-      snackbar("The device has been successfully deleted!");
-      p.onReload();
-    } catch (e) {
-      console.error(`Failed to delete device! ${e})`);
-      alert("Failed to delete device!");
-    } finally {
-      loadingMessage.hide();
-    }
-  };
 
   if (p.list.length === 0) {
     return <p>There is no device validated yet.</p>;
@@ -136,11 +105,6 @@ function ValidatedDevicesList(p: {
                     </IconButton>
                   </Link>
                 </Tooltip>
-                <Tooltip title="Delete device">
-                  <IconButton onClick={() => deleteDevice(dev)}>
-                    <DeleteIcon />
-                  </IconButton>
-                </Tooltip>
               </TableCell>
             </TableRow>
           ))}