translate dashboard status

2025-12-07 16:29:51 +03:00 · 2022-08-25 15:50:23 +02:00
parent 1a4ce643fc
commit 1f8e6cc82b
10 changed files with 361 additions and 74 deletions
--- a/interface/src/project/DashboardData.tsx
+++ b/interface/src/project/DashboardData.tsx
@@ -530,11 +530,11 @@ const DashboardData: FC = () => {
          offset: sensor.o
        });
        if (response.status === 204) {
-          enqueueSnackbar(LL.TEMP_SENSOR({ cmd: 'change failed' }), { variant: 'error' });
+          enqueueSnackbar(LL.TEMP_SENSOR({ post: ' change failed' }), { variant: 'error' });
        } else if (response.status === 403) {
          enqueueSnackbar(LL.ACCESS_DENIED(), { variant: 'error' });
        } else {
-          enqueueSnackbar(LL.TEMP_SENSOR({ cmd: 'removed' }), { variant: 'success' });
+          enqueueSnackbar(LL.TEMP_SENSOR({ post: ' removed' }), { variant: 'success' });
        }
        setSensor(undefined);
      } catch (error: unknown) {
@@ -955,11 +955,11 @@ const DashboardData: FC = () => {
        });

        if (response.status === 204) {
-          enqueueSnackbar(LL.ANALOG_SENSOR({ cmd: 'deletion failed' }), { variant: 'error' });
+          enqueueSnackbar(LL.ANALOG_SENSOR({ post: ' deletion failed' }), { variant: 'error' });
        } else if (response.status === 403) {
          enqueueSnackbar(LL.ACCESS_DENIED(), { variant: 'error' });
        } else {
-          enqueueSnackbar(LL.ANALOG_SENSOR({ cmd: 'removed' }), { variant: 'success' });
+          enqueueSnackbar(LL.ANALOG_SENSOR({ post: ' removed' }), { variant: 'success' });
        }
      } catch (error: unknown) {
        enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
@@ -983,11 +983,11 @@ const DashboardData: FC = () => {
        });

        if (response.status === 204) {
-          enqueueSnackbar(LL.ANALOG_SENSOR({ cmd: 'update failed' }), { variant: 'error' });
+          enqueueSnackbar(LL.ANALOG_SENSOR({ post: ' update failed' }), { variant: 'error' });
        } else if (response.status === 403) {
          enqueueSnackbar(LL.ACCESS_DENIED(), { variant: 'error' });
        } else {
-          enqueueSnackbar(LL.ANALOG_SENSOR({ cmd: 'updated' }), { variant: 'success' });
+          enqueueSnackbar(LL.ANALOG_SENSOR({ post: ' updated' }), { variant: 'success' });
        }
      } catch (error: unknown) {
        enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
--- a/interface/src/project/DashboardStatus.tsx
+++ b/interface/src/project/DashboardStatus.tsx
@@ -36,6 +36,9 @@ import { formatDurationSec, pluralize, extractErrorMessage, useRest } from '../u

 import * as EMSESP from './api';

+import type { Translation } from '../i18n/i18n-types';
+import { useI18nContext } from '../i18n/i18n-react';
+
 export const isConnected = ({ status }: Status) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;

 const busStatusHighlight = ({ status }: Status, theme: Theme) => {
@@ -51,19 +54,6 @@ const busStatusHighlight = ({ status }: Status, theme: Theme) => {
  }
 };

-const busStatus = ({ status }: Status) => {
-  switch (status) {
-    case busConnectionStatus.BUS_STATUS_CONNECTED:
-      return 'Connected';
-    case busConnectionStatus.BUS_STATUS_TX_ERRORS:
-      return 'Tx issues - try a different Tx Mode';
-    case busConnectionStatus.BUS_STATUS_OFFLINE:
-      return 'Disconnected';
-    default:
-      return 'Unknown';
-  }
-};
-
 const showQuality = (stat: Stat) => {
  if (stat.q === 0 || stat.s + stat.f === 0) {
    return;
@@ -81,12 +71,32 @@ const showQuality = (stat: Stat) => {
 const DashboardStatus: FC = () => {
  const { loadData, data, errorMessage } = useRest<Status>({ read: EMSESP.readStatus });

+  const { LL } = useI18nContext();
+
  const theme = useTheme();
  const [confirmScan, setConfirmScan] = useState<boolean>(false);
  const { enqueueSnackbar } = useSnackbar();

  const { me } = useContext(AuthenticatedContext);

+  const showName = (id: any) => {
+    let name: keyof Translation['STATUS_NAMES'] = id;
+    return LL.STATUS_NAMES[name]();
+  };
+
+  const busStatus = ({ status }: Status) => {
+    switch (status) {
+      case busConnectionStatus.BUS_STATUS_CONNECTED:
+        return LL.CONNECTED();
+      case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+        return LL.TX_ISSUES();
+      case busConnectionStatus.BUS_STATUS_OFFLINE:
+        return LL.DISCONNECTED();
+      default:
+        return 'Unknown';
+    }
+  };
+
  const stats_theme = tableTheme({
    Table: `
      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
@@ -137,9 +147,9 @@ const DashboardStatus: FC = () => {
  const scan = async () => {
    try {
      await EMSESP.scanDevices();
-      enqueueSnackbar('Scanning for devices...', { variant: 'info' });
+      enqueueSnackbar(LL.SCANNING(), { variant: 'info' });
    } catch (error: unknown) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem initiating scan'), { variant: 'error' });
+      enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
    } finally {
      setConfirmScan(false);
    }
@@ -147,14 +157,14 @@ const DashboardStatus: FC = () => {

  const renderScanDialog = () => (
    <Dialog open={confirmScan} onClose={() => setConfirmScan(false)}>
-      <DialogTitle>EMS Device Scan</DialogTitle>
-      <DialogContent dividers>Are you sure you want to initiate a full device scan of the EMS bus?</DialogContent>
+      <DialogTitle>{LL.SCAN_DEVICES()}</DialogTitle>
+      <DialogContent dividers>{LL.EMS_SCAN()}</DialogContent>
      <DialogActions>
        <Button startIcon={<CancelIcon />} variant="outlined" onClick={() => setConfirmScan(false)} color="secondary">
-          Cancel
+          {LL.CANCEL()}
        </Button>
        <Button startIcon={<PermScanWifiIcon />} variant="outlined" onClick={scan} color="primary" autoFocus>
-          Scan
+          {LL.SCAN()}
        </Button>
      </DialogActions>
    </Dialog>
@@ -174,7 +184,7 @@ const DashboardStatus: FC = () => {
                <DirectionsBusIcon />
              </Avatar>
            </ListItemAvatar>
-            <ListItemText primary="EMS Bus Status" secondary={busStatus(data) + formatDurationSec(data.uptime)} />
+            <ListItemText primary={LL.EMS_BUS_STATUS()} secondary={busStatus(data) + formatDurationSec(data.uptime)} />
          </ListItem>
          <ListItem>
            <ListItemAvatar>
@@ -183,13 +193,13 @@ const DashboardStatus: FC = () => {
              </Avatar>
            </ListItemAvatar>
            <ListItemText
-              primary="Active Devices &amp; Sensors"
+              primary={LL.ACTIVE_DEVICES()}
              secondary={
-                pluralize(data.num_devices, 'EMS Device') +
+                pluralize(data.num_devices, 'EMS ' + LL.DEVICE()) +
                ', ' +
-                pluralize(data.num_sensors, 'Temperature Sensor') +
+                pluralize(data.num_sensors, LL.TEMP_SENSOR({ post: '' })) +
                ', ' +
-                pluralize(data.num_analogs, 'Analog Sensor')
+                pluralize(data.num_analogs, LL.ANALOG_SENSOR({ post: '' }))
              }
            />
          </ListItem>
@@ -200,15 +210,15 @@ const DashboardStatus: FC = () => {
                <Header>
                  <HeaderRow>
                    <HeaderCell resize></HeaderCell>
-                    <HeaderCell stiff>SUCCESS</HeaderCell>
-                    <HeaderCell stiff>FAIL</HeaderCell>
-                    <HeaderCell stiff>QUALITY</HeaderCell>
+                    <HeaderCell stiff>{LL.SUCCESS()}</HeaderCell>
+                    <HeaderCell stiff>{LL.FAIL()}</HeaderCell>
+                    <HeaderCell stiff>{LL.QUALITY()}</HeaderCell>
                  </HeaderRow>
                </Header>
                <Body>
                  {tableList.map((stat: Stat) => (
                    <Row key={stat.id} item={stat}>
-                      <Cell>{stat.id}</Cell>
+                      <Cell>{showName(stat.id)}</Cell>
                      <Cell stiff>{Intl.NumberFormat().format(stat.s)}</Cell>
                      <Cell stiff>{Intl.NumberFormat().format(stat.f)}</Cell>
                      <Cell stiff>{showQuality(stat)}</Cell>
@@ -223,7 +233,7 @@ const DashboardStatus: FC = () => {
        <Box display="flex" flexWrap="wrap">
          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
            <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={loadData}>
-              Refresh
+              {LL.REFRESH()}
            </Button>
          </Box>
          <Box flexWrap="nowrap" whiteSpace="nowrap">
@@ -235,7 +245,7 @@ const DashboardStatus: FC = () => {
                disabled={!me.admin}
                onClick={() => setConfirmScan(true)}
              >
-                Scan for new devices
+                {LL.SCAN_DEVICES()}
              </Button>
            </ButtonRow>
          </Box>
@@ -245,7 +255,7 @@ const DashboardStatus: FC = () => {
  };

  return (
-    <SectionContent title="EMS Bus &amp; Activity Status" titleGutter>
+    <SectionContent title={LL.EMS_BUS_STATUS_TITLE()} titleGutter>
      {content()}
    </SectionContent>
  );
--- a/interface/src/project/types.ts
+++ b/interface/src/project/types.ts
@@ -42,7 +42,7 @@ export enum busConnectionStatus {
 }

 export interface Stat {
-  id: string; // name
+  id: string; // id - needs to be a string
  s: number; // success
  f: number; // fail
  q: number; // quality