diff --git a/central_frontend/src/routes/DeviceRoute.tsx b/central_frontend/src/routes/DeviceRoute.tsx index d4d4349..ec3d582 100644 --- a/central_frontend/src/routes/DeviceRoute.tsx +++ b/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 ( - + + deleteDevice(p.device)}> + + + + } + > ); diff --git a/central_frontend/src/routes/DevicesRoute.tsx b/central_frontend/src/routes/DevicesRoute.tsx index 142e3a8..67cc715 100644 --- a/central_frontend/src/routes/DevicesRoute.tsx +++ b/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

There is no device validated yet.

; @@ -136,11 +105,6 @@ function ValidatedDevicesList(p: { - - deleteDevice(dev)}> - - - ))}