feat: add translation for interpretation buttons

This commit is contained in:
RohitR311
2024-12-21 12:42:59 +05:30
parent aacb5153d4
commit 6a4bb3ed20

View File

@@ -7,6 +7,7 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
import { GenericModal } from "../atoms/GenericModal"; import { GenericModal } from "../atoms/GenericModal";
import { WhereWhatPair } from "maxun-core"; import { WhereWhatPair } from "maxun-core";
import HelpIcon from '@mui/icons-material/Help'; import HelpIcon from '@mui/icons-material/Help';
import { useTranslation } from "react-i18next";
interface InterpretationButtonsProps { interface InterpretationButtonsProps {
enableStepping: (isPaused: boolean) => void; enableStepping: (isPaused: boolean) => void;
@@ -23,6 +24,7 @@ const interpretationInfo: InterpretationInfo = {
}; };
export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsProps) => { export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsProps) => {
const { t } = useTranslation();
const [info, setInfo] = useState<InterpretationInfo>(interpretationInfo); const [info, setInfo] = useState<InterpretationInfo>(interpretationInfo);
const [decisionModal, setDecisionModal] = useState<{ const [decisionModal, setDecisionModal] = useState<{
pair: WhereWhatPair | null, pair: WhereWhatPair | null,
@@ -44,9 +46,9 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
const breakpointHitHandler = useCallback(() => { const breakpointHitHandler = useCallback(() => {
setInfo({ running: false, isPaused: true }); setInfo({ running: false, isPaused: true });
notify('warning', 'Please restart the interpretation after updating the recording'); notify('warning', t('interpretation_buttons.messages.restart_required'));
enableStepping(true); enableStepping(true);
}, [enableStepping]); }, [enableStepping, t]);
const decisionHandler = useCallback( const decisionHandler = useCallback(
({ pair, actionType, lastData }: { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string, tagName: string, innerText: string } }) => { ({ pair, actionType, lastData }: { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string, tagName: string, innerText: string } }) => {
@@ -73,11 +75,12 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
return ( return (
<> <>
<Typography> <Typography>
Do you want to use your previous selection as a condition for performing this action? {t('interpretation_buttons.modal.use_previous')}
</Typography> </Typography>
<Box style={{ marginTop: '4px' }}> <Box style={{ marginTop: '4px' }}>
<Typography> <Typography>
Your previous action was: <b>{decisionModal.action}</b>, on an element with text <b>{decisionModal.innerText}</b> {t('interpretation_buttons.modal.previous_action')} <b>{decisionModal.action}</b>,
{t('interpretation_buttons.modal.element_text')} <b>{decisionModal.innerText}</b>
</Typography> </Typography>
</Box> </Box>
</> </>
@@ -105,9 +108,9 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
const finished = await interpretCurrentRecording(); const finished = await interpretCurrentRecording();
setInfo({ ...info, running: false }); setInfo({ ...info, running: false });
if (finished) { if (finished) {
notify('info', 'Run finished'); notify('info', t('interpretation_buttons.messages.run_finished'));
} else { } else {
notify('error', 'Run failed to start'); notify('error', t('interpretation_buttons.messages.run_failed'));
} }
} }
}; };
@@ -139,9 +142,12 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
disabled={info.running} disabled={info.running}
sx={{ display: 'grid' }} sx={{ display: 'grid' }}
> >
{info.running ? <Box sx={{ display: 'flex', alignItems: 'center' }}> {info.running ? (
<CircularProgress size={22} color="inherit" sx={{ marginRight: '10px' }} /> Extracting data...please wait for 10secs to 1min <Box sx={{ display: 'flex', alignItems: 'center' }}>
</Box> : 'Get Preview of Output Data'} <CircularProgress size={22} color="inherit" sx={{ marginRight: '10px' }} />
{t('interpretation_buttons.messages.extracting')}
</Box>
) : t('interpretation_buttons.buttons.preview')}
</Button> </Button>
<GenericModal <GenericModal
onClose={() => { }} onClose={() => { }}
@@ -166,8 +172,12 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
<HelpIcon /> <HelpIcon />
{handleDescription()} {handleDescription()}
<div style={{ float: 'right' }}> <div style={{ float: 'right' }}>
<Button onClick={() => handleDecision(true)} color='success'>Yes</Button> <Button onClick={() => handleDecision(true)} color='success'>
<Button onClick={() => handleDecision(false)} color='error'>No</Button> {t('interpretation_buttons.buttons.yes')}
</Button>
<Button onClick={() => handleDecision(false)} color='error'>
{t('interpretation_buttons.buttons.no')}
</Button>
</div> </div>
</div> </div>
</GenericModal> </GenericModal>