translate NTP, AP, MQTT and User

interface/src/framework/mqtt/Mqtt.tsx

@@ -9,7 +9,11 @@ import { AuthenticatedContext } from '../../contexts/authentication';
 import MqttStatusForm from './MqttStatusForm';
 import MqttSettingsForm from './MqttSettingsForm';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const Mqtt: FC = () => {
+  const { LL } = useI18nContext();
+
   useLayoutTitle('MQTT');
 
   const authenticatedContext = useContext(AuthenticatedContext);
@@ -18,8 +22,8 @@ const Mqtt: FC = () => {
   return (
     <>
       <RouterTabs value={routerTab}>
-        <Tab value="status" label="MQTT Status" />
-        <Tab value="settings" label="MQTT Settings" disabled={!authenticatedContext.me.admin} />
+        <Tab value="status" label={'MQTT ' + LL.STATUS()} />
+        <Tab value="settings" label={'MQTT ' + LL.SETTINGS()} disabled={!authenticatedContext.me.admin} />
       </RouterTabs>
       <Routes>
         <Route path="status" element={<MqttStatusForm />} />

interface/src/framework/mqtt/MqttSettingsForm.tsx

@@ -17,12 +17,16 @@ import { MqttSettings } from '../../types';
 import { numberValue, updateValue, useRest } from '../../utils';
 import * as MqttApi from '../../api/mqtt';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 const MqttSettingsForm: FC = () => {
   const { loadData, saving, data, setData, saveData, errorMessage } = useRest<MqttSettings>({
     read: MqttApi.readMqttSettings,
     update: MqttApi.updateMqttSettings
   });
 
+  const { LL } = useI18nContext();
+
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
   const updateFormValue = updateValue(setData);
@@ -46,7 +50,7 @@ const MqttSettingsForm: FC = () => {
       <>
         <BlockFormControlLabel
           control={<Checkbox name="enabled" checked={data.enabled} onChange={updateFormValue} />}
-          label="Enable MQTT"
+          label={LL.ENABLE_MQTT()}
         />
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
           <Grid item xs={6}>
@@ -91,7 +95,7 @@ const MqttSettingsForm: FC = () => {
           <Grid item xs={6}>
             <ValidatedTextField
               name="client_id"
-              label="Client ID (optional)"
+              label={'Client ID (' + LL.OPTIONAL() + ')'}
               fullWidth
               variant="outlined"
               value={data.client_id}
@@ -104,7 +108,7 @@ const MqttSettingsForm: FC = () => {
           <Grid item xs={6}>
             <ValidatedTextField
               name="username"
-              label="Username"
+              label={LL.USERNAME()}
               fullWidth
               variant="outlined"
               value={data.username}
@@ -115,7 +119,7 @@ const MqttSettingsForm: FC = () => {
           <Grid item xs={6}>
             <ValidatedPasswordField
               name="password"
-              label="Password"
+              label={LL.PASSWORD()}
               fullWidth
               variant="outlined"
               value={data.password}
@@ -160,18 +164,18 @@ const MqttSettingsForm: FC = () => {
         </Grid>
         <BlockFormControlLabel
           control={<Checkbox name="clean_session" checked={data.clean_session} onChange={updateFormValue} />}
-          label="Set Clean Session"
+          label={LL.MQTT_CLEAN_SESSION()}
         />
         <BlockFormControlLabel
           control={<Checkbox name="mqtt_retain" checked={data.mqtt_retain} onChange={updateFormValue} />}
-          label="Always use Retain Flag"
+          label={LL.MQTT_RETAIN_FLAG()}
         />
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Formatting
+          {LL.FORMATTING()}
         </Typography>
         <ValidatedTextField
           name="nested_format"
-          label="Topic/Payload Format"
+          label={'Topic/Payload ' + LL.FORMAT()}
           value={data.nested_format}
           fullWidth
           variant="outlined"
@@ -179,19 +183,19 @@ const MqttSettingsForm: FC = () => {
           margin="normal"
           select
         >
-          <MenuItem value={1}>Nested in a single topic</MenuItem>
-          <MenuItem value={2}>As individual topics</MenuItem>
+          <MenuItem value={1}>{LL.MQTT_NEST_1()}</MenuItem>
+          <MenuItem value={2}>{LL.MQTT_NEST_2()}</MenuItem>
         </ValidatedTextField>
         <BlockFormControlLabel
           control={<Checkbox name="send_response" checked={data.send_response} onChange={updateFormValue} />}
-          label="Publish command output to a 'response' topic"
+          label={LL.MQTT_RESPONSE()}
         />
         {!data.ha_enabled && (
           <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
             <Grid item>
               <BlockFormControlLabel
                 control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />}
-                label="Publish single value topics on change"
+                label={LL.MQTT_PUBLISH_TEXT_1()}
               />
             </Grid>
             {data.publish_single && (
@@ -200,7 +204,7 @@ const MqttSettingsForm: FC = () => {
                   control={
                     <Checkbox name="publish_single2cmd" checked={data.publish_single2cmd} onChange={updateFormValue} />
                   }
-                  label="Publish to command topics (ioBroker)"
+                  label={LL.MQTT_PUBLISH_TEXT_2()}
                 />
               </Grid>
             )}
@@ -211,14 +215,14 @@ const MqttSettingsForm: FC = () => {
             <Grid item>
               <BlockFormControlLabel
                 control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
-                label="Enable MQTT Discovery (Home Assistant, Domoticz)"
+                label={LL.MQTT_PUBLISH_TEXT_3()}
               />
             </Grid>
             {data.ha_enabled && (
               <Grid item xs={6}>
                 <ValidatedTextField
                   name="discovery_prefix"
-                  label="Prefix for the Discovery topics"
+                  label={LL.MQTT_PUBLISH_TEXT_4()}
                   fullWidth
                   variant="outlined"
                   value={data.discovery_prefix}
@@ -230,14 +234,14 @@ const MqttSettingsForm: FC = () => {
           </Grid>
         )}
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Publish Intervals (0=auto)
+          {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
           <Grid item xs={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_boiler"
-              label="Boilers and Heat Pumps"
+              label={LL.MQTT_INT_BOILER()}
               InputProps={{
                 endAdornment: <InputAdornment position="end">seconds</InputAdornment>
               }}
@@ -253,7 +257,7 @@ const MqttSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_thermostat"
-              label="Thermostats"
+              label={LL.MQTT_INT_THERMOSTATS()}
               InputProps={{
                 endAdornment: <InputAdornment position="end">seconds</InputAdornment>
               }}
@@ -269,7 +273,7 @@ const MqttSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_solar"
-              label="Solar Modules"
+              label={LL.MQTT_INT_SOLAR()}
               InputProps={{
                 endAdornment: <InputAdornment position="end">seconds</InputAdornment>
               }}
@@ -285,7 +289,7 @@ const MqttSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_mixer"
-              label="Mixer Modules"
+              label={LL.MQTT_INT_MIXER()}
               InputProps={{
                 endAdornment: <InputAdornment position="end">seconds</InputAdornment>
               }}
@@ -301,7 +305,7 @@ const MqttSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_sensor"
-              label="Temperature Sensors"
+              label={LL.TEMP_SENSORS()}
               InputProps={{
                 endAdornment: <InputAdornment position="end">seconds</InputAdornment>
               }}
@@ -320,7 +324,7 @@ const MqttSettingsForm: FC = () => {
               InputProps={{
                 endAdornment: <InputAdornment position="end">seconds</InputAdornment>
               }}
-              label="Default"
+              label={LL.DEFAULT()}
               fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_other)}
@@ -339,7 +343,7 @@ const MqttSettingsForm: FC = () => {
             type="submit"
             onClick={validateAndSubmit}
           >
-            Save
+            {LL.SAVE()}
           </Button>
         </ButtonRow>
       </>
@@ -347,7 +351,7 @@ const MqttSettingsForm: FC = () => {
   };
 
   return (
-    <SectionContent title="MQTT Settings" titleGutter>
+    <SectionContent title={'MQTT ' + LL.SETTINGS()} titleGutter>
       {content()}
     </SectionContent>
   );

interface/src/framework/mqtt/MqttStatusForm.tsx

@@ -11,6 +11,8 @@ import { MqttStatus, MqttDisconnectReason } from '../../types';
 import * as MqttApi from '../../api/mqtt';
 import { useRest } from '../../utils';
 
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
   if (!enabled) {
     return theme.palette.info.main;
@@ -29,44 +31,46 @@ export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatus, theme: Theme) =
   return theme.palette.error.main;
 };
 
-export const mqttStatus = ({ enabled, connected }: MqttStatus) => {
-  if (!enabled) {
-    return 'Not enabled';
-  }
-  if (connected) {
-    return 'Connected';
-  }
-  return 'Disconnected';
-};
-
-export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
-  switch (disconnect_reason) {
-    case MqttDisconnectReason.TCP_DISCONNECTED:
-      return 'TCP disconnected';
-    case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
-      return 'Unacceptable protocol version';
-    case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
-      return 'Client ID rejected';
-    case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
-      return 'Server unavailable';
-    case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
-      return 'Malformed credentials';
-    case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
-      return 'Not authorized';
-    case MqttDisconnectReason.ESP8266_NOT_ENOUGH_SPACE:
-      return 'Device out of memory';
-    case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
-      return 'Server fingerprint invalid';
-    default:
-      return 'Unknown';
-  }
-};
-
 const MqttStatusForm: FC = () => {
   const { loadData, data, errorMessage } = useRest<MqttStatus>({ read: MqttApi.readMqttStatus });
 
+  const { LL } = useI18nContext();
+
   const theme = useTheme();
 
+  const mqttStatus = ({ enabled, connected }: MqttStatus) => {
+    if (!enabled) {
+      return LL.NOT_ENABLED();
+    }
+    if (connected) {
+      return LL.CONNECTED();
+    }
+    return LL.DISCONNECTED();
+  };
+
+  const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
+    switch (disconnect_reason) {
+      case MqttDisconnectReason.TCP_DISCONNECTED:
+        return 'TCP disconnected';
+      case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
+        return 'Unacceptable protocol version';
+      case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
+        return 'Client ID rejected';
+      case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
+        return 'Server unavailable';
+      case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
+        return 'Malformed credentials';
+      case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
+        return 'Not authorized';
+      case MqttDisconnectReason.ESP8266_NOT_ENOUGH_SPACE:
+        return 'Device out of memory';
+      case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
+        return 'Server fingerprint invalid';
+      default:
+        return 'Unknown';
+    }
+  };
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -89,7 +93,7 @@ const MqttStatusForm: FC = () => {
                   <SpeakerNotesOffIcon />
                 </Avatar>
               </ListItemAvatar>
-              <ListItemText primary="MQTT Publish Errors" secondary={data.mqtt_fails} />
+              <ListItemText primary={'MQTT Publish ' + LL.ERRORS()} secondary={data.mqtt_fails} />
             </ListItem>
           </>
         );
@@ -102,7 +106,7 @@ const MqttStatusForm: FC = () => {
                 <ReportIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Disconnect Reason" secondary={disconnectReason(data)} />
+            <ListItemText primary={LL.DISCONNECT_REASON()} secondary={disconnectReason(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
         </>
@@ -118,14 +122,14 @@ const MqttStatusForm: FC = () => {
                 <DeviceHubIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary="Status" secondary={mqttStatus(data)} />
+            <ListItemText primary={LL.STATUS()} secondary={mqttStatus(data)} />
           </ListItem>
           <Divider variant="inset" component="li" />
           {data.enabled && renderConnectionStatus()}
         </List>
         <ButtonRow>
           <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-            Refresh
+            {LL.REFRESH()}
           </Button>
         </ButtonRow>
       </>
@@ -133,7 +137,7 @@ const MqttStatusForm: FC = () => {
   };
 
   return (
-    <SectionContent title="MQTT Status" titleGutter>
+    <SectionContent title={'MQTT ' + LL.STATUS()} titleGutter>
       {content()}
     </SectionContent>
   );