Can delete a pending device

central_frontend/src/api/DeviceApi.ts

@@ -49,4 +49,14 @@ export class DeviceApi {
       })
     ).data;
   }
+
+  /**
+   * Delete a device
+   */
+  static async Delete(d: Device): Promise<void> {
+    await APIClient.exec({
+      uri: `/device/${encodeURIComponent(d.id)}`,
+      method: "DELETE",
+    });
+  }
 }

central_frontend/src/routes/PendingDevicesRoute.tsx

@@ -1,16 +1,22 @@
-import React from "react";
-import { AsyncWidget } from "../widgets/AsyncWidget";
-import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
-import { Device, DeviceApi } from "../api/DeviceApi";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
-  TableContainer,
+  IconButton,
   Paper,
   Table,
+  TableBody,
+  TableCell,
+  TableContainer,
   TableHead,
   TableRow,
-  TableCell,
-  TableBody,
 } from "@mui/material";
+import React from "react";
+import { Device, DeviceApi } 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 PendingDevicesRoute(): React.ReactElement {
@@ -46,6 +52,37 @@ function PendingDevicesList(p: {
   pending: 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();
+    }
+  };
+
+  if (p.pending.length === 0) {
+    return <p>There is no device awaiting confirmation right now.</p>;
+  }
+
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 650 }} aria-label="simple table">
@@ -54,8 +91,9 @@ function PendingDevicesList(p: {
             <TableCell>#</TableCell>
             <TableCell>Model</TableCell>
             <TableCell>Version</TableCell>
-            <TableCell>Maximum number of relays</TableCell>
+            <TableCell>Max number of relays</TableCell>
             <TableCell>Created</TableCell>
+            <TableCell></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -70,6 +108,11 @@ function PendingDevicesList(p: {
               <TableCell>
                 <TimeWidget time={dev.time_create} />
               </TableCell>
+              <TableCell>
+                <IconButton onClick={() => deleteDevice(dev)}>
+                  <DeleteIcon />
+                </IconButton>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>