Move delete device button to button page
This commit is contained in:
parent
1ce9ca3321
commit
baf341d505
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user