vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: back & discard buttons

Browse Source
This commit is contained in:
karishmas6
2024-08-06 03:45:11 +05:30
parent eb4b71db2c
commit 742c654553
1 changed files with 54 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/organisms/RightSidePanel.tsx
View File

@@ -13,7 +13,7 @@ export const RightSidePanel = () => {
const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({}); const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({});
const [errors, setErrors] = useState<{ [id: number]: string }>({}); const [errors, setErrors] = useState<{ [id: number]: string }>({});
const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: number]: boolean }>({}); const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: number]: boolean }>({});
const { lastAction } = useGlobalInfoStore(); const { lastAction } = useGlobalInfoStore();
const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext(); const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext();
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep } = useBrowserSteps(); const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep } = useBrowserSteps();
@@ -21,11 +21,10 @@ export const RightSidePanel = () => {
const handleTextLabelChange = (id: number, label: string) => { const handleTextLabelChange = (id: number, label: string) => {
setTextLabels(prevLabels => ({ ...prevLabels, [id]: label })); setTextLabels(prevLabels => ({ ...prevLabels, [id]: label }));
if (!label.trim()) { setErrors(prevErrors => ({
setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' })); ...prevErrors,
} else { [id]: label.trim() ? '' : 'Label cannot be empty'
setErrors(prevErrors => ({ ...prevErrors, [id]: '' })); }));
}
}; };
const handleTextStepConfirm = (id: number) => { const handleTextStepConfirm = (id: number) => {
@@ -51,7 +50,7 @@ export const RightSidePanel = () => {
}; };
const getTextSettingsObject = useCallback(() => { const getTextSettingsObject = useCallback(() => {
const settings: Record<string, { selector: string; tag?: string;[key: string]: any }> = {}; const settings: Record<string, { selector: string; tag?: string; [key: string]: any }> = {};
browserSteps.forEach(step => { browserSteps.forEach(step => {
if (step.type === 'text' && step.label && step.selectorObj?.selector) { if (step.type === 'text' && step.label && step.selectorObj?.selector) {
settings[step.label] = step.selectorObj; settings[step.label] = step.selectorObj;
@@ -60,7 +59,6 @@ export const RightSidePanel = () => {
return settings; return settings;
}, [browserSteps]); }, [browserSteps]);
const stopCaptureAndEmitGetTextSettings = useCallback(() => { const stopCaptureAndEmitGetTextSettings = useCallback(() => {
stopGetText(); stopGetText();
const settings = getTextSettingsObject(); const settings = getTextSettingsObject();
@@ -70,7 +68,6 @@ export const RightSidePanel = () => {
} }
}, [stopGetText, getTextSettingsObject, socket, browserSteps]); }, [stopGetText, getTextSettingsObject, socket, browserSteps]);
const captureScreenshot = (fullPage: boolean) => { const captureScreenshot = (fullPage: boolean) => {
const screenshotSettings: ScreenshotSettings = { const screenshotSettings: ScreenshotSettings = {
fullPage, fullPage,
@@ -84,6 +81,14 @@ export const RightSidePanel = () => {
addScreenshotStep(fullPage); addScreenshotStep(fullPage);
}; };
const handleBack = () => {
if (getText) {
stopGetText();
} else if (getScreenshot) {
stopGetScreenshot();
}
};
return ( return (
<Paper variant="outlined" sx={{ height: '100%', width: '100%', backgroundColor: 'white', alignItems: "center" }}> <Paper variant="outlined" sx={{ height: '100%', width: '100%', backgroundColor: 'white', alignItems: "center" }}>
<SimpleBox height={60} width='100%' background='lightGray' radius='0%'> <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
@@ -92,60 +97,62 @@ export const RightSidePanel = () => {
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}> <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
{!getText && !getScreenshot && <Button variant="contained" onClick={startGetText}>Capture Text</Button>} {!getText && !getScreenshot && <Button variant="contained" onClick={startGetText}>Capture Text</Button>}
{getText && <Button variant="outlined" color="error" onClick={stopCaptureAndEmitGetTextSettings}>Discard</Button>} {getText && <Button variant="contained" onClick={stopCaptureAndEmitGetTextSettings}>Stop Capture Text</Button>}
{!getText && !getScreenshot && <Button variant="contained" onClick={startGetScreenshot}>Capture Screenshot</Button>} {!getText && !getScreenshot && <Button variant="contained" onClick={startGetScreenshot}>Capture Screenshot</Button>}
{getScreenshot && ( {getScreenshot && (
<Box display="flex" flexDirection="column" gap={2}> <Box display="flex" flexDirection="column" gap={2}>
<Button variant="contained" onClick={() => captureScreenshot(true)}>Capture Fullpage</Button> <Button variant="contained" onClick={() => captureScreenshot(true)}>Capture Fullpage</Button>
<Button variant="contained" onClick={() => captureScreenshot(false)}>Capture Visible Part</Button> <Button variant="contained" onClick={() => captureScreenshot(false)}>Capture Visible Part</Button>
<Button variant="outlined" color="error" onClick={stopGetScreenshot}>Discard</Button>
</Box> </Box>
)} )}
</Box> </Box>
{ {(getText || getScreenshot) && (
getText || getScreenshot ? ( <Box>
<Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
<Button variant="outlined" onClick={handleBack}>Back</Button>
<Button variant="outlined" color="error" onClick={handleBack}>Discard</Button>
</Box>
<Box> <Box>
{browserSteps.map(step => ( {browserSteps.map(step => (
<Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}> <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
{ {step.type === 'text' ? (
step.type === 'text' ? ( <>
<> <TextField
<TextField label="Label"
label="Label" value={textLabels[step.id] || step.label || ''}
value={textLabels[step.id] || step.label || ''} onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
onChange={(e) => handleTextLabelChange(step.id, e.target.value)} fullWidth
fullWidth margin="normal"
margin="normal" error={!!errors[step.id]}
error={!!errors[step.id]} helperText={errors[step.id]}
helperText={errors[step.id]} InputProps={{ readOnly: confirmedTextSteps[step.id] }}
InputProps={{ readOnly: confirmedTextSteps[step.id] }} />
/> <TextField
<TextField label="Data"
label="Data" value={step.data}
value={step.data} fullWidth
fullWidth margin="normal"
margin="normal" InputProps={{ readOnly: confirmedTextSteps[step.id] }}
InputProps={{ readOnly: confirmedTextSteps[step.id] }} />
/> {!confirmedTextSteps[step.id] && (
{!confirmedTextSteps[step.id] && ( <Box display="flex" justifyContent="space-between" gap={2}>
<Box display="flex" justifyContent="space-between" gap={2}> <Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>Confirm</Button>
<Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>Confirm</Button> <Button variant="contained" onClick={() => handleTextStepDiscard(step.id)}>Discard</Button>
<Button variant="contained" onClick={() => handleTextStepDiscard(step.id)}>Discard</Button> </Box>
</Box> )}
)} </>
</> ) : (
) : ( step.type === 'screenshot' && (
step.type === 'screenshot' && ( <Typography>{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}</Typography>
<Typography>{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}</Typography>
)
) )
} )}
</Box> </Box>
))} ))}
</Box> </Box>
) : null </Box>
} )}
</Paper> </Paper>
); );
}; };