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

revert: only discard button

Browse Source
This commit is contained in:
karishmas6
2024-08-06 05:05:50 +05:30
parent a3c9debe16
commit 24c1d0cf57
1 changed files with 43 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
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,10 +21,11 @@ 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 }));
setErrors(prevErrors => ({ if (!label.trim()) {
...prevErrors, setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' }));
[id]: label.trim() ? '' : 'Label cannot be empty' } else {
})); setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
}
}; };
const handleTextStepConfirm = (id: number) => { const handleTextStepConfirm = (id: number) => {
@@ -50,7 +51,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;
@@ -59,6 +60,7 @@ export const RightSidePanel = () => {
return settings; return settings;
}, [browserSteps]); }, [browserSteps]);
const stopCaptureAndEmitGetTextSettings = useCallback(() => { const stopCaptureAndEmitGetTextSettings = useCallback(() => {
stopGetText(); stopGetText();
const settings = getTextSettingsObject(); const settings = getTextSettingsObject();
@@ -68,6 +70,7 @@ 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,
@@ -81,14 +84,6 @@ 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%'>
@@ -97,60 +92,56 @@ 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="contained" onClick={stopCaptureAndEmitGetTextSettings}>Stop Capture Text</Button>} {getText && <Button variant="outlined" color="error" onClick={stopCaptureAndEmitGetTextSettings}>Discard</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>
<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 <>
label="Label" <TextField
value={textLabels[step.id] || step.label || ''} label="Label"
onChange={(e) => handleTextLabelChange(step.id, e.target.value)} value={textLabels[step.id] || step.label || ''}
fullWidth onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
margin="normal" fullWidth
error={!!errors[step.id]} margin="normal"
helperText={errors[step.id]} error={!!errors[step.id]}
InputProps={{ readOnly: confirmedTextSteps[step.id] }} helperText={errors[step.id]}
/> InputProps={{ readOnly: confirmedTextSteps[step.id] }}
<TextField />
label="Data" <TextField
value={step.data} label="Data"
fullWidth value={step.data}
margin="normal" fullWidth
InputProps={{ readOnly: confirmedTextSteps[step.id] }} margin="normal"
/> InputProps={{ readOnly: confirmedTextSteps[step.id] }}
{!confirmedTextSteps[step.id] && ( />
<Box display="flex" justifyContent="space-between" gap={2}> {!confirmedTextSteps[step.id] && (
<Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>Confirm</Button> <Box display="flex" justifyContent="space-between" gap={2}>
<Button variant="contained" onClick={() => handleTextStepDiscard(step.id)}>Discard</Button> <Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>Confirm</Button>
</Box> <Button variant="contained" onClick={() => handleTextStepDiscard(step.id)}>Discard</Button>
)} </Box>
</> )}
) : ( </>
step.type === 'screenshot' && ( ) : (
<Typography>{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}</Typography> step.type === 'screenshot' && (
<Typography>{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}</Typography>
)
) )
)} }
</Box> </Box>
))} ))}
</Box> </Box>
</Box>
</Paper> </Paper>
); );
}; };