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

Merge branch 'shadow-dom' of https://github.com/getmaxun/maxun into shadow-dom

Browse Source
This commit is contained in:
amhsirak
2025-01-02 21:19:03 +05:30
parent 8323593bb0 3f54f11530
commit 5813ae4026
16 changed files with 318 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -1,6 +1,6 @@
<h1 align="center">
<div>
<a href="https://maxun-website.vercel.app/">
<a href="https://maxun-website.vercel.app/?ref=ghread">
<img src="/src/assets/maxunlogo.png" width="50" />
<br>
Maxun
@@ -15,11 +15,11 @@ Maxun lets you train a robot in 2 minutes and scrape the web on auto-pilot. Web
<p align="center">
<a href="https://maxun-website.vercel.app/"><b>Website</b></a> |
<a href="https://www.maxun.dev/?ref=ghread"><b>Website</b></a> |
<a href="https://discord.gg/5GbPjBUkws"><b>Discord</b></a> |
<a href="https://x.com/maxun_io"><b>Twitter</b></a> |
<a href="https://x.com/maxun_io?ref=ghread"><b>Twitter</b></a> |
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdbD2uhqC4sbg4eLZ9qrFbyrfkXZ2XsI6dQ0USRCQNZNn5pzg/viewform"><b>Join Maxun Cloud</b></a> |
<a href="https://www.youtube.com/@MaxunOSS"><b>Watch Tutorials</b></a>
<a href="https://www.youtube.com/@MaxunOSS?ref=ghread"><b>Watch Tutorials</b></a>
<br />
<br />
<a href="https://trendshift.io/repositories/12113" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12113" alt="getmaxun%2Fmaxun | Trendshift" style="width: 250px; height: 55px; margin-top: 10px;" width="250" height="55"/></a>

6
maxun-core/src/browserSide/scraper.js
View File

@@ -705,14 +705,14 @@ function scrapableHeuristics(maxCountPerPage = 50, minArea = 20000, scrolls = 3,
if (Object.keys(record).length > 0) {
nonTableData.push(record);
}
}
}
}
// Merge and limit the results
const scrapedData = [...tableData, ...nonTableData];
return scrapedData;
};
/**
* Gets all children of the elements matching the listSelector,
* returning their CSS selectors and innerText.

12
public/locales/de.json
View File

@@ -1,7 +1,7 @@
{
"login": {
"title": "Willkommen zurück!",
"email": "E-Mail",
"email": "Geben Sie Ihre geschäftliche E-Mail-Adresse ein",
"password": "Passwort",
"button": "Einloggen",
"loading": "Lädt",
@@ -12,7 +12,7 @@
},
"register": {
"title": "Konto registrieren",
"email": "E-Mail",
"email": "Geben Sie Ihre geschäftliche E-Mail-Adresse ein",
"password": "Passwort",
"button": "Registrieren",
"loading": "Lädt",
@@ -158,11 +158,13 @@
"confirm": "Bestätigen",
"discard": "Verwerfen",
"confirm_capture": "Erfassung bestätigen",
"confirm_pagination": "Paginierung bestätigen",
"confirm_limit": "Limit bestätigen",
"confirm_pagination": "Bestätigen",
"confirm_limit": "Bestätigen",
"finish_capture": "Erfassung abschließen",
"back": "Zurück",
"finish": "Fertig",
"cancel": "Abbrechen"
"cancel": "Abbrechen",
"delete": "Löschen"
},
"screenshot": {
"capture_fullpage": "Vollständige Seite erfassen",

12
public/locales/en.json
View File

@@ -1,7 +1,7 @@
{
"login": {
"title": "Welcome Back!",
"email": "Email",
"email": "Enter Work Email",
"password": "Password",
"button": "Login",
"loading": "Loading",
@@ -12,7 +12,7 @@
},
"register": {
"title": "Register Account",
"email": "Email",
"email": "Enter Work Email",
"password": "Password",
"button": "Register",
"loading": "Loading",
@@ -159,11 +159,13 @@
"confirm": "Confirm",
"discard": "Discard",
"confirm_capture": "Confirm Capture",
"confirm_pagination": "Confirm Pagination",
"confirm_limit": "Confirm Limit",
"confirm_pagination": "Confirm",
"confirm_limit": "Confirm",
"finish_capture": "Finish Capture",
"back": "Back",
"finish": "Finish",
"cancel": "Cancel"
"cancel": "Cancel",
"delete": "Delete"
},
"screenshot": {
"capture_fullpage": "Capture Fullpage",

12
public/locales/es.json
View File

@@ -1,7 +1,7 @@
{
"login": {
"title": "¡Bienvenido de nuevo!",
"email": "Correo electrónico",
"email": "Introducir correo electrónico de trabajo",
"password": "Contraseña",
"button": "Iniciar sesión",
"loading": "Cargando",
@@ -12,7 +12,7 @@
},
"register": {
"title": "Crear cuenta",
"email": "Correo electrónico",
"email": "Introducir correo electrónico de trabajo",
"password": "Contraseña",
"button": "Registrarse",
"loading": "Cargando",
@@ -159,11 +159,13 @@
"confirm": "Confirmar",
"discard": "Descartar",
"confirm_capture": "Confirmar Captura",
"confirm_pagination": "Confirmar Paginación",
"confirm_limit": "Confirmar Límite",
"confirm_pagination": "Confirmar",
"confirm_limit": "Confirmar",
"finish_capture": "Finalizar Captura",
"back": "Atrás",
"finish": "Finalizar",
"cancel": "Cancelar"
"cancel": "Cancelar",
"delete": "Eliminar"
},
"screenshot": {
"capture_fullpage": "Capturar Página Completa",

12
public/locales/ja.json
View File

@@ -1,7 +1,7 @@
{
"login": {
"title": "お帰りなさい！",
"email": "メールアドレス",
"email": "勤務先メールアドレスを入力",
"password": "パスワード",
"button": "ログイン",
"loading": "読み込み中",
@@ -12,7 +12,7 @@
},
"register": {
"title": "アカウントを登録する",
"email": "メールアドレス",
"email": "勤務先メールアドレスを入力",
"password": "パスワード",
"button": "登録する",
"loading": "読み込み中",
@@ -159,11 +159,13 @@
"confirm": "確認",
"discard": "破棄",
"confirm_capture": "取得を確認",
"confirm_pagination": "ページネーションを確認",
"confirm_limit": "制限を確認",
"confirm_pagination": "確認",
"confirm_limit": "確認",
"finish_capture": "取得を完了",
"back": "戻る",
"finish": "完了",
"cancel": "キャンセル"
"cancel": "キャンセル",
"delete": "削除"
},
"screenshot": {
"capture_fullpage": "フルページを取得",

12
public/locales/zh.json
View File

@@ -1,7 +1,7 @@
{
"login": {
"title": "欢迎回来！",
"email": "电子邮箱",
"email": "输入工作电子邮箱",
"password": "密码",
"button": "登录",
"loading": "加载中",
@@ -12,7 +12,7 @@
},
"register": {
"title": "注册账号",
"email": "电子邮箱",
"email": "输入工作电子邮箱",
"password": "密码",
"button": "注册",
"loading": "加载中",
@@ -159,11 +159,13 @@
"confirm": "确认",
"discard": "放弃",
"confirm_capture": "确认捕获",
"confirm_pagination": "确认分页",
"confirm_limit": "确认限制",
"confirm_pagination": "确认",
"confirm_limit": "确认",
"finish_capture": "完成捕获",
"back": "返回",
"finish": "完成",
"cancel": "取消"
"cancel": "取消",
"delete": "删除"
},
"screenshot": {
"capture_fullpage": "捕获整页",

213
server/src/workflow-management/selector.ts
View File

@@ -139,26 +139,45 @@ export const getElementInformation = async (
const originalEl = getDeepestElementFromPoint(x, y);
if (originalEl) {
let element = originalEl;
// Handle element hierarchy traversal for list items
while (element.parentElement) {
const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect();
const fullyContained =
parentRect.left <= childRect.left &&
parentRect.right >= childRect.right &&
parentRect.top <= childRect.top &&
parentRect.bottom >= childRect.bottom;
const significantOverlap =
(childRect.width * childRect.height) /
(parentRect.width * parentRect.height) > 0.5;
if (fullyContained && significantOverlap) {
element = element.parentElement;
} else {
break;
if (element.tagName === 'TD' || element.tagName === 'TH') {
const tableParent = element.closest('table');
if (tableParent) {
element = tableParent;
}
}
if (element.tagName !== 'TABLE') {
while (element.parentElement) {
if (element.tagName.toLowerCase() === 'body' ||
element.tagName.toLowerCase() === 'html') {
break;
}
const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect();
const fullyContained =
parentRect.left <= childRect.left &&
parentRect.right >= childRect.right &&
parentRect.top <= childRect.top &&
parentRect.bottom >= childRect.bottom;
const significantOverlap =
(childRect.width * childRect.height) /
(parentRect.width * parentRect.height) > 0.5;
if (fullyContained && significantOverlap) {
const nextParent = element.parentElement;
if (nextParent.tagName.toLowerCase() !== 'body' &&
nextParent.tagName.toLowerCase() !== 'html') {
element = nextParent;
} else {
break;
}
} else {
break;
}
}
}
@@ -319,25 +338,44 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
if (originalEl) {
let element = originalEl;
// Handle element hierarchy traversal for list items
while (element.parentElement) {
const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect();
if (element.tagName === 'TD' || element.tagName === 'TH') {
const tableParent = element.closest('table');
if (tableParent) {
element = tableParent;
}
}
const fullyContained =
parentRect.left <= childRect.left &&
parentRect.right >= childRect.right &&
parentRect.top <= childRect.top &&
parentRect.bottom >= childRect.bottom;
if (element.tagName !== 'TABLE') {
while (element.parentElement) {
if (element.tagName.toLowerCase() === 'body' ||
element.tagName.toLowerCase() === 'html') {
break;
}
const significantOverlap =
(childRect.width * childRect.height) /
(parentRect.width * parentRect.height) > 0.5;
const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect();
if (fullyContained && significantOverlap) {
element = element.parentElement;
} else {
break;
const fullyContained =
parentRect.left <= childRect.left &&
parentRect.right >= childRect.right &&
parentRect.top <= childRect.top &&
parentRect.bottom >= childRect.bottom;
const significantOverlap =
(childRect.width * childRect.height) /
(parentRect.width * parentRect.height) > 0.5;
if (fullyContained && significantOverlap) {
const nextParent = element.parentElement;
if (nextParent.tagName.toLowerCase() !== 'body' &&
nextParent.tagName.toLowerCase() !== 'html') {
element = nextParent;
} else {
break;
}
} else {
break;
}
}
}
@@ -1113,17 +1151,24 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
// Generate basic selector from element's tag and classes
function getNonUniqueSelector(element: HTMLElement): string {
let selector = element.tagName.toLowerCase();
const className = typeof element.className === 'string' ? element.className : '';
if (className) {
const classes = className.split(/\s+/)
.filter(cls => Boolean(cls) && !cls.startsWith('!') && !cls.includes(':'));
if (selector === 'td' && element.parentElement) {
// Find position among td siblings
const siblings = Array.from(element.parentElement.children);
const position = siblings.indexOf(element) + 1;
return `${selector}:nth-child(${position})`;
}
if (element.className) {
const classes = element.className.split(/\s+/).filter((cls: string) => Boolean(cls));
if (classes.length > 0) {
selector += '.' + classes.map(cls => CSS.escape(cls)).join('.');
const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':'));
if (validClasses.length > 0) {
selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.');
}
}
}
return selector;
}
@@ -1202,25 +1247,45 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
let element = originalEl;
// Handle parent traversal for better element targeting
while (element.parentElement) {
const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect();
if (element.tagName === 'TD' || element.tagName === 'TH') {
const tableParent = element.closest('table');
if (tableParent) {
element = tableParent;
}
}
const fullyContained =
parentRect.left <= childRect.left &&
parentRect.right >= childRect.right &&
parentRect.top <= childRect.top &&
parentRect.bottom >= childRect.bottom;
// if (listSelector === '') {
if (element.tagName !== 'TABLE') {
while (element.parentElement) {
if (element.tagName.toLowerCase() === 'body' ||
element.tagName.toLowerCase() === 'html') {
break;
}
const significantOverlap =
(childRect.width * childRect.height) /
(parentRect.width * parentRect.height) > 0.5;
const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect();
if (fullyContained && significantOverlap) {
element = element.parentElement;
} else {
break;
const fullyContained =
parentRect.left <= childRect.left &&
parentRect.right >= childRect.right &&
parentRect.top <= childRect.top &&
parentRect.bottom >= childRect.bottom;
const significantOverlap =
(childRect.width * childRect.height) /
(parentRect.width * parentRect.height) > 0.5;
if (fullyContained && significantOverlap) {
const nextParent = element.parentElement;
if (nextParent.tagName.toLowerCase() !== 'body' &&
nextParent.tagName.toLowerCase() !== 'html') {
element = nextParent;
} else {
break;
}
} else {
break;
}
}
}
@@ -1260,17 +1325,23 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
// Generate basic selector from element's tag and classes
function getNonUniqueSelector(element: HTMLElement): string {
let selector = element.tagName.toLowerCase();
const className = typeof element.className === 'string' ? element.className : '';
if (className) {
const classes = className.split(/\s+/)
.filter(cls => Boolean(cls) && !cls.startsWith('!') && !cls.includes(':'));
if (selector === 'td' && element.parentElement) {
const siblings = Array.from(element.parentElement.children);
const position = siblings.indexOf(element) + 1;
return `${selector}:nth-child(${position})`;
}
if (element.className) {
const classes = element.className.split(/\s+/).filter((cls: string) => Boolean(cls));
if (classes.length > 0) {
selector += '.' + classes.map(cls => CSS.escape(cls)).join('.');
const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':'));
if (validClasses.length > 0) {
selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.');
}
}
}
return selector;
}
@@ -1364,6 +1435,12 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
function getNonUniqueSelector(element: HTMLElement): string {
let selector = element.tagName.toLowerCase();
if (selector === 'td' && element.parentElement) {
const siblings = Array.from(element.parentElement.children);
const position = siblings.indexOf(element) + 1;
return `${selector}:nth-child(${position})`;
}
const className = typeof element.className === 'string' ? element.className : '';
if (className) {
const classes = className.split(/\s+/).filter((cls: string) => Boolean(cls));

25
src/api/storage.ts
View File

@@ -5,11 +5,6 @@ import { ScheduleSettings } from "../components/molecules/ScheduleSettings";
import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
import { apiUrl } from "../apiConfig";
export const getStoredRecordings = async (): Promise<string[] | null> => {
try {
const response = await axios.get(`${apiUrl}/storage/recordings`);
@@ -82,11 +77,7 @@ export const getStoredRecording = async (id: string) => {
}
}
export const checkRunsForRecording = async (id: string): Promise<boolean> => {
try {
const response = await axios.get(`${apiUrl}/storage/recordings/${id}/runs`);
@@ -99,32 +90,26 @@ export const checkRunsForRecording = async (id: string): Promise<boolean> => {
}
};
export const deleteRecordingFromStorage = async (id: string): Promise<boolean> => {
const hasRuns = await checkRunsForRecording(id);
if (hasRuns) {
return false;
}
try {
const response = await axios.delete(`${apiUrl}/storage/recordings/${id}`);
if (response.status === 200) {
return true;
} else {
throw new Error(`Couldn't delete stored recording ${id}`);
}
} catch (error: any) {
console.log(error);
return false;
}
};
export const deleteRunFromStorage = async (id: string): Promise<boolean> => {
@@ -159,7 +144,7 @@ export const createRunForStoredRecording = async (id: string, settings: RunSetti
try {
const response = await axios.put(
`${apiUrl}/storage/runs/${id}`,
{ ...settings });
{ ...settings });
if (response.status === 200) {
return response.data;
} else {

20
src/api/workflow.ts
View File

@@ -3,7 +3,7 @@ import { emptyWorkflow } from "../shared/constants";
import { default as axios, AxiosResponse } from "axios";
import { apiUrl } from "../apiConfig";
export const getActiveWorkflow = async(id: string) : Promise<WorkflowFile> => {
export const getActiveWorkflow = async (id: string): Promise<WorkflowFile> => {
try {
const response = await axios.get(`${apiUrl}/workflow/${id}`)
if (response.status === 200) {
@@ -11,13 +11,13 @@ export const getActiveWorkflow = async(id: string) : Promise<WorkflowFile> => {
} else {
throw new Error('Something went wrong when fetching a recorded workflow');
}
} catch(error: any) {
} catch (error: any) {
console.log(error);
return emptyWorkflow;
}
};
export const getParamsOfActiveWorkflow = async(id: string) : Promise<string[]|null> => {
export const getParamsOfActiveWorkflow = async (id: string): Promise<string[] | null> => {
try {
const response = await axios.get(`${apiUrl}/workflow/params/${id}`)
if (response.status === 200) {
@@ -25,15 +25,15 @@ export const getParamsOfActiveWorkflow = async(id: string) : Promise<string[]|nu
} else {
throw new Error('Something went wrong when fetching the parameters of the recorded workflow');
}
} catch(error: any) {
} catch (error: any) {
console.log(error);
return null;
}
};
export const deletePair = async(index: number): Promise<WorkflowFile> => {
export const deletePair = async (index: number): Promise<WorkflowFile> => {
try {
const response = await axios.delete(`${apiUrl}/workflow/pair/${index}`);
const response = await axios.delete(`${apiUrl}/workflow/pair/${index}`);
if (response.status === 200) {
return response.data;
} else {
@@ -45,11 +45,11 @@ export const deletePair = async(index: number): Promise<WorkflowFile> => {
}
};
export const AddPair = async(index: number, pair: WhereWhatPair): Promise<WorkflowFile> => {
export const AddPair = async (index: number, pair: WhereWhatPair): Promise<WorkflowFile> => {
try {
const response = await axios.post(`${apiUrl}/workflow/pair/${index}`, {
pair,
}, {headers: {'Content-Type': 'application/json'}});
}, { headers: { 'Content-Type': 'application/json' } });
if (response.status === 200) {
return response.data;
} else {
@@ -61,11 +61,11 @@ export const AddPair = async(index: number, pair: WhereWhatPair): Promise<Workfl
}
};
export const UpdatePair = async(index: number, pair: WhereWhatPair): Promise<WorkflowFile> => {
export const UpdatePair = async (index: number, pair: WhereWhatPair): Promise<WorkflowFile> => {
try {
const response = await axios.put(`${apiUrl}/workflow/pair/${index}`, {
pair,
}, {headers: {'Content-Type': 'application/json'}});
}, { headers: { 'Content-Type': 'application/json' } });
if (response.status === 200) {
return response.data;
} else {

2
src/components/molecules/NavBar.tsx
View File

@@ -318,7 +318,7 @@ export const NavBar: React.FC<NavBarProps> = ({
<MenuItem onClick={() => {
window.open('https://x.com/maxun_io?ref=app', '_blank');
}}>
<X sx={{ marginRight: '5px' }} /> Twiiter (X)
<X sx={{ marginRight: '5px' }} /> Twitter (X)
</MenuItem>
<MenuItem onClick={handleLangMenuOpen}>
<Language sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.language')}

5
src/components/molecules/RecordingsTable.tsx
View File

@@ -33,10 +33,6 @@ interface Column {
format?: (value: string) => string;
}
interface Data {
id: string;
name: string;
@@ -441,7 +437,6 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
</ListItemIcon>
<ListItemText>{t('recordingtable.duplicate')}</ListItemText>
</MenuItem>
</Menu>
</>
);

3
src/components/molecules/ScheduleSettings.tsx
View File

@@ -79,12 +79,13 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
'SUNDAY'
];
const { recordingId } = useGlobalInfoStore();
const { recordingId, notify } = useGlobalInfoStore();
const deleteRobotSchedule = () => {
if (recordingId) {
deleteSchedule(recordingId);
setSchedule(null);
notify('success', t('Schedule deleted successfully'));
} else {
console.error('No recording id provided');
}

6
src/components/organisms/ApiKey.tsx
View File

@@ -124,7 +124,11 @@ const ApiKeyManager = () => {
<TableBody>
<TableRow>
<TableCell>{apiKeyName}</TableCell>
<TableCell>{showKey ? `${apiKey?.substring(0, 10)}...` : '***************'}</TableCell>
<TableCell>
<Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
{showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
</Box>
</TableCell>
<TableCell>
<Tooltip title={t('apikey.actions.copy')}>
<IconButton onClick={copyToClipboard}>

11
src/components/organisms/BrowserWindow.tsx
View File

@@ -68,7 +68,7 @@ export const BrowserWindow = () => {
const { socket } = useSocketStore();
const { notify } = useGlobalInfoStore();
const { getText, getList, paginationMode, paginationType, limitMode } = useActionContext();
const { getText, getList, paginationMode, paginationType, limitMode, captureStage } = useActionContext();
const { addTextStep, addListStep } = useBrowserSteps();
const onMouseMove = (e: MouseEvent) => {
@@ -172,7 +172,7 @@ export const BrowserWindow = () => {
// for non-list steps
setHighlighterData(data);
}
}, [highlighterData, getList, socket, listSelector, paginationMode, paginationType]);
}, [highlighterData, getList, socket, listSelector, paginationMode, paginationType, captureStage]);
useEffect(() => {
@@ -186,6 +186,13 @@ export const BrowserWindow = () => {
};
}, [socket, onMouseMove]);
useEffect(() => {
if (captureStage === 'initial' && listSelector) {
socket?.emit('setGetList', { getList: true });
socket?.emit('listSelector', { selector: listSelector });
}
}, [captureStage, listSelector, socket]);
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (highlighterData && canvasRef?.current) {
const canvasRect = canvasRef.current.getBoundingClientRect();

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

@@ -56,6 +56,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const [showCaptureText, setShowCaptureText] = useState(true);
const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({});
const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage } = useActionContext();
@@ -130,6 +132,16 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const handlePairDelete = () => { }
const handleStartGetText = () => {
setIsCaptureTextConfirmed(false);
startGetText();
}
const handleStartGetList = () => {
setIsCaptureListConfirmed(false);
startGetList();
}
const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => {
if (listId !== undefined && fieldKey !== undefined) {
// Prevent editing if the field is confirmed
@@ -169,6 +181,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
});
};
const handleTextStepDelete = (id: number) => {
deleteBrowserStep(id);
setTextLabels(prevLabels => {
const { [id]: _, ...rest } = prevLabels;
return rest;
});
setConfirmedTextSteps(prev => {
const { [id]: _, ...rest } = prev;
return rest;
});
setErrors(prevErrors => {
const { [id]: _, ...rest } = prevErrors;
return rest;
});
};
const handleListTextFieldConfirm = (listId: number, fieldKey: string) => {
setConfirmedListTextFields(prev => ({
...prev,
@@ -195,6 +223,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
});
};
const handleListTextFieldDelete = (listId: number, fieldKey: string) => {
removeListTextField(listId, fieldKey);
setConfirmedListTextFields(prev => {
const updatedListFields = { ...(prev[listId] || {}) };
delete updatedListFields[fieldKey];
return {
...prev,
[listId]: updatedListFields
};
});
setErrors(prev => {
const { [fieldKey]: _, ...rest } = prev;
return rest;
});
};
const getTextSettingsObject = useCallback(() => {
const settings: Record<string, { selector: string; tag?: string;[key: string]: any }> = {};
browserSteps.forEach(step => {
@@ -224,6 +268,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
if (hasTextSteps) {
socket?.emit('action', { action: 'scrapeSchema', settings });
}
setIsCaptureTextConfirmed(true);
resetInterpretationLog();
onFinishCapture();
}, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps, resetInterpretationLog]);
@@ -326,6 +371,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
}
stopLimitMode();
setShowLimitOptions(false);
setIsCaptureListConfirmed(true);
stopCaptureAndEmitGetListSettings();
setCaptureStage('complete');
break;
@@ -336,6 +382,23 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
}
}, [captureStage, paginationType, limitType, customLimit, startPaginationMode, stopPaginationMode, startLimitMode, stopLimitMode, notify, stopCaptureAndEmitGetListSettings, getListSettingsObject]);
const handleBackCaptureList = useCallback(() => {
switch (captureStage) {
case 'limit':
stopLimitMode();
setShowLimitOptions(false);
startPaginationMode();
setShowPaginationOptions(true);
setCaptureStage('pagination');
break;
case 'pagination':
stopPaginationMode();
setShowPaginationOptions(false);
setCaptureStage('initial');
break;
}
}, [captureStage, stopLimitMode, startPaginationMode, stopPaginationMode]);
const handlePaginationSettingSelect = (option: PaginationType) => {
updatePaginationType(option);
};
@@ -350,6 +413,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
setTextLabels({});
setErrors({});
setConfirmedTextSteps({});
setIsCaptureTextConfirmed(false);
notify('error', t('right_panel.errors.capture_text_discarded'));
}, [browserSteps, stopGetText, deleteBrowserStep]);
@@ -365,6 +429,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
setShowLimitOptions(false);
setCaptureStage('initial');
setConfirmedListTextFields({});
setIsCaptureListConfirmed(false);
notify('error', t('right_panel.errors.capture_list_discarded'));
}, [browserSteps, stopGetList, deleteBrowserStep, resetListState]);
@@ -408,6 +473,14 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
{getList && (
<>
<Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
{(captureStage === 'pagination' || captureStage === 'limit') && (
<Button
variant="outlined"
onClick={handleBackCaptureList}
>
{t('right_panel.buttons.back')}
</Button>
)}
<Button
variant="outlined"
onClick={handleConfirmListCapture}
@@ -418,7 +491,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') :
t('right_panel.buttons.finish_capture')}
</Button>
<Button variant="outlined" color="error" onClick={discardGetList}>{t('right_panel.buttons.discard')}</Button>
<Button variant="outlined" color="error" onClick={discardGetList}>
{t('right_panel.buttons.discard')}
</Button>
</Box>
</>
)}
@@ -470,7 +545,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</RadioGroup>
</FormControl>
)}
{!getText && !getScreenshot && !getList && showCaptureText && <Button variant="contained" onClick={startGetText}>{t('right_panel.buttons.capture_text')}</Button>}
{!getText && !getScreenshot && !getList && showCaptureText && <Button variant="contained" onClick={handleStartGetText}>{t('right_panel.buttons.capture_text')}</Button>}
{getText &&
<>
<Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
@@ -526,11 +601,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
)
}}
/>
{!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()}>{t('right_panel.buttons.confirm')}</Button>
<Button variant="contained" color="error" onClick={() => handleTextStepDiscard(step.id)}>{t('right_panel.buttons.discard')}</Button>
</Box>
) : !isCaptureTextConfirmed && (
<Box display="flex" justifyContent="flex-end" gap={2}>
<Button
variant="contained"
color="error"
onClick={() => handleTextStepDelete(step.id)}
>
{t('right_panel.buttons.delete')}
</Button>
</Box>
)}
</>
)}
@@ -578,7 +663,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
)
}}
/>
{!confirmedListTextFields[step.id]?.[key] && (
{!confirmedListTextFields[step.id]?.[key] ? (
<Box display="flex" justifyContent="space-between" gap={2}>
<Button
variant="contained"
@@ -595,6 +680,16 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
{t('right_panel.buttons.discard')}
</Button>
</Box>
) : !isCaptureListConfirmed && (
<Box display="flex" justifyContent="flex-end" gap={2}>
<Button
variant="contained"
color="error"
onClick={() => handleListTextFieldDelete(step.id, key)}
>
{t('right_panel.buttons.delete')}
</Button>
</Box>
)}
</Box>
))}