DE translations for Settings, Customizations and Help

2025-12-07 16:29:51 +03:00 · 2022-08-26 16:14:28 +02:00
parent e9c695f76a
commit 84499dab35
8 changed files with 761 additions and 111 deletions
--- a/interface/src/project/Help.tsx
+++ b/interface/src/project/Help.tsx
@@ -18,7 +18,7 @@ const Help: FC = () => {
  return (
    <>
      <RouterTabs value={routerTab}>
-        <Tab value="information" label="EMS-ESP Help" />
+        <Tab value="information" label={"EMS-ESP " + LL.HELP()} />
      </RouterTabs>
      <Routes>
        <Route path="information" element={<HelpInformation />} />
--- a/interface/src/project/HelpInformation.tsx
+++ b/interface/src/project/HelpInformation.tsx
@@ -14,9 +14,13 @@ import DownloadIcon from '@mui/icons-material/GetApp';

 import { extractErrorMessage } from '../utils';

+import { useI18nContext } from '../i18n/i18n-react';
+
 import * as EMSESP from './api';

 const HelpInformation: FC = () => {
+  const { LL } = useI18nContext();
+
  const { enqueueSnackbar } = useSnackbar();

  const saveFile = (json: any, endpoint: string) => {
@@ -47,40 +51,40 @@ const HelpInformation: FC = () => {
        saveFile(response.data, endpoint);
      }
    } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem with downloading'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_LOADING()), { variant: 'error' });
    }
  };

  return (
-    <SectionContent title="Support Information" titleGutter>
+    <SectionContent title={LL.SUPPORT_INFORMATION()} titleGutter>
      <List>
        <ListItem>
          <ListItemAvatar>
-            <MenuBookIcon />
+            <MenuBookIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
          </ListItemAvatar>
          <ListItemText>
-            Visit the online&nbsp;
+            {LL.HELP_INFORMATION_1()}&nbsp;
            <Link target="_blank" href="https://emsesp.github.io/docs" color="primary">
              {'Wiki'}
            </Link>
-            &nbsp;to get instructions on how to&nbsp;
+            &nbsp;{LL.HELP_INFORMATION_2()}&nbsp;
            <Link
              target="_blank"
              href="https://emsesp.github.io/docs/#/Configure-firmware?id=ems-esp-settings"
              color="primary"
            >
-              {'configure'}
+              {LL.CONFIGURE()}
            </Link>
-            &nbsp;EMS-ESP and access other information.
+            {' EMS-ESP ' + LL.HELP_INFORMATION_3() + '.'}
          </ListItemText>
        </ListItem>

        <ListItem>
          <ListItemAvatar>
-            <CommentIcon />
+            <CommentIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
          </ListItemAvatar>
          <ListItemText>
-            For live community chat join our&nbsp;
+            {LL.HELP_INFORMATION_4()}&nbsp;
            <Link target="_blank" href="https://discord.gg/3J3GgnzpyT" color="primary">
              {'Discord'}
            </Link>
@@ -90,33 +94,31 @@ const HelpInformation: FC = () => {

        <ListItem>
          <ListItemAvatar>
-            <GitHubIcon />
+            <GitHubIcon style={{ fontSize: 24, color: 'lightblue', verticalAlign: 'middle' }} />
          </ListItemAvatar>
-
          <ListItemText>
-            Submit a&nbsp;
+            {LL.HELP_INFORMATION_5()}&nbsp;
            <Link target="_blank" href="https://github.com/emsesp/EMS-ESP32/issues/new/choose" color="primary">
-              support issue
+              {LL.HELP_INFORMATION_6()}
            </Link>
-            &nbsp;for requesting a new feature or reporting a bug.
+            &nbsp;{LL.HELP_INFORMATION_7()}.
            <br />
-            Make sure you also&nbsp;
+            {LL.HELP_INFORMATION_8()}&nbsp;
            <Button startIcon={<DownloadIcon />} variant="outlined" color="primary" onClick={() => callAPI('info')}>
              download
            </Button>
-            &nbsp; and attach your system details for a faster response.
+            &nbsp;&nbsp;{LL.HELP_INFORMATION_9()}.
          </ListItemText>
        </ListItem>
      </List>

      <Box border={1} p={1} mt={4}>
        <Typography align="center" variant="h6" color="orange">
-          EMS-ESP will always be a free and open-source project
-          <br></br>Please consider supporting it with a&nbsp;
-          <StarIcon style={{ fontSize: 16, color: 'yellow', verticalAlign: 'middle' }} /> on&nbsp;
+          {LL.HELP_INFORMATION_10()}
          <Link href="https://github.com/emsesp/EMS-ESP32" color="primary">
            {'GitHub'}
          </Link>
+          <StarIcon style={{ fontSize: 20, color: 'yellow', verticalAlign: 'middle' }} />
        </Typography>
        <Typography align="center">@proddy @MichaelDvP</Typography>
      </Box>
--- a/interface/src/project/Settings.tsx
+++ b/interface/src/project/Settings.tsx
@@ -19,8 +19,8 @@ const Settings: FC = () => {
  return (
    <>
      <RouterTabs value={routerTab}>
-        <Tab value="application" label="Application Settings" />
-        <Tab value="customization" label="Customization" />
+        <Tab value="application" label={LL.APPLICATION_SETTINGS()} />
+        <Tab value="customization" label={LL.CUSTOMIZATION()} />
      </RouterTabs>
      <Routes>
        <Route path="application" element={<SettingsApplication />} />
--- a/interface/src/project/SettingsApplication.tsx
+++ b/interface/src/project/SettingsApplication.tsx
@@ -69,7 +69,7 @@ const SettingsApplication: FC = () => {
        });
      }
    } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem fetching board profile'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
    } finally {
      setProcessingBoard(false);
    }
@@ -106,26 +106,23 @@ const SettingsApplication: FC = () => {
      validateAndSubmit();
      try {
        await EMSESP.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_UPDATING()), { variant: 'error' });
      }
    };

    return (
      <>
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Interface Board Profile
+          Interface {LL.BOARD_PROFILE()}
        </Typography>
        <Box color="warning.main">
-          <Typography variant="body2">
-            Select a pre-configured interface board profile from the list below or choose "Custom" to configure your own
-            hardware settings
-          </Typography>
+          <Typography variant="body2">{LL.BOARD_PROFILE_TEXT()}</Typography>
        </Box>
        <ValidatedTextField
          name="board_profile"
-          label="Board Profile"
+          label={LL.BOARD_PROFILE()}
          value={data.board_profile}
          disabled={processingBoard}
          variant="outlined"
@@ -174,7 +171,7 @@ const SettingsApplication: FC = () => {
                <ValidatedTextField
                  fieldErrors={fieldErrors}
                  name="pbutton_gpio"
-                  label="Button GPIO"
+                  label={LL.BUTTON() + ' GPIO'}
                  fullWidth
                  variant="outlined"
                  value={numberValue(data.pbutton_gpio)}
@@ -188,7 +185,7 @@ const SettingsApplication: FC = () => {
                <ValidatedTextField
                  fieldErrors={fieldErrors}
                  name="dallas_gpio"
-                  label="Temperature GPIO (0=disabled)"
+                  label={LL.TEMPERATURE() + ' GPIO (0=' + LL.DISABLED() + ')'}
                  fullWidth
                  variant="outlined"
                  value={numberValue(data.dallas_gpio)}
@@ -202,7 +199,7 @@ const SettingsApplication: FC = () => {
                <ValidatedTextField
                  fieldErrors={fieldErrors}
                  name="led_gpio"
-                  label="LED GPIO (0=disabled)"
+                  label={'LED GPIO (0=' + LL.DISABLED() + ')'}
                  fullWidth
                  variant="outlined"
                  value={numberValue(data.led_gpio)}
@@ -225,7 +222,7 @@ const SettingsApplication: FC = () => {
                margin="normal"
                select
              >
-                <MenuItem value={0}>No Ethernet Module</MenuItem>
+                <MenuItem value={0}>{LL.DISABLED()}</MenuItem>
                <MenuItem value={1}>LAN8720</MenuItem>
                <MenuItem value={2}>TLK110</MenuItem>
              </ValidatedTextField>
@@ -235,7 +232,7 @@ const SettingsApplication: FC = () => {
                <Grid item>
                  <ValidatedTextField
                    name="eth_power"
-                    label="Eth Power GPIO (-1=disabled)"
+                    label={'Eth Power GPIO (-1=' + LL.DISABLED() + ')'}
                    fullWidth
                    variant="outlined"
                    value={numberValue(data.eth_power)}
@@ -281,7 +278,7 @@ const SettingsApplication: FC = () => {
          </>
        )}
        <Typography variant="h6" color="primary">
-          EMS Bus Settings
+          EMS Bus {LL.SETTINGS()}
        </Typography>
        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
          <Grid item xs={6}>
@@ -323,7 +320,7 @@ const SettingsApplication: FC = () => {
          </Grid>
        </Grid>
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          General Options
+          {LL.GENERAL_OPTIONS()}
        </Typography>
        <Box
          sx={{
@@ -332,7 +329,7 @@ const SettingsApplication: FC = () => {
        >
          <ValidatedTextField
            name="locale"
-            label="Language (for device entities)"
+            label={LL.LANGUAGE_ENTITIES()}
            disabled={saving}
            value={data.locale}
            variant="outlined"
@@ -341,56 +338,56 @@ const SettingsApplication: FC = () => {
            size="small"
            select
          >
-            <MenuItem value="en">English</MenuItem>
-            <MenuItem value="de">Deutsch</MenuItem>
+            <MenuItem value="en">English (en)</MenuItem>
+            <MenuItem value="de">Deutsch (de)</MenuItem>
          </ValidatedTextField>
        </Box>
        {data.led_gpio !== 0 && (
          <BlockFormControlLabel
            control={<Checkbox checked={data.hide_led} onChange={updateFormValue} name="hide_led" />}
-            label="Hide LED"
+            label={LL.HIDE_LED()}
            disabled={saving}
          />
        )}
        <BlockFormControlLabel
          control={<Checkbox checked={data.telnet_enabled} onChange={updateFormValue} name="telnet_enabled" />}
-          label="Enable Telnet Console"
+          label={LL.ENABLE_TELNET()}
          disabled={saving}
        />
        <BlockFormControlLabel
          control={<Checkbox checked={data.analog_enabled} onChange={updateFormValue} name="analog_enabled" />}
-          label="Enable Analog Sensors"
+          label={LL.ENABLE_ANALOG()}
          disabled={saving}
        />
        <BlockFormControlLabel
          control={<Checkbox checked={data.fahrenheit} onChange={updateFormValue} name="fahrenheit" />}
-          label="Convert temperature values to Fahrenheit"
+          label={LL.CONVERT_FAHRENHEIT()}
          disabled={saving}
        />
        <BlockFormControlLabel
          control={<Checkbox checked={data.notoken_api} onChange={updateFormValue} name="notoken_api" />}
-          label="Bypass Access Token authorization on API calls"
+          label={LL.BYPASS_TOKEN()}
          disabled={saving}
        />
        <BlockFormControlLabel
          control={<Checkbox checked={data.readonly_mode} onChange={updateFormValue} name="readonly_mode" />}
-          label="Enable read-only mode (blocks all outgoing EMS Tx Write commands)"
+          label={LL.READONLY()}
          disabled={saving}
        />
        <BlockFormControlLabel
          control={<Checkbox checked={data.low_clock} onChange={updateFormValue} name="low_clock" />}
-          label="Underclock CPU speed"
+          label={LL.UNDERCLOCK_CPU()}
          disabled={saving}
        />
        <Grid container spacing={0} direction="row" justifyContent="flex-start" alignItems="flex-start">
          <BlockFormControlLabel
            control={<Checkbox checked={data.shower_timer} onChange={updateFormValue} name="shower_timer" />}
-            label="Enable Shower Timer"
+            label={LL.ENABLE_SHOWER_TIMER()}
            disabled={saving}
          />
          <BlockFormControlLabel
            control={<Checkbox checked={data.shower_alert} onChange={updateFormValue} name="shower_alert" />}
-            label="Enable Shower Alert"
+            label={LL.ENABLE_SHOWER_ALERT()}
            disabled={!data.shower_timer}
          />
          {data.shower_alert && (
@@ -399,9 +396,9 @@ const SettingsApplication: FC = () => {
                <ValidatedTextField
                  fieldErrors={fieldErrors}
                  name="shower_alert_trigger"
-                  label="Trigger Time"
+                  label={LL.TRIGGER_TIME()}
                  InputProps={{
-                    endAdornment: <InputAdornment position="end">minutes</InputAdornment>
+                    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
                  }}
                  variant="outlined"
                  value={data.shower_alert_trigger}
@@ -414,9 +411,9 @@ const SettingsApplication: FC = () => {
                <ValidatedTextField
                  fieldErrors={fieldErrors}
                  name="shower_alert_coldshot"
-                  label="Cold Shot Duration"
+                  label={LL.COLD_SHOT_DURATION()}
                  InputProps={{
-                    endAdornment: <InputAdornment position="end">seconds</InputAdornment>
+                    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
                  }}
                  variant="outlined"
                  value={data.shower_alert_coldshot}
@@ -429,13 +426,13 @@ const SettingsApplication: FC = () => {
          )}
        </Grid>
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Formatting Options
+          {LL.FORMATTING_OPTIONS()}
        </Typography>
        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
          <Grid item xs={4}>
            <ValidatedTextField
              name="bool_dashboard"
-              label="Boolean Format Dashboard"
+              label={LL.BOOLEAN_FORMAT_DASHBOARD()}
              value={data.bool_dashboard}
              fullWidth
              variant="outlined"
@@ -452,7 +449,7 @@ const SettingsApplication: FC = () => {
          <Grid item xs={4}>
            <ValidatedTextField
              name="bool_format"
-              label="Boolean Format API/MQTT"
+              label={LL.BOOLEAN_FORMAT_API()}
              value={data.bool_format}
              fullWidth
              variant="outlined"
@@ -471,7 +468,7 @@ const SettingsApplication: FC = () => {
          <Grid item xs={4}>
            <ValidatedTextField
              name="enum_format"
-              label="Enum Format API/MQTT"
+              label={LL.ENUM_FORMAT()}
              value={data.enum_format}
              fullWidth
              variant="outlined"
@@ -479,29 +476,29 @@ const SettingsApplication: FC = () => {
              margin="normal"
              select
            >
-              <MenuItem value={1}>Value</MenuItem>
-              <MenuItem value={2}>Index</MenuItem>
+              <MenuItem value={1}>{LL.VALUE()}</MenuItem>
+              <MenuItem value={2}>{LL.INDEX()}</MenuItem>
            </ValidatedTextField>
          </Grid>
        </Grid>
        {data.dallas_gpio !== 0 && (
          <>
            <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-              Temperature Sensors
+              {LL.TEMP_SENSORS()}
            </Typography>
            <BlockFormControlLabel
              control={<Checkbox checked={data.dallas_parasite} onChange={updateFormValue} name="dallas_parasite" />}
-              label="Enable parasite power"
+              label={LL.ENABLE_PARASITE()}
              disabled={saving}
            />
          </>
        )}
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-          Logging
+          {LL.LOGGING()}
        </Typography>
        <BlockFormControlLabel
          control={<Checkbox checked={data.trace_raw} onChange={updateFormValue} name="trace_raw" />}
-          label="Log EMS telegrams in hexadecimal"
+          label={LL.LOG_HEX()}
          disabled={saving}
        />
        <BlockFormControlLabel
@@ -513,7 +510,7 @@ const SettingsApplication: FC = () => {
              disabled={saving}
            />
          }
-          label="Enable Syslog"
+          label={LL.ENABLE_SYSLOG()}
        />
        {data.syslog_enabled && (
          <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
@@ -568,9 +565,9 @@ const SettingsApplication: FC = () => {
              <ValidatedTextField
                fieldErrors={fieldErrors}
                name="syslog_mark_interval"
-                label="Mark Interval"
+                label={LL.MARK_INTERVAL()}
                InputProps={{
-                  endAdornment: <InputAdornment position="end">seconds</InputAdornment>
+                  endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
                }}
                fullWidth
                variant="outlined"
@@ -584,9 +581,9 @@ const SettingsApplication: FC = () => {
          </Grid>
        )}
        {restartNeeded && (
-          <MessageBox my={2} level="warning" message="EMS-ESP needs to be restarted to apply changed system settings">
+          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT()}>
            <Button startIcon={<PowerSettingsNewIcon />} variant="contained" color="error" onClick={restart}>
-              Restart
+              {LL.RESTART()}
            </Button>
          </MessageBox>
        )}
@@ -600,7 +597,7 @@ const SettingsApplication: FC = () => {
              type="submit"
              onClick={validateAndSubmit}
            >
-              Save
+              {LL.SAVE()}
            </Button>
          </ButtonRow>
        )}
@@ -609,7 +606,7 @@ const SettingsApplication: FC = () => {
  };

  return (
-    <SectionContent title="Application Settings" titleGutter>
+    <SectionContent title={LL.APPLICATION_SETTINGS()} titleGutter>
      {content()}
    </SectionContent>
  );
--- a/interface/src/project/SettingsCustomization.tsx
+++ b/interface/src/project/SettingsCustomization.tsx
@@ -44,9 +44,13 @@ import { extractErrorMessage } from '../utils';

 import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types';

+import { useI18nContext } from '../i18n/i18n-react';
+
 export const APIURL = window.location.origin + '/api/';

 const SettingsCustomization: FC = () => {
+  const { LL } = useI18nContext();
+
  const { enqueueSnackbar } = useSnackbar();

  const [deviceEntities, setDeviceEntities] = useState<DeviceEntity[]>([{ id: '', v: 0, n: '', m: 0, w: false }]);
@@ -148,9 +152,9 @@ const SettingsCustomization: FC = () => {
    try {
      setDevices((await EMSESP.readDevices()).data);
    } catch (error: unknown) {
-      setErrorMessage(extractErrorMessage(error, 'Failed to fetch device list'));
+      setErrorMessage(extractErrorMessage(error, LL.PROBLEM_LOADING()));
    }
-  }, []);
+  }, [LL]);

  const setInitialMask = (data: DeviceEntity[]) => {
    setDeviceEntities(data.map((de) => ({ ...de, om: de.m })));
@@ -161,7 +165,7 @@ const SettingsCustomization: FC = () => {
      const data = (await EMSESP.readDeviceEntities({ id: unique_id })).data;
      setInitialMask(data);
    } catch (error: unknown) {
-      setErrorMessage(extractErrorMessage(error, 'Problem fetching device entities'));
+      setErrorMessage(extractErrorMessage(error, LL.PROBLEM_LOADING()));
    }
  };

@@ -184,7 +188,7 @@ const SettingsCustomization: FC = () => {
    if (de.n === undefined || de.n === de.id) {
      return de.id;
    } else if (de.n === '') {
-      return 'Command: ' + de.id;
+      return LL.COMMAND() + ': ' + de.id;
    }
    return (
      <>
@@ -250,9 +254,9 @@ const SettingsCustomization: FC = () => {
  const resetCustomization = async () => {
    try {
      await EMSESP.resetCustomizations();
-      enqueueSnackbar('All customizations have been removed. Restarting...', { variant: 'info' });
+      enqueueSnackbar(LL.CUSTOMIZATIONS_RESTART(), { variant: 'info' });
    } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem resetting customizations'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
    } finally {
      setConfirmReset(false);
    }
@@ -265,7 +269,7 @@ const SettingsCustomization: FC = () => {
        .map((new_de) => new_de.m.toString(16).padStart(2, '0') + new_de.id);

      if (masked_entities.length > 60) {
-        enqueueSnackbar('Selected entities exceeded limit of 60. Please Save in batches', { variant: 'warning' });
+        enqueueSnackbar(LL.CUSTOMIZATIONS_FULL(), { variant: 'warning' });
        return;
      }

@@ -275,12 +279,12 @@ const SettingsCustomization: FC = () => {
          entity_ids: masked_entities
        });
        if (response.status === 200) {
-          enqueueSnackbar('Customization saved', { variant: 'success' });
+          enqueueSnackbar(LL.CUSTOMIZATIONS_SAVED(), { variant: 'success' });
        } else {
-          enqueueSnackbar('Customization save failed', { variant: 'error' });
+          enqueueSnackbar(LL.PROBLEM_UPDATING(), { variant: 'error' });
        }
      } catch (error: unknown) {
-        enqueueSnackbar(extractErrorMessage(error, 'Problem sending entity list'), { variant: 'error' });
+        enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
      }
      setInitialMask(deviceEntities);
    }
@@ -294,21 +298,17 @@ const SettingsCustomization: FC = () => {
    return (
      <>
        <Box mb={2} color="warning.main">
-          <Typography variant="body2">Select a device and customize the entities using the options:</Typography>
+          <Typography variant="body2">{LL.CUSTOMIZATIONS_HELP_1()}:</Typography>
          <Typography variant="body2">
-            <OptionIcon type="favorite" isSet={true} />
-            =mark as favorite&nbsp;&nbsp;
-            <OptionIcon type="readonly" isSet={true} />
-            =disable write action&nbsp;&nbsp;
-            <OptionIcon type="api_mqtt_exclude" isSet={true} />
-            =exclude from MQTT and API&nbsp;&nbsp;
-            <OptionIcon type="web_exclude" isSet={true} />
-            =hide from Dashboard
+            <OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}&nbsp;&nbsp;
+            <OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}&nbsp;&nbsp;
+            <OptionIcon type="api_mqtt_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
+            <OptionIcon type="web_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_5()}
          </Typography>
        </Box>
        <ValidatedTextField
          name="device"
-          label="EMS Device"
+          label={'EMS ' + LL.DEVICE()}
          variant="outlined"
          fullWidth
          value={selectedDevice}
@@ -317,7 +317,7 @@ const SettingsCustomization: FC = () => {
          select
        >
          <MenuItem disabled key={0} value={-1}>
-            Select a device...
+            {LL.SELECT_DEVICE()}...
          </MenuItem>
          {devices.devices.map((device: DeviceShort, index) => (
            <MenuItem key={index} value={index}>
@@ -401,7 +401,7 @@ const SettingsCustomization: FC = () => {
                color="inherit"
                onClick={() => maskDisabled(false)}
              >
-                set all&nbsp;
+                {LL.SET_ALL()}&nbsp;
                <OptionIcon type="api_mqtt_exclude" isSet={false} />
                <OptionIcon type="web_exclude" isSet={false} />
              </Button>
@@ -416,7 +416,7 @@ const SettingsCustomization: FC = () => {
                color="inherit"
                onClick={() => maskDisabled(true)}
              >
-                set all&nbsp;
+                {LL.SET_ALL()}&nbsp;
                <OptionIcon type="api_mqtt_exclude" isSet={true} />
                <OptionIcon type="web_exclude" isSet={true} />
              </Button>
@@ -428,7 +428,7 @@ const SettingsCustomization: FC = () => {
            <>
              <Header>
                <HeaderRow>
-                  <HeaderCell stiff>OPTIONS</HeaderCell>
+                  <HeaderCell stiff>{LL.OPTIONS()}</HeaderCell>
                  <HeaderCell resize>
                    <Button
                      fullWidth
@@ -436,10 +436,10 @@ const SettingsCustomization: FC = () => {
                      endIcon={getSortIcon(entity_sort.state, 'NAME')}
                      onClick={() => entity_sort.fns.onToggleSort({ sortKey: 'NAME' })}
                    >
-                      NAME
+                      {LL.NAME()}
                    </Button>
                  </HeaderCell>
-                  <HeaderCell resize>VALUE</HeaderCell>
+                  <HeaderCell resize>{LL.VALUE()}</HeaderCell>
                </HeaderRow>
              </Header>
              <Body>
@@ -503,14 +503,11 @@ const SettingsCustomization: FC = () => {

  const renderResetDialog = () => (
    <Dialog open={confirmReset} onClose={() => setConfirmReset(false)}>
-      <DialogTitle>Reset</DialogTitle>
-      <DialogContent dividers>
-        Are you sure you want remove all customizations including the custom settings of the Temperature and Analog
-        sensors?
-      </DialogContent>
+      <DialogTitle>{LL.RESET()}</DialogTitle>
+      <DialogContent dividers>{LL.CUSTOMIZATIONS_RESET()}</DialogContent>
      <DialogActions>
        <Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setConfirmReset(false)} color="secondary">
-          Cancel
+          {LL.CANCEL()}
        </Button>
        <Button
          startIcon={<SettingsBackupRestoreIcon />}
@@ -519,7 +516,7 @@ const SettingsCustomization: FC = () => {
          autoFocus
          color="error"
        >
-          Reset
+          {LL.RESET()}
        </Button>
      </DialogActions>
    </Dialog>
@@ -529,7 +526,7 @@ const SettingsCustomization: FC = () => {
    return (
      <>
        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-          Device Entities
+          {LL.DEVICE_ENTITIES()}
        </Typography>
        {renderDeviceList()}
        {renderDeviceData()}
@@ -537,7 +534,7 @@ const SettingsCustomization: FC = () => {
          <Box flexGrow={1}>
            <ButtonRow>
              <Button startIcon={<SaveIcon />} variant="outlined" color="primary" onClick={() => saveCustomization()}>
-                Save
+                {LL.SAVE()}
              </Button>
            </ButtonRow>
          </Box>
@@ -548,7 +545,7 @@ const SettingsCustomization: FC = () => {
              color="error"
              onClick={() => setConfirmReset(true)}
            >
-              Reset
+              {LL.RESET()}
            </Button>
          </ButtonRow>
        </Box>
@@ -558,7 +555,7 @@ const SettingsCustomization: FC = () => {
  };

  return (
-    <SectionContent title="User Customization" titleGutter>
+    <SectionContent title={LL.USER_CUSTOMIZATION()} titleGutter>
      {content()}
    </SectionContent>
  );