Validate devices

central_frontend/src/api/DeviceApi.ts

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

central_frontend/src/routes/PendingDevicesRoute.tsx

@@ -8,6 +8,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Tooltip,
 } from "@mui/material";
 import React from "react";
 import { Device, DeviceApi } from "../api/DeviceApi";
@@ -18,6 +19,7 @@ import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
+import CheckIcon from "@mui/icons-material/Check";
 
 export function PendingDevicesRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -57,6 +59,21 @@ function PendingDevicesList(p: {
   const snackbar = useSnackbar();
   const loadingMessage = useLoadingMessage();
 
+  const validateDevice = async (d: Device) => {
+    try {
+      loadingMessage.show("Validating device...");
+      await DeviceApi.Validate(d);
+
+      snackbar("The device has been successfully validated!");
+      p.onReload();
+    } catch (e) {
+      console.error(`Failed to validate device! ${e})`);
+      alert("Failed to validate device!");
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   const deleteDevice = async (d: Device) => {
     try {
       if (
@@ -109,9 +126,16 @@ function PendingDevicesList(p: {
                 <TimeWidget time={dev.time_create} />
               </TableCell>
               <TableCell>
-                <IconButton onClick={() => deleteDevice(dev)}>
-                  <DeleteIcon />
-                </IconButton>
+                <Tooltip title="Validate device">
+                  <IconButton onClick={() => validateDevice(dev)}>
+                    <CheckIcon />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Delete device">
+                  <IconButton onClick={() => deleteDevice(dev)}>
+                    <DeleteIcon />
+                  </IconButton>
+                </Tooltip>
               </TableCell>
             </TableRow>
           ))}