feat: use text & screenshot steps
This commit is contained in:
@@ -16,7 +16,7 @@ export const RightSidePanel = () => {
|
|||||||
|
|
||||||
const { lastAction } = useGlobalInfoStore();
|
const { lastAction } = useGlobalInfoStore();
|
||||||
const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext();
|
const { getText, getScreenshot, startGetText, stopGetText, startGetScreenshot, stopGetScreenshot } = useActionContext();
|
||||||
const { browserSteps, updateBrowserStepLabel, deleteBrowserStep } = useBrowserSteps();
|
const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep } = useBrowserSteps();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
|
|
||||||
const handleTextLabelChange = (id: number, label: string) => {
|
const handleTextLabelChange = (id: number, label: string) => {
|
||||||
@@ -31,7 +31,7 @@ export const RightSidePanel = () => {
|
|||||||
const handleTextStepConfirm = (id: number) => {
|
const handleTextStepConfirm = (id: number) => {
|
||||||
const label = textLabels[id]?.trim();
|
const label = textLabels[id]?.trim();
|
||||||
if (label) {
|
if (label) {
|
||||||
updateBrowserStepLabel(id, label);
|
updateBrowserTextStepLabel(id, label);
|
||||||
setConfirmedTextSteps(prev => ({ ...prev, [id]: true }));
|
setConfirmedTextSteps(prev => ({ ...prev, [id]: true }));
|
||||||
} else {
|
} else {
|
||||||
setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' }));
|
setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' }));
|
||||||
@@ -51,14 +51,15 @@ 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.label && step.selectorObj && step.selectorObj.selector) {
|
if (step.type === 'text' && step.label && step.selectorObj?.selector) {
|
||||||
settings[step.label] = step.selectorObj;
|
settings[step.label] = step.selectorObj;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return settings;
|
return settings;
|
||||||
}, [browserSteps]);
|
}, [browserSteps]);
|
||||||
|
|
||||||
|
|
||||||
const stopCaptureAndEmitGetTextSettings = useCallback(() => {
|
const stopCaptureAndEmitGetTextSettings = useCallback(() => {
|
||||||
stopGetText();
|
stopGetText();
|
||||||
@@ -104,7 +105,10 @@ export const RightSidePanel = () => {
|
|||||||
<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' }}>
|
||||||
<TextField
|
{
|
||||||
|
step.type === 'text' ? (
|
||||||
|
<>
|
||||||
|
<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)}
|
||||||
@@ -121,6 +125,9 @@ export const RightSidePanel = () => {
|
|||||||
margin="normal"
|
margin="normal"
|
||||||
InputProps={{ readOnly: confirmedTextSteps[step.id] }}
|
InputProps={{ readOnly: confirmedTextSteps[step.id] }}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
{!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>
|
||||||
|
|||||||
Reference in New Issue
Block a user