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