translate system menu

interface/src/framework/system/SystemStatusForm.tsx

@@ -39,6 +39,8 @@ import { AuthenticatedContext } from '../../contexts/authentication';
 
 import axios from 'axios';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const VERSIONCHECK_ENDPOINT = 'https://api.github.com/repos/emsesp/EMS-ESP32/releases/latest';
 export const VERSIONCHECK_DEV_ENDPOINT = 'https://api.github.com/repos/emsesp/EMS-ESP32/releases/tags/latest';
 export const uploadURL = window.location.origin + '/system/upload';
@@ -48,6 +50,8 @@ function formatNumber(num: number) {
 }
 
 const SystemStatusForm: FC = () => {
+  const { LL } = useI18nContext();
+
   const { loadData, data, errorMessage } = useRest<SystemStatus>({ read: SystemApi.readSystemStatus });
 
   const { me } = useContext(AuthenticatedContext);
@@ -80,9 +84,9 @@ const SystemStatusForm: FC = () => {
     setProcessing(true);
     try {
       await SystemApi.restart();
-      enqueueSnackbar('EMS-ESP is restarting...', { variant: 'info' });
+      enqueueSnackbar(LL.APPLICATION_RESTARTING(), { variant: 'info' });
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem restarting device'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
     } finally {
       setConfirmRestart(false);
       setProcessing(false);
@@ -92,7 +96,7 @@ const SystemStatusForm: FC = () => {
   const renderRestartDialog = () => (
     <Dialog open={confirmRestart} onClose={() => setConfirmRestart(false)}>
       <DialogTitle>Restart</DialogTitle>
-      <DialogContent dividers>Are you sure you want to restart EMS-ESP?</DialogContent>
+      <DialogContent dividers>{LL.RESTART_TEXT()}</DialogContent>
       <DialogActions>
         <Button
           startIcon={<CancelIcon />}
@@ -119,16 +123,12 @@ const SystemStatusForm: FC = () => {
   const renderVersionDialog = () => {
     return (
       <Dialog open={showingVersion} onClose={() => setShowingVersion(false)}>
-        <DialogTitle>Version Check</DialogTitle>
+        <DialogTitle>{LL.VERSION_CHECK()}</DialogTitle>
         <DialogContent dividers>
-          <MessageBox
-            my={0}
-            level="info"
-            message={'You are currently running EMS-ESP version ' + data?.emsesp_version}
-          />
+          <MessageBox my={0} level="info" message={LL.SYSTEM_VERSION_RUNNING() + ' ' + data?.emsesp_version} />
           {latestVersion && (
             <Box mt={2} mb={2}>
-              The latest <u>official</u> version is <b>{latestVersion.version}</b>&nbsp;(
+              {LL.THE_LATEST()}&nbsp;<u>official</u> version is <b>{latestVersion.version}</b>&nbsp;(
               <Link target="_blank" href={latestVersion.changelog} color="primary">
                 {'release notes'}
               </Link>
@@ -142,7 +142,7 @@ const SystemStatusForm: FC = () => {
 
           {latestDevVersion && (
             <Box mt={2} mb={2}>
-              The latest <u>development</u> version is&nbsp;<b>{latestDevVersion.version}</b>
+              {LL.THE_LATEST()}&nbsp;<u>development</u> version is&nbsp;<b>{latestDevVersion.version}</b>
               &nbsp;(
               <Link target="_blank" href={latestDevVersion.changelog} color="primary">
                 {'release notes'}
@@ -157,17 +157,17 @@ const SystemStatusForm: FC = () => {
 
           <Box color="warning.main" p={0} pl={0} pr={0} mt={4} mb={0}>
             <Typography variant="body2">
-              Use&nbsp;
+              {LL.USE()}&nbsp;
               <Link target="_blank" href={uploadURL} color="primary">
                 {'UPLOAD'}
               </Link>
-              &nbsp;to apply the new firmware
+              &nbsp;{LL.SYSTEM_APPLY_FIRMWARE()}
             </Typography>
           </Box>
         </DialogContent>
         <DialogActions>
           <Button variant="outlined" onClick={() => setShowingVersion(false)} color="secondary">
-            Close
+            {LL.CLOSE()}
           </Button>
         </DialogActions>
       </Dialog>
@@ -178,9 +178,9 @@ const SystemStatusForm: FC = () => {
     setProcessing(true);
     try {
       await SystemApi.factoryReset();
-      enqueueSnackbar('Device has been factory reset and will now restart', { variant: 'info' });
+      enqueueSnackbar(LL.SYSTEM_FACTORY_TEXT(), { variant: 'info' });
     } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem factory resetting the device'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
     } finally {
       setConfirmFactoryReset(false);
       setProcessing(false);
@@ -189,8 +189,8 @@ const SystemStatusForm: FC = () => {
 
   const renderFactoryResetDialog = () => (
     <Dialog open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
-      <DialogTitle>Factory Reset</DialogTitle>
-      <DialogContent dividers>Are you sure you want to reset the device to its factory defaults?</DialogContent>
+      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
       <DialogActions>
         <Button
           startIcon={<CancelIcon />}
@@ -198,7 +198,7 @@ const SystemStatusForm: FC = () => {
           onClick={() => setConfirmFactoryReset(false)}
           color="secondary"
         >
-          Cancel
+          {LL.CANCEL()}
         </Button>
         <Button
           startIcon={<SettingsBackupRestoreIcon />}
@@ -208,7 +208,7 @@ const SystemStatusForm: FC = () => {
           autoFocus
           color="error"
         >
-          Factory Reset
+          {LL.FACTORY_RESET()}
         </Button>
       </DialogActions>
     </Dialog>
@@ -231,7 +231,7 @@ const SystemStatusForm: FC = () => {
             <ListItemText primary="EMS-ESP Version" secondary={'v' + data.emsesp_version} />
             {latestVersion && (
               <Button color="primary" onClick={() => setShowingVersion(true)}>
-                Version Check
+                {LL.VERSION_CHECK()}
               </Button>
             )}
           </ListItem>
@@ -335,7 +335,7 @@ const SystemStatusForm: FC = () => {
           <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
             <ButtonRow>
               <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-                Refresh
+                {LL.REFRESH()}
               </Button>
             </ButtonRow>
           </Box>
@@ -348,7 +348,7 @@ const SystemStatusForm: FC = () => {
                   color="primary"
                   onClick={() => setConfirmRestart(true)}
                 >
-                  Restart
+                  {LL.RESTART()}
                 </Button>
                 <Button
                   startIcon={<SettingsBackupRestoreIcon />}
@@ -356,7 +356,7 @@ const SystemStatusForm: FC = () => {
                   onClick={() => setConfirmFactoryReset(true)}
                   color="error"
                 >
-                  Factory reset
+                  {LL.FACTORY_RESET()}
                 </Button>
               </ButtonRow>
             </Box>
@@ -370,7 +370,7 @@ const SystemStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="System Status" titleGutter>
+    <SectionContent title={LL.SYSTEM() + ' ' + LL.STATUS()} titleGutter>
       {content()}
     </SectionContent>
   );