update inprogress state
This commit is contained in:
Abhinav
parent
f8fc8a926c
commit
ee0b75b09f
|
|
@ -1,9 +1,16 @@
|
|||
import React from 'react';
|
||||
import { Button, ProgressBar } from 'react-bootstrap';
|
||||
import { ExportProgress } from 'types/export';
|
||||
import { styled } from '@mui/material';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
styled,
|
||||
} from '@mui/material';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { ExportStage } from 'constants/export';
|
||||
import VerticallyCentered, { FlexWrapper } from './Container';
|
||||
import { ProgressBar } from 'react-bootstrap';
|
||||
|
||||
export const ComfySpan = styled('span')`
|
||||
word-spacing: 1rem;
|
||||
|
|
@ -11,10 +18,6 @@ export const ComfySpan = styled('span')`
|
|||
`;
|
||||
|
||||
interface Props {
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
exportFolder: string;
|
||||
exportSize: string;
|
||||
exportStage: ExportStage;
|
||||
exportProgress: ExportProgress;
|
||||
resumeExport: () => void;
|
||||
|
|
@ -25,66 +28,59 @@ interface Props {
|
|||
export default function ExportInProgress(props: Props) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '30px',
|
||||
padding: '0 5%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<DialogContent>
|
||||
<VerticallyCentered>
|
||||
<Box mb={1.5}>
|
||||
<ComfySpan>
|
||||
{' '}
|
||||
{props.exportProgress.current} /{' '}
|
||||
{props.exportProgress.total}{' '}
|
||||
</ComfySpan>{' '}
|
||||
<span style={{ marginLeft: '10px' }}>
|
||||
<span>
|
||||
{' '}
|
||||
files exported{' '}
|
||||
{props.exportStage === ExportStage.PAUSED && `(paused)`}
|
||||
{props.exportStage === ExportStage.PAUSED &&
|
||||
`(paused)`}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ width: '100%', marginBottom: '30px' }}>
|
||||
</Box>
|
||||
<FlexWrapper px={1}>
|
||||
<ProgressBar
|
||||
style={{ width: '100%' }}
|
||||
now={Math.round(
|
||||
(props.exportProgress.current * 100) /
|
||||
props.exportProgress.total
|
||||
)}
|
||||
animated={!(props.exportStage === ExportStage.PAUSED)}
|
||||
animated={
|
||||
!(props.exportStage === ExportStage.PAUSED)
|
||||
}
|
||||
variant="upload-progress-bar"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
}}>
|
||||
</FlexWrapper>
|
||||
</VerticallyCentered>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
{props.exportStage === ExportStage.PAUSED ? (
|
||||
<Button
|
||||
block
|
||||
variant={'outline-secondary'}
|
||||
onClick={props.resumeExport}>
|
||||
size="large"
|
||||
onClick={props.resumeExport}
|
||||
color="accent">
|
||||
{constants.RESUME}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
block
|
||||
variant={'outline-secondary'}
|
||||
onClick={props.pauseExport}>
|
||||
size="large"
|
||||
onClick={props.pauseExport}
|
||||
color="primary">
|
||||
{constants.PAUSE}
|
||||
</Button>
|
||||
)}
|
||||
<div style={{ width: '30px' }} />
|
||||
<Button
|
||||
block
|
||||
variant={'outline-danger'}
|
||||
onClick={props.cancelExport}>
|
||||
size="large"
|
||||
onClick={props.cancelExport}
|
||||
color="secondary">
|
||||
{constants.CANCEL}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
import { Button, DialogActions } from '@mui/material';
|
||||
import { Button, DialogActions, DialogContent } from '@mui/material';
|
||||
import React from 'react';
|
||||
import constants from 'utils/strings/constants';
|
||||
|
||||
interface Props {
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
updateExportFolder: (newFolder: string) => void;
|
||||
exportFolder: string;
|
||||
startExport: () => void;
|
||||
exportSize: string;
|
||||
selectExportDirectory: () => void;
|
||||
}
|
||||
export default function ExportInit(props: Props) {
|
||||
export default function ExportInit({ startExport }: Props) {
|
||||
return (
|
||||
<DialogContent>
|
||||
<DialogActions>
|
||||
<Button size="large" color="accent" onClick={props.startExport}>
|
||||
<Button size="large" color="accent" onClick={startExport}>
|
||||
{constants.START}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -299,23 +299,12 @@ export default function ExportModal(props: Props) {
|
|||
const ExportDynamicContent = () => {
|
||||
switch (exportStage) {
|
||||
case ExportStage.INIT:
|
||||
return (
|
||||
<ExportInit
|
||||
{...props}
|
||||
exportFolder={exportFolder}
|
||||
exportSize={exportSize}
|
||||
updateExportFolder={updateExportFolder}
|
||||
startExport={startExport}
|
||||
selectExportDirectory={selectExportDirectory}
|
||||
/>
|
||||
);
|
||||
return <ExportInit startExport={startExport} />;
|
||||
|
||||
case ExportStage.INPROGRESS:
|
||||
case ExportStage.PAUSED:
|
||||
return (
|
||||
<ExportInProgress
|
||||
{...props}
|
||||
exportFolder={exportFolder}
|
||||
exportSize={exportSize}
|
||||
exportStage={exportStage}
|
||||
exportProgress={exportProgress}
|
||||
resumeExport={resumeExport}
|
||||
|
|
@ -348,7 +337,7 @@ export default function ExportModal(props: Props) {
|
|||
{constants.EXPORT_DATA}
|
||||
</DialogTitleWithCloseButton>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} mb={4}>
|
||||
<Stack spacing={2}>
|
||||
<ExportDirectory
|
||||
exportFolder={exportFolder}
|
||||
selectExportDirectory={selectExportDirectory}
|
||||
|
|
@ -356,9 +345,9 @@ export default function ExportModal(props: Props) {
|
|||
/>
|
||||
<ExportSize exportSize={exportSize} />
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<Divider />
|
||||
<ExportDynamicContent />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue