fix: format
This commit is contained in:
@@ -13,14 +13,14 @@ interface SaveRecordingProps {
|
|||||||
fileName: string;
|
fileName: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SaveRecording = ({fileName}: SaveRecordingProps) => {
|
export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
|
||||||
|
|
||||||
const [openModal, setOpenModal] = useState<boolean>(false);
|
const [openModal, setOpenModal] = useState<boolean>(false);
|
||||||
const [needConfirm, setNeedConfirm] = useState<boolean>(false);
|
const [needConfirm, setNeedConfirm] = useState<boolean>(false);
|
||||||
const [recordingName, setRecordingName] = useState<string>(fileName);
|
const [recordingName, setRecordingName] = useState<string>(fileName);
|
||||||
const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
|
const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
|
||||||
|
|
||||||
const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
|
const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
|
|
||||||
const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
|
const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
@@ -41,7 +41,7 @@ export const SaveRecording = ({fileName}: SaveRecordingProps) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const exitRecording = useCallback(async() => {
|
const exitRecording = useCallback(async () => {
|
||||||
notify('success', 'Recording saved successfully');
|
notify('success', 'Recording saved successfully');
|
||||||
if (browserId) {
|
if (browserId) {
|
||||||
await stopRecording(browserId);
|
await stopRecording(browserId);
|
||||||
@@ -66,45 +66,45 @@ export const SaveRecording = ({fileName}: SaveRecordingProps) => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Button sx={{
|
<Button sx={{
|
||||||
width:'100px',
|
width: '100px',
|
||||||
background: 'white',
|
background: 'white',
|
||||||
color: 'rgba(0,128,0,0.7)',
|
color: 'rgba(0,128,0,0.7)',
|
||||||
'&:hover': {background: 'white', color: 'green'},
|
'&:hover': { background: 'white', color: 'green' },
|
||||||
padding: '11px',
|
padding: '11px',
|
||||||
marginRight: '10px',
|
marginRight: '10px',
|
||||||
}} onClick={() => setOpenModal(true)}>
|
}} onClick={() => setOpenModal(true)}>
|
||||||
<FlagIcon sx={{marginRight:'3px'}}/> FINISH
|
<FlagIcon sx={{ marginRight: '3px' }} /> FINISH
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
|
<GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
|
||||||
<form onSubmit={handleSaveRecording} style={{paddingTop:'50px', display: 'flex', flexDirection: 'column'}} >
|
<form onSubmit={handleSaveRecording} style={{ paddingTop: '50px', display: 'flex', flexDirection: 'column' }} >
|
||||||
<Typography>Save the recording as:</Typography>
|
<Typography>Save the recording as:</Typography>
|
||||||
<TextField
|
<TextField
|
||||||
required
|
required
|
||||||
sx={{width: '250px', paddingBottom: '10px', margin: '15px 0px'}}
|
sx={{ width: '250px', paddingBottom: '10px', margin: '15px 0px' }}
|
||||||
onChange={handleChangeOfTitle}
|
onChange={handleChangeOfTitle}
|
||||||
id="title"
|
id="title"
|
||||||
label="Recording title"
|
label="Recording title"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
defaultValue={recordingName ? recordingName : null}
|
defaultValue={recordingName ? recordingName : null}
|
||||||
/>
|
/>
|
||||||
{ needConfirm
|
{needConfirm
|
||||||
?
|
?
|
||||||
(<React.Fragment>
|
(<React.Fragment>
|
||||||
<Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
|
<Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
|
||||||
<WarningText>
|
<WarningText>
|
||||||
<NotificationImportantIcon color="warning"/>
|
<NotificationImportantIcon color="warning" />
|
||||||
Recording already exists, please confirm the recording's overwrite.
|
Recording already exists, please confirm the recording's overwrite.
|
||||||
</WarningText>
|
</WarningText>
|
||||||
</React.Fragment>)
|
</React.Fragment>)
|
||||||
: <Button type="submit" variant="contained">Save</Button>
|
: <Button type="submit" variant="contained">Save</Button>
|
||||||
}
|
}
|
||||||
{ waitingForSave &&
|
{waitingForSave &&
|
||||||
<Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
|
<Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
|
||||||
<Box sx={{ width: '100%' }}>
|
<Box sx={{ width: '100%' }}>
|
||||||
<LinearProgress/>
|
<LinearProgress />
|
||||||
</Box>
|
</Box>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
}
|
}
|
||||||
</form>
|
</form>
|
||||||
</GenericModal>
|
</GenericModal>
|
||||||
@@ -119,7 +119,7 @@ const modalStyle = {
|
|||||||
width: '20%',
|
width: '20%',
|
||||||
backgroundColor: 'background.paper',
|
backgroundColor: 'background.paper',
|
||||||
p: 4,
|
p: 4,
|
||||||
height:'fit-content',
|
height: 'fit-content',
|
||||||
display:'block',
|
display: 'block',
|
||||||
padding: '20px',
|
padding: '20px',
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user