2021-07-06 09:20:59 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { Button, ProgressBar } from 'react-bootstrap';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import constants from 'utils/strings/constants';
|
2021-07-08 06:42:28 +00:00
|
|
|
import { ExportStage, ExportStats } from './ExportModal';
|
2021-07-06 09:20:59 +00:00
|
|
|
|
2021-07-06 11:23:13 +00:00
|
|
|
export const ComfySpan = styled.span`
|
|
|
|
word-spacing:1rem;
|
2021-07-06 09:20:59 +00:00
|
|
|
color:#ddd;
|
|
|
|
`;
|
2021-07-07 07:44:26 +00:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
show: boolean
|
|
|
|
onHide: () => void
|
|
|
|
exportFolder: string
|
|
|
|
exportSize: string
|
2021-07-08 06:42:28 +00:00
|
|
|
exportStage: ExportStage
|
2021-07-07 07:44:26 +00:00
|
|
|
exportStats: ExportStats
|
|
|
|
exportFiles: () => void;
|
|
|
|
cancelExport: () => void
|
2021-07-08 06:42:28 +00:00
|
|
|
pauseExport: () => void;
|
2021-07-07 07:44:26 +00:00
|
|
|
}
|
|
|
|
export default function ExportInProgress(props: Props) {
|
2021-07-06 09:20:59 +00:00
|
|
|
return (
|
2021-07-07 09:20:59 +00:00
|
|
|
<>
|
2021-07-06 09:20:59 +00:00
|
|
|
<div style={{ marginBottom: '30px', padding: '0 5%', display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
|
|
|
|
<div style={{ marginBottom: '10px' }}>
|
2021-07-07 07:44:26 +00:00
|
|
|
<ComfySpan> {props.exportStats.current} / {props.exportStats.total} </ComfySpan> <span style={{ marginLeft: '10px' }}> files exported</span>
|
2021-07-06 09:20:59 +00:00
|
|
|
</div>
|
|
|
|
<div style={{ width: '100%', marginBottom: '30px' }}>
|
|
|
|
<ProgressBar
|
2021-07-07 07:44:26 +00:00
|
|
|
now={Math.round(props.exportStats.current * 100 / props.exportStats.total)}
|
2021-07-06 09:20:59 +00:00
|
|
|
animated
|
|
|
|
variant="upload-progress-bar"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div style={{ width: '100%', display: 'flex', justifyContent: 'space-around' }}>
|
2021-07-08 06:42:28 +00:00
|
|
|
{props.exportStage === ExportStage.PAUSED ?
|
2021-07-07 07:44:26 +00:00
|
|
|
<Button block variant={'outline-secondary'} onClick={props.exportFiles}>{constants.RESUME}</Button> :
|
2021-07-08 06:42:28 +00:00
|
|
|
<Button block variant={'outline-secondary'} onClick={props.pauseExport}>{constants.PAUSE}</Button>
|
2021-07-07 07:44:26 +00:00
|
|
|
}
|
2021-07-06 09:20:59 +00:00
|
|
|
<div style={{ width: '30px' }} />
|
2021-07-08 06:42:28 +00:00
|
|
|
<Button block variant={'outline-danger'} onClick={props.cancelExport}>{constants.CANCEL}</Button>
|
2021-07-06 09:20:59 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-07 09:20:59 +00:00
|
|
|
</>
|
2021-07-06 09:20:59 +00:00
|
|
|
);
|
|
|
|
}
|