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