translate NTP, AP, MQTT and User

interface/src/framework/ntp/NTPSettingsForm.tsx

@@ -12,12 +12,16 @@ import * as NTPApi from '../../api/ntp';
 import { selectedTimeZone, timeZoneSelectItems, TIME_ZONES } from './TZ';
 import { NTP_SETTINGS_VALIDATOR } from '../../validators/ntp';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const NTPSettingsForm: FC = () => {
   const { loadData, saving, data, setData, saveData, errorMessage } = useRest<NTPSettings>({
     read: NTPApi.readNTPSettings,
     update: NTPApi.updateNTPSettings
   });
 
+  const { LL } = useI18nContext();
+
   const updateFormValue = updateValue(setData);
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -49,7 +53,7 @@ const NTPSettingsForm: FC = () => {
       <>
         <BlockFormControlLabel
           control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
-          label="Enable NTP"
+          label={LL.ENABLE_NTP()}
         />
         <ValidatedTextField
           fieldErrors={fieldErrors}
@@ -64,7 +68,7 @@ const NTPSettingsForm: FC = () => {
         <ValidatedTextField
           fieldErrors={fieldErrors}
           name="tz_label"
-          label="Time zone"
+          label={LL.TIME_ZONE()}
           fullWidth
           variant="outlined"
           value={selectedTimeZone(data.tz_label, data.tz_format)}
@@ -72,7 +76,7 @@ const NTPSettingsForm: FC = () => {
           margin="normal"
           select
         >
-          <MenuItem disabled>Time zone...</MenuItem>
+          <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
           {timeZoneSelectItems()}
         </ValidatedTextField>
         <ButtonRow>
@@ -84,7 +88,7 @@ const NTPSettingsForm: FC = () => {
             type="submit"
             onClick={validateAndSubmit}
           >
-            Save
+            {LL.SAVE()}
           </Button>
         </ButtonRow>
       </>
@@ -92,7 +96,7 @@ const NTPSettingsForm: FC = () => {
   };
 
   return (
-    <SectionContent title="NTP Settings" titleGutter>
+    <SectionContent title={'NTP ' + LL.SETTINGS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/ntp/NTPStatusForm.tsx

@@ -49,19 +49,6 @@ export const ntpStatusHighlight = ({ status }: NTPStatus, theme: Theme) => {
   }
 };
 
-export const ntpStatus = ({ status }: NTPStatus) => {
-  switch (status) {
-    case NTPSyncStatus.NTP_DISABLED:
-      return 'Disabled';
-    case NTPSyncStatus.NTP_INACTIVE:
-      return 'Inactive';
-    case NTPSyncStatus.NTP_ACTIVE:
-      return 'Active';
-    default:
-      return 'Unknown';
-  }
-};
-
 const NTPStatusForm: FC = () => {
   const { loadData, data, errorMessage } = useRest<NTPStatus>({ read: NTPApi.readNTPStatus });
   const [localTime, setLocalTime] = useState<string>('');
@@ -81,6 +68,19 @@ const NTPStatusForm: FC = () => {
 
   const theme = useTheme();
 
+  const ntpStatus = ({ status }: NTPStatus) => {
+    switch (status) {
+      case NTPSyncStatus.NTP_DISABLED:
+        return LL.DISABLED();
+      case NTPSyncStatus.NTP_INACTIVE:
+        return LL.INACTIVE();
+      case NTPSyncStatus.NTP_ACTIVE:
+        return LL.ACTIVE();
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
   const configureTime = async () => {
     setProcessing(true);
     try {
@@ -100,11 +100,11 @@ const NTPStatusForm: FC = () => {
   const renderSetTimeDialog = () => {
     return (
       <Dialog open={settingTime} onClose={() => setSettingTime(false)}>
-        <DialogTitle>Set Time</DialogTitle>
+        <DialogTitle>{LL.SET_TIME()}</DialogTitle>
         <DialogContent dividers>
-          <Box mb={2}>Enter local date and time below to set the device's time.</Box>
+          <Box mb={2}>{LL.SET_TIME_TEXT()}</Box>
           <TextField
-            label="Local Time"
+            label={LL.LOCAL_TIME()}
             type="datetime-local"
             value={localTime}
             onChange={updateLocalTime}
@@ -118,7 +118,7 @@ const NTPStatusForm: FC = () => {
         </DialogContent>
         <DialogActions>
           <Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setSettingTime(false)} color="secondary">
-            Cancel
+            {LL.CANCEL()}
           </Button>
           <Button
             startIcon={<AccessTimeIcon />}
@@ -128,7 +128,7 @@ const NTPStatusForm: FC = () => {
             color="primary"
             autoFocus
           >
-            Set Time
+            {LL.SET_TIME()}
           </Button>
         </DialogActions>
       </Dialog>
@@ -149,7 +149,7 @@ const NTPStatusForm: FC = () => {
                 <UpdateIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Status" secondary={ntpStatus(data)} />
+            <ListItemText primary={LL.STATUS()} secondary={ntpStatus(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           {isNtpEnabled(data) && (
@@ -171,7 +171,7 @@ const NTPStatusForm: FC = () => {
                 <AccessTimeIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Local Time" secondary={formatDateTime(data.local_time)} />
+            <ListItemText primary={LL.LOCAL_TIME()} secondary={formatDateTime(data.local_time)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           <ListItem>
@@ -180,7 +180,7 @@ const NTPStatusForm: FC = () => {
                 <SwapVerticalCircleIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="UTC Time" secondary={formatDateTime(data.utc_time)} />
+            <ListItemText primary={LL.UTC_TIME()} secondary={formatDateTime(data.utc_time)} />
           </ListItem>
           <Divider variant="inset" component="li" />
         </List>
@@ -188,7 +188,7 @@ const NTPStatusForm: FC = () => {
           <Box flexGrow={1}>
             <ButtonRow>
               <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-                Refresh
+                {LL.REFRESH()}
               </Button>
             </ButtonRow>
           </Box>
@@ -196,7 +196,7 @@ const NTPStatusForm: FC = () => {
             <Box flexWrap="nowrap" whiteSpace="nowrap">
               <ButtonRow>
                 <Button onClick={openSetTime} variant="outlined" color="primary" startIcon={<AccessTimeIcon />}>
-                  Set Time
+                  {LL.SET_TIME()}
                 </Button>
               </ButtonRow>
             </Box>
@@ -208,7 +208,7 @@ const NTPStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="NTP Status" titleGutter>
+    <SectionContent title={'NTP ' + LL.STATUS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/ntp/NetworkTime.tsx

@@ -13,7 +13,7 @@ import { useI18nContext } from '../../i18n/i18n-react';
 
 const NetworkTime: FC = () => {
   const { LL } = useI18nContext();
-  useLayoutTitle(LL.NETWORK_TIME());
+  useLayoutTitle("NTP");
 
   const authenticatedContext = useContext(AuthenticatedContext);
   const { routerTab } = useRouterTab();
@@ -21,8 +21,8 @@ const NetworkTime: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="NTP Status" />
-        <Tab value="settings" label="NTP Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab value="status" label={'NTP ' + LL.STATUS()} />
+        <Tab value="settings" label={'NTP ' + LL.SETTINGS()} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<NTPStatusForm />} />