Create the dialog to select the deployment target

This commit is contained in:
2024-10-09 18:32:29 +02:00
parent e4da44b5ce
commit 386f0439e4
2 changed files with 171 additions and 34 deletions

View File

@ -1,3 +1,5 @@
import { mdiFolderUploadOutline } from "@mdi/js";
import Icon from "@mdi/react";
import DeleteIcon from "@mui/icons-material/Delete";
import DownloadIcon from "@mui/icons-material/Download";
import FileUploadIcon from "@mui/icons-material/FileUpload";
@ -16,6 +18,7 @@ import {
import { filesize } from "filesize";
import React from "react";
import { OTAAPI, OTAUpdate } from "../api/OTAApi";
import { DeployOTAUpdateDialogProvider } from "../dialogs/DeployOTAUpdateDialogProvider";
import { UploadUpdateDialog } from "../dialogs/UploadUpdateDialog";
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
@ -110,6 +113,10 @@ function _OTAList(p: {
const loadingMessage = useLoadingMessage();
const snackbar = useSnackbar();
const [deployUpdate, setDeployUpdate] = React.useState<
OTAUpdate | undefined
>();
const deleteUpdate = async (update: OTAUpdate) => {
if (
!(await confirm(
@ -135,40 +142,53 @@ function _OTAList(p: {
};
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">Platform</TableCell>
<TableCell align="center">Version</TableCell>
<TableCell align="center">File size</TableCell>
<TableCell align="center"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{p.list.map((row, num) => (
<TableRow hover key={num}>
<TableCell align="center">{row.platform}</TableCell>
<TableCell align="center">{row.version}</TableCell>
<TableCell align="center">{filesize(row.file_size)}</TableCell>
<TableCell align="center">
<Tooltip title="Download a copy of the firmware">
<RouterLink to={OTAAPI.DownloadOTAUpdateURL(row)}>
<IconButton>
<DownloadIcon />
</IconButton>
</RouterLink>
</Tooltip>
<Tooltip title="Delete firmware update">
<IconButton onClick={() => deleteUpdate(row)}>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
<>
{deployUpdate && (
<DeployOTAUpdateDialogProvider
update={deployUpdate!}
onClose={() => setDeployUpdate(undefined)}
/>
)}
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">Platform</TableCell>
<TableCell align="center">Version</TableCell>
<TableCell align="center">File size</TableCell>
<TableCell align="center"></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</TableHead>
<TableBody>
{p.list.map((row, num) => (
<TableRow hover key={num}>
<TableCell align="center">{row.platform}</TableCell>
<TableCell align="center">{row.version}</TableCell>
<TableCell align="center">{filesize(row.file_size)}</TableCell>
<TableCell align="center">
<Tooltip title="Deploy the update to devices">
<IconButton onClick={() => setDeployUpdate(row)}>
<Icon path={mdiFolderUploadOutline} size={1} />
</IconButton>
</Tooltip>
<Tooltip title="Download a copy of the firmware">
<RouterLink to={OTAAPI.DownloadOTAUpdateURL(row)}>
<IconButton>
<DownloadIcon />
</IconButton>
</RouterLink>
</Tooltip>
<Tooltip title="Delete firmware update">
<IconButton onClick={() => deleteUpdate(row)}>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
}