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

feat: capture full page & visible part buttons

Browse Source
This commit is contained in:
karishmas6
2024-08-05 23:02:01 +05:30
parent a6665016ae
commit 28c09a016f
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,6 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
const { browserSteps, updateBrowserStepLabel, deleteBrowserStep } = useBrowserSteps(); const { browserSteps, updateBrowserStepLabel, deleteBrowserStep } = useBrowserSteps();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const handleLabelChange = (id: number, label: string) => { const handleLabelChange = (id: number, label: string) => {
setLabels(prevLabels => ({ ...prevLabels, [id]: label })); setLabels(prevLabels => ({ ...prevLabels, [id]: label }));
if (!label.trim()) { if (!label.trim()) {
@@ -57,7 +56,7 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
}; };
const createSettingsObject = useCallback(() => { const createSettingsObject = 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.label && step.selectorObj && step.selectorObj.selector) { if (step.label && step.selectorObj && step.selectorObj.selector) {
settings[step.label] = step.selectorObj; settings[step.label] = step.selectorObj;
@@ -66,7 +65,6 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
return settings; return settings;
}, [browserSteps]); }, [browserSteps]);
const stopCaptureAndEmitSettings = useCallback(() => { const stopCaptureAndEmitSettings = useCallback(() => {
stopGetText(); stopGetText();
const settings = createSettingsObject(); const settings = createSettingsObject();
@@ -75,6 +73,12 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
} }
}, [stopGetText, createSettingsObject, socket]); }, [stopGetText, createSettingsObject, socket]);
const handleCaptureFullpage = () => {
};
const handleCaptureVisiblePart = () => {
};
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%'>
@@ -85,7 +89,13 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
{!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={stopCaptureAndEmitSettings}>Stop Capture Text</Button>} {getText && <Button variant="contained" onClick={stopCaptureAndEmitSettings}>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 && <Button variant="contained" onClick={stopGetScreenshot}>Stop Capture Screenshot</Button>} {getScreenshot && (
<Box display="flex" flexDirection="column" gap={2}>
<Button variant="contained" onClick={handleCaptureFullpage}>Capture Fullpage</Button>
<Button variant="contained" onClick={handleCaptureVisiblePart}>Capture Visible Part</Button>
<Button variant="contained" onClick={stopGetScreenshot}>Stop Capture Screenshot</Button>
</Box>
)}
</Box> </Box>
<Box> <Box>
@@ -121,8 +131,6 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
); );
}; };
export const ActionDescription = styled.p` export const ActionDescription = styled.p`
margin-left: 15px; margin-left: 15px;
`; `;