language support

2024-12-10 20:40:59 +05:30
parent 5684243215
commit 077234212a
10 changed files with 215 additions and 61 deletions
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -245,6 +245,15 @@ export const NavBar: React.FC<NavBarProps> = ({
            >
              中文
            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                changeLanguage("de");
+                handleMenuClose();
+              }}
+            >
+              German
+            
+            </MenuItem>
          </Menu>
        </div>
      ) : (
--- a/src/components/molecules/RecordingsTable.tsx
+++ b/src/components/molecules/RecordingsTable.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -19,6 +20,7 @@ import { useNavigate } from 'react-router-dom';
 import { stopRecording } from "../../api/recording";
 import { GenericModal } from '../atoms/GenericModal';

+
 /** TODO:
 *  1. allow editing existing robot after persisting browser steps
 */
@@ -31,30 +33,9 @@ interface Column {
  format?: (value: string) => string;
 }

-const columns: readonly Column[] = [
-  { id: 'interpret', label: 'Run', minWidth: 80 },
-  { id: 'name', label: 'Name', minWidth: 80 },
-  {
-    id: 'schedule',
-    label: 'Schedule',
-    minWidth: 80,
-  },
-  {
-    id: 'integrate',
-    label: 'Integrate',
-    minWidth: 80,
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    minWidth: 80,
-  },
-  {
-    id: 'options',
-    label: 'Options',
-    minWidth: 80,
-  },
-];
+
+
+

 interface Data {
  id: string;
@@ -76,12 +57,38 @@ interface RecordingsTableProps {
 }

 export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
+  const {t} = useTranslation();
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  const [rows, setRows] = React.useState<Data[]>([]);
  const [isModalOpen, setModalOpen] = React.useState(false);
  const [searchTerm, setSearchTerm] = React.useState('');

+  const columns: readonly Column[] = [
+    { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
+    { id: 'name', label: t('recordingtable.name'), minWidth: 80 },
+    {
+      id: 'schedule',
+      label: t('recordingtable.schedule'),
+      minWidth: 80,
+    },
+    {
+      id: 'integrate',
+      label: t('recordingtable.integrate'),
+      minWidth: 80,
+    },
+    {
+      id: 'settings',
+      label: t('recordingtable.settings'),
+      minWidth: 80,
+    },
+    {
+      id: 'options',
+      label: t('recordingtable.options'),
+      minWidth: 80,
+    },
+  ];
+
  const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
  const navigate = useNavigate();

@@ -154,16 +161,17 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl



+
  return (
    <React.Fragment>
      <Box display="flex" justifyContent="space-between" alignItems="center">
        <Typography variant="h6" gutterBottom>
-          My Robots
+          {t('recordingtable.heading')}
        </Typography>
        <Box display="flex" alignItems="center" gap={2}>
          <TextField
            size="small"
-            placeholder="Search robots..."
+            placeholder={t('recordingtable.search')}
            value={searchTerm}
            onChange={handleSearchChange}
            InputProps={{
@@ -190,7 +198,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
              '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
            }}
          >
-            <Add sx={{ marginRight: '5px' }} /> Create Robot
+            <Add sx={{ marginRight: '5px' }} /> {t('recordingtable.new')}
          </IconButton>
        </Box>
      </Box>
@@ -300,9 +308,9 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
      />
      <GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} modalStyle={modalStyle}>
        <div style={{ padding: '20px' }}>
-          <Typography variant="h6" gutterBottom>Enter URL To Extract Data</Typography>
+          <Typography variant="h6" gutterBottom>{t('recordingtable.modal.title')}</Typography>
          <TextField
-            label="URL"
+            label={t('recordingtable.modal.label')}
            variant="outlined"
            fullWidth
            value={recordingUrl}
@@ -315,7 +323,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
            onClick={startRecording}
            disabled={!recordingUrl}
          >
-            Start Training Robot
+            {t('recordingtable.modal.button')}
          </Button>
        </div>
      </GenericModal>
@@ -400,6 +408,8 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
    setAnchorEl(null);
  };

+  const {t} = useTranslation();
+
  return (
    <>
      <IconButton
@@ -418,19 +428,19 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
          <ListItemIcon>
            <Edit fontSize="small" />
          </ListItemIcon>
-          <ListItemText>Edit</ListItemText>
+          <ListItemText>{t('recordingtable.edit')}</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => { handleDelete(); handleClose(); }}>
          <ListItemIcon>
            <DeleteForever fontSize="small" />
          </ListItemIcon>
-          <ListItemText>Delete</ListItemText>
+          <ListItemText>{t('recordingtable.delete')}</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
          <ListItemIcon>
            <ContentCopy fontSize="small" />
          </ListItemIcon>
-          <ListItemText>Duplicate</ListItemText>
+          <ListItemText>{t('recordingtable.duplicate')}</ListItemText>
        </MenuItem>
      </Menu>
    </>
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -5,6 +5,9 @@ import Box from '@mui/material/Box';
 import { Paper, Button } from "@mui/material";
 import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Code } from "@mui/icons-material";
 import { apiUrl } from "../../apiConfig";
+import { useTranslation } from 'react-i18next';
+import i18n from '../../i18n';
+

 interface MainMenuProps {
  value: string;
@@ -12,6 +15,7 @@ interface MainMenuProps {
 }

 export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => {
+  const {t} = useTranslation();

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    handleChangeContent(newValue);
@@ -47,7 +51,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="recordings"
-            label="Robots"
+            label={t('mainmenu.recordings')}
            icon={<AutoAwesome />}
            iconPosition="start"
          />
@@ -58,7 +62,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="runs"
-            label="Runs"
+            label={t('mainmenu.runs')}
            icon={<FormatListBulleted />}
            iconPosition="start"
          />
@@ -69,7 +73,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="proxy"
-            label="Proxy"
+            label={t('mainmenu.proxy')}
            icon={<Usb />}
            iconPosition="start"
          />
@@ -80,7 +84,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
              fontSize: 'medium',
            }}
            value="apikey"
-            label="API Key"
+            label={t('mainmenu.apikey')}
            icon={<VpnKey />}
            iconPosition="start"
          />
@@ -88,10 +92,10 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
        <hr />
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Code />}>
-            Website To API
+            {t('mainmenu.apidocs')}
          </Button>
          <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
-            Join Maxun Cloud
+            {t('mainmenu.feedback')}
          </Button>
        </Box>
      </Box>