andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 00:09:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

translate dashboard status

Browse Source
This commit is contained in:
Proddy
2022-08-25 15:50:23 +02:00
parent 1a4ce643fc
commit 1f8e6cc82b
10 changed files with 361 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
interface/src/project/DashboardStatus.tsx
View File

@@ -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>
);