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

added status and renamed components

Browse Source
This commit is contained in:
proddy
2024-03-20 23:57:19 +01:00
parent 863bc04c21
commit 24ea975575
53 changed files with 633 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
interface/src/framework/Settings.tsx
View File

@@ -5,37 +5,20 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
import ImportExportIcon from '@mui/icons-material/ImportExport';
import LockIcon from '@mui/icons-material/Lock';
import MemoryIcon from '@mui/icons-material/Memory';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
import TuneIcon from '@mui/icons-material/Tune';
import {
List,
ListItem,
ListItemAvatar,
ListItemText,
Avatar,
ListItemButton,
ListItemIcon,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Box,
Divider
} from '@mui/material';
import { List, Button, Dialog, DialogActions, DialogContent, DialogTitle, Box } from '@mui/material';
import { useRequest } from 'alova';
import { useState, type FC } from 'react';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
import RestartMonitor from './system/RestartMonitor';
import { dialogStyle } from 'CustomTheme';
import * as SystemApi from 'api/system';
import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
import ListMenuItem from 'components/layout/ListMenuItem';
import { useI18nContext } from 'i18n/i18n-react';
const Settings: FC = () => {
@@ -134,7 +117,7 @@ const Settings: FC = () => {
disabled={processing}
color="primary"
>
EMS-ESP-Loader
EMS-ESP Loader
</Button>
</DialogActions>
</Dialog>
@@ -170,169 +153,62 @@ const Settings: FC = () => {
const content = () => (
<>
<List sx={{ borderRadius: 3, border: '2px solid grey' }}>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="ems-esp">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#134ba2', color: 'white' }}>
<TuneIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.APPLICATION_SETTINGS()} secondary="Modify EMS-ESP Application Settings" />
</ListItemButton>
</ListItem>
{/* TODO: translate */}
<ListMenuItem
icon={TuneIcon}
bgcolor="#134ba2"
label={LL.APPLICATION_SETTINGS()}
text="Modify EMS-ESP Application Settings"
to="ems-esp"
/>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="network">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#40828f', color: 'white' }}>
<SettingsEthernetIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.NETWORK(0)} secondary="Configure Network settings" />
</ListItemButton>
</ListItem>
<ListMenuItem
icon={SettingsEthernetIcon}
bgcolor="#40828f"
label={LL.NETWORK(0)}
text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(0)))}
to="network"
/>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="ap">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
<SettingsInputAntennaIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.ACCESS_POINT(0)} secondary="Configure Access Point" />
</ListItemButton>
</ListItem>
<ListMenuItem
icon={AccessTimeIcon}
bgcolor="#5f9a5f"
label={LL.ACCESS_POINT(0)}
text={LL.CONFIGURE(LL.ACCESS_POINT(0))}
to="ap"
/>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="ntp">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
<AccessTimeIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="NTP" secondary="Configure Network Time" />
</ListItemButton>
</ListItem>
<ListMenuItem
icon={AccessTimeIcon}
bgcolor="#c5572c"
label="NTP"
text={LL.CONFIGURE(LL.LOCAL_TIME())}
to="ntp"
/>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="mqtt">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#68374d', color: 'white' }}>
<DeviceHubIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="MQTT" secondary="Configure MQTT" />
</ListItemButton>
</ListItem>
<ListMenuItem icon={DeviceHubIcon} bgcolor="#68374d" label="MQTT" text={LL.CONFIGURE('MQTT')} to="mqtt" />
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="ota">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#efc34b', color: 'white' }}>
<CastIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="OTA" secondary="Configure OTA" />
</ListItemButton>
</ListItem>
<ListMenuItem icon={CastIcon} bgcolor="#efc34b" label="OTA" text={LL.CONFIGURE('OTA')} to="ota" />
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="security">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#b1395f', color: 'white' }}>
<LockIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.SECURITY(0)} secondary="Add/Remove Users" />
</ListItemButton>
</ListItem>
{/* TODO: translate */}
<ListMenuItem icon={LockIcon} label={LL.SECURITY(0)} text="Add/Remove Users" to="security" />
<Divider />
<ListMenuItem
icon={MemoryIcon}
bgcolor="#b1395f"
label={LL.STATUS_OF('ESP32')}
text="ESP32 Information"
to="espsystemstatus"
/>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="espsystemstatus">
<ListItemAvatar>
<Avatar sx={{ color: 'white' }}>
<MemoryIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.STATUS_OF('ESP32')} secondary="ESP32 Information" />
</ListItemButton>
</ListItem>
<ListItem
disablePadding
secondaryAction={
<ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
<NavigateNextIcon />
</ListItemIcon>
}
>
<ListItemButton component={Link} to="upload">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#5d89f7', color: 'white' }}>
<ImportExportIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.UPLOAD_DOWNLOAD()} secondary="Upload/Download Settings and Firmware" />
</ListItemButton>
</ListItem>
{/* TODO: translate */}
<ListMenuItem
icon={ImportExportIcon}
bgcolor="#5d89f7"
label={LL.UPLOAD_DOWNLOAD()}
text="Upload/Download Settings and Firmware"
to="upload"
/>
</List>
{renderRestartDialog()}

10
interface/src/framework/ap/APSettingsForm.tsx → interface/src/framework/ap/APSettings.tsx
View File

@@ -6,7 +6,7 @@ import { useState } from 'react';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { APSettings } from 'types';
import type { APSettingsType } from 'types';
import * as APApi from 'api/ap';
import {
BlockFormControlLabel,
@@ -24,10 +24,10 @@ import { numberValue, updateValueDirty, useRest } from 'utils';
import { createAPSettingsValidator, validate } from 'validators';
export const isAPEnabled = ({ provision_mode }: APSettings) =>
export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
const APSettingsForm: FC = () => {
const APSettings: FC = () => {
const {
loadData,
saving,
@@ -39,7 +39,7 @@ const APSettingsForm: FC = () => {
blocker,
saveData,
errorMessage
} = useRest<APSettings>({
} = useRest<APSettingsType>({
read: APApi.readAPSettings,
update: APApi.updateAPSettings
});
@@ -212,4 +212,4 @@ const APSettingsForm: FC = () => {
);
};
export default APSettingsForm;
export default APSettings;

10
interface/src/framework/ap/APStatusForm.tsx → interface/src/framework/ap/APStatus.tsx
View File

@@ -7,14 +7,14 @@ import { useRequest } from 'alova';
import type { Theme } from '@mui/material';
import type { FC } from 'react';
import type { APStatus } from 'types';
import type { APStatusType } from 'types';
import * as APApi from 'api/ap';
import { ButtonRow, FormLoader, SectionContent } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import { APNetworkStatus } from 'types';
export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
switch (status) {
case APNetworkStatus.ACTIVE:
return theme.palette.success.main;
@@ -27,14 +27,14 @@ export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
}
};
const APStatusForm: FC = () => {
const APStatus: FC = () => {
const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);
const { LL } = useI18nContext();
const theme = useTheme();
const apStatus = ({ status }: APStatus) => {
const apStatus = ({ status }: APStatusType) => {
switch (status) {
case APNetworkStatus.ACTIVE:
return LL.ACTIVE();
@@ -102,4 +102,4 @@ const APStatusForm: FC = () => {
return <SectionContent>{content()}</SectionContent>;
};
export default APStatusForm;
export default APStatus;

8
interface/src/framework/ap/AccessPoint.tsx
View File

@@ -1,8 +1,8 @@
import { Tab } from '@mui/material';
import { Navigate, Routes, Route } from 'react-router-dom';
import APSettingsForm from './APSettingsForm';
import APStatusForm from './APStatusForm';
import APSettings from './APSettings';
import APStatus from './APStatus';
import type { FC } from 'react';
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
@@ -22,12 +22,12 @@ const AccessPoint: FC = () => {
<Tab value="status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
</RouterTabs>
<Routes>
<Route path="status" element={<APStatusForm />} />
<Route path="status" element={<APStatus />} />
<Route
path="settings"
element={
<RequireAdmin>
<APSettingsForm />
<APSettings />
</RequireAdmin>
}
/>

8
interface/src/framework/mqtt/Mqtt.tsx
View File

@@ -1,7 +1,7 @@
import { Tab } from '@mui/material';
import { Navigate, Route, Routes } from 'react-router-dom';
import MqttSettingsForm from './MqttSettingsForm';
import MqttStatusForm from './MqttStatusForm';
import MqttSettings from './MqttSettings';
import MqttStatus from './MqttStatus';
import type { FC } from 'react';
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
@@ -22,12 +22,12 @@ const Mqtt: FC = () => {
<Tab value="status" label={LL.STATUS_OF('MQTT')} />
</RouterTabs>
<Routes>
<Route path="status" element={<MqttStatusForm />} />
<Route path="status" element={<MqttStatus />} />
<Route
path="settings"
element={
<RequireAdmin>
<MqttSettingsForm />
<MqttSettings />
</RequireAdmin>
}
/>

8
interface/src/framework/mqtt/MqttSettingsForm.tsx → interface/src/framework/mqtt/MqttSettings.tsx
View File

@@ -5,7 +5,7 @@ import { useState } from 'react';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { MqttSettings } from 'types';
import type { MqttSettingsType } from 'types';
import * as MqttApi from 'api/mqtt';
import {
BlockFormControlLabel,
@@ -21,7 +21,7 @@ import { numberValue, updateValueDirty, useRest } from 'utils';
import { createMqttSettingsValidator, validate } from 'validators';
const MqttSettingsForm: FC = () => {
const MqttSettings: FC = () => {
const {
loadData,
saving,
@@ -33,7 +33,7 @@ const MqttSettingsForm: FC = () => {
blocker,
saveData,
errorMessage
} = useRest<MqttSettings>({
} = useRest<MqttSettingsType>({
read: MqttApi.readMqttSettings,
update: MqttApi.updateMqttSettings
});
@@ -456,4 +456,4 @@ const MqttSettingsForm: FC = () => {
);
};
export default MqttSettingsForm;
export default MqttSettings;

16
interface/src/framework/mqtt/MqttStatusForm.tsx → interface/src/framework/mqtt/MqttStatus.tsx
View File

@@ -8,13 +8,13 @@ import { useRequest } from 'alova';
import type { Theme } from '@mui/material';
import type { FC } from 'react';
import type { MqttStatus } from 'types';
import type { MqttStatusType } from 'types';
import * as MqttApi from 'api/mqtt';
import { ButtonRow, FormLoader, SectionContent } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import { MqttDisconnectReason } from 'types';
export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
export const mqttStatusHighlight = ({ enabled, connected }: MqttStatusType, theme: Theme) => {
if (!enabled) {
return theme.palette.info.main;
}
@@ -24,27 +24,27 @@ export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: T
return theme.palette.error.main;
};
export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatusType, theme: Theme) => {
if (mqtt_fails === 0) return theme.palette.success.main;
if (mqtt_fails < 10) return theme.palette.warning.main;
return theme.palette.error.main;
};
export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatus, theme: Theme) => {
export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatusType, theme: Theme) => {
if (mqtt_queued <= 1) return theme.palette.success.main;
return theme.palette.warning.main;
};
const MqttStatusForm: FC = () => {
const MqttStatus: FC = () => {
const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
const { LL } = useI18nContext();
const theme = useTheme();
const mqttStatus = ({ enabled, connected, connect_count }: MqttStatus) => {
const mqttStatus = ({ enabled, connected, connect_count }: MqttStatusType) => {
if (!enabled) {
return LL.NOT_ENABLED();
}
@@ -54,7 +54,7 @@ const MqttStatusForm: FC = () => {
return LL.DISCONNECTED() + (connect_count > 1 ? ' (' + connect_count + ')' : '');
};
const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
const disconnectReason = ({ disconnect_reason }: MqttStatusType) => {
switch (disconnect_reason) {
case MqttDisconnectReason.TCP_DISCONNECTED:
return 'TCP disconnected';
@@ -149,4 +149,4 @@ const MqttStatusForm: FC = () => {
return <SectionContent>{content()}</SectionContent>;
};
export default MqttStatusForm;
export default MqttStatus;

14
interface/src/framework/network/NetworkConnection.tsx → interface/src/framework/network/Network.tsx
View File

@@ -1,8 +1,8 @@
import { Tab } from '@mui/material';
import { useCallback, useState } from 'react';
import { Navigate, Routes, Route, useNavigate } from 'react-router-dom';
import NetworkSettingsForm from './NetworkSettingsForm';
import NetworkStatusForm from './NetworkStatusForm';
import NetworkSettings from './NetworkSettings';
import NetworkStatus from './NetworkStatus';
import { WiFiConnectionContext } from './WiFiConnectionContext';
import WiFiNetworkScanner from './WiFiNetworkScanner';
import type { FC } from 'react';
@@ -11,7 +11,7 @@ import type { WiFiNetwork } from 'types';
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
const NetworkConnection: FC = () => {
const Network: FC = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.NETWORK(0));
@@ -43,11 +43,11 @@ const NetworkConnection: FC = () => {
>
<RouterTabs value={routerTab}>
<Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} />
<Tab value="scan" label={LL.NETWORK_SCAN()} />
<Tab value="status" label={LL.STATUS_OF(LL.NETWORK(1))} />
<Tab value="scan" label={LL.NETWORK_SCAN()} />
</RouterTabs>
<Routes>
<Route path="status" element={<NetworkStatusForm />} />
<Route path="status" element={<NetworkStatus />} />
<Route
path="scan"
element={
@@ -60,7 +60,7 @@ const NetworkConnection: FC = () => {
path="settings"
element={
<RequireAdmin>
<NetworkSettingsForm />
<NetworkSettings />
</RequireAdmin>
}
/>
@@ -70,4 +70,4 @@ const NetworkConnection: FC = () => {
);
};
export default NetworkConnection;
export default Network;

10
interface/src/framework/network/NetworkSettingsForm.tsx → interface/src/framework/network/NetworkSettings.tsx
View File

@@ -28,7 +28,7 @@ import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { NetworkSettings } from 'types';
import type { NetworkSettingsType } from 'types';
import * as NetworkApi from 'api/network';
import * as SystemApi from 'api/system';
import {
@@ -48,7 +48,7 @@ import { updateValueDirty, useRest } from 'utils';
import { validate } from 'validators';
import { createNetworkSettingsValidator } from 'validators/network';
const WiFiSettingsForm: FC = () => {
const NetworkSettings: FC = () => {
const { LL } = useI18nContext();
const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
@@ -68,7 +68,7 @@ const WiFiSettingsForm: FC = () => {
saveData,
errorMessage,
restartNeeded
} = useRest<NetworkSettings>({
} = useRest<NetworkSettingsType>({
read: NetworkApi.readNetworkSettings,
update: NetworkApi.updateNetworkSettings
});
@@ -135,7 +135,7 @@ const WiFiSettingsForm: FC = () => {
return (
<>
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
<Typography variant="h6" color="primary">
WiFi
</Typography>
{selectedNetwork ? (
@@ -367,4 +367,4 @@ const WiFiSettingsForm: FC = () => {
);
};
export default WiFiSettingsForm;
export default NetworkSettings;

23
interface/src/framework/network/NetworkStatusForm.tsx → interface/src/framework/network/NetworkStatus.tsx
View File

@@ -11,18 +11,18 @@ import { useRequest } from 'alova';
import type { Theme } from '@mui/material';
import type { FC } from 'react';
import type { NetworkStatus } from 'types';
import type { NetworkStatusType } from 'types';
import * as NetworkApi from 'api/network';
import { ButtonRow, FormLoader, SectionContent } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import { NetworkConnectionStatus } from 'types';
const isConnected = ({ status }: NetworkStatus) =>
const isConnected = ({ status }: NetworkStatusType) =>
status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => {
const networkStatusHighlight = ({ status }: NetworkStatusType, theme: Theme) => {
switch (status) {
case NetworkConnectionStatus.WIFI_STATUS_IDLE:
case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
@@ -39,7 +39,7 @@ const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => {
}
};
const networkQualityHighlight = ({ rssi }: NetworkStatus, theme: Theme) => {
const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
if (rssi <= -85) {
return theme.palette.error.main;
} else if (rssi <= -75) {
@@ -48,17 +48,18 @@ const networkQualityHighlight = ({ rssi }: NetworkStatus, theme: Theme) => {
return theme.palette.success.main;
};
export const isWiFi = ({ status }: NetworkStatus) => status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
export const isEthernet = ({ status }: NetworkStatus) => status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
export const isWiFi = ({ status }: NetworkStatusType) => status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
export const isEthernet = ({ status }: NetworkStatusType) =>
status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatus) => {
const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
if (!dns_ip_1) {
return 'none';
}
return dns_ip_1 + (!dns_ip_2 || dns_ip_2 === '0.0.0.0' ? '' : ',' + dns_ip_2);
};
const IPs = (status: NetworkStatus) => {
const IPs = (status: NetworkStatusType) => {
if (!status.local_ipv6 || status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000') {
return status.local_ip;
}
@@ -68,14 +69,14 @@ const IPs = (status: NetworkStatus) => {
return status.local_ip + ', ' + status.local_ipv6;
};
const NetworkStatusForm: FC = () => {
const NetworkStatus: FC = () => {
const { data: data, send: loadData, error } = useRequest(NetworkApi.readNetworkStatus);
const { LL } = useI18nContext();
const theme = useTheme();
const networkStatus = ({ status }: NetworkStatus) => {
const networkStatus = ({ status }: NetworkStatusType) => {
switch (status) {
case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
return LL.INACTIVE(1);
@@ -196,4 +197,4 @@ const NetworkStatusForm: FC = () => {
return <SectionContent>{content()}</SectionContent>;
};
export default NetworkStatusForm;
export default NetworkStatus;

8
interface/src/framework/ntp/NTPSettingsForm.tsx → interface/src/framework/ntp/NTPSettings.tsx
View File

@@ -8,7 +8,7 @@ import { selectedTimeZone, timeZoneSelectItems, TIME_ZONES } from './TZ';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { NTPSettings } from 'types';
import type { NTPSettingsType } from 'types';
import * as NTPApi from 'api/ntp';
import {
BlockFormControlLabel,
@@ -23,7 +23,7 @@ import { updateValueDirty, useRest } from 'utils';
import { validate } from 'validators';
import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
const NTPSettingsForm: FC = () => {
const NTPSettings: FC = () => {
const {
loadData,
saving,
@@ -35,7 +35,7 @@ const NTPSettingsForm: FC = () => {
blocker,
saveData,
errorMessage
} = useRest<NTPSettings>({
} = useRest<NTPSettingsType>({
read: NTPApi.readNTPSettings,
update: NTPApi.updateNTPSettings
});
@@ -137,4 +137,4 @@ const NTPSettingsForm: FC = () => {
);
};
export default NTPSettingsForm;
export default NTPSettings;

40
interface/src/framework/ntp/NTPStatusForm.tsx → interface/src/framework/ntp/NTPStatus.tsx
View File

@@ -27,7 +27,7 @@ import { toast } from 'react-toastify';
import type { Theme } from '@mui/material';
import type { FC } from 'react';
import type { NTPStatus } from 'types';
import type { NTPStatusType } from 'types';
import { dialogStyle } from 'CustomTheme';
import * as NTPApi from 'api/ntp';
import { ButtonRow, FormLoader, SectionContent } from 'components';
@@ -36,23 +36,7 @@ import { useI18nContext } from 'i18n/i18n-react';
import { NTPSyncStatus } from 'types';
import { formatDateTime, formatLocalDateTime } from 'utils';
export const isNtpActive = ({ status }: NTPStatus) => status === NTPSyncStatus.NTP_ACTIVE;
export const isNtpEnabled = ({ status }: NTPStatus) => status !== NTPSyncStatus.NTP_DISABLED;
export const ntpStatusHighlight = ({ status }: NTPStatus, theme: Theme) => {
switch (status) {
case NTPSyncStatus.NTP_DISABLED:
return theme.palette.info.main;
case NTPSyncStatus.NTP_INACTIVE:
return theme.palette.error.main;
case NTPSyncStatus.NTP_ACTIVE:
return theme.palette.success.main;
default:
return theme.palette.error.main;
}
};
const NTPStatusForm: FC = () => {
const NTPStatus: FC = () => {
const { data: data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
const [localTime, setLocalTime] = useState<string>('');
@@ -67,6 +51,22 @@ const NTPStatusForm: FC = () => {
NTPApi.updateTime;
const isNtpActive = ({ status }: NTPStatusType) => status === NTPSyncStatus.NTP_ACTIVE;
const isNtpEnabled = ({ status }: NTPStatusType) => status !== NTPSyncStatus.NTP_DISABLED;
const ntpStatusHighlight = ({ status }: NTPStatusType, theme: Theme) => {
switch (status) {
case NTPSyncStatus.NTP_DISABLED:
return theme.palette.info.main;
case NTPSyncStatus.NTP_INACTIVE:
return theme.palette.error.main;
case NTPSyncStatus.NTP_ACTIVE:
return theme.palette.success.main;
default:
return theme.palette.error.main;
}
};
const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value);
const openSetTime = () => {
@@ -76,7 +76,7 @@ const NTPStatusForm: FC = () => {
const theme = useTheme();
const ntpStatus = ({ status }: NTPStatus) => {
const ntpStatus = ({ status }: NTPStatusType) => {
switch (status) {
case NTPSyncStatus.NTP_DISABLED:
return LL.NOT_ENABLED();
@@ -217,4 +217,4 @@ const NTPStatusForm: FC = () => {
return <SectionContent>{content()}</SectionContent>;
};
export default NTPStatusForm;
export default NTPStatus;

8
interface/src/framework/ntp/NetworkTime.tsx
View File

@@ -1,7 +1,7 @@
import { Tab } from '@mui/material';
import { Navigate, Route, Routes } from 'react-router-dom';
import NTPSettingsForm from './NTPSettingsForm';
import NTPStatusForm from './NTPStatusForm';
import NTPSettings from './NTPSettings';
import NTPStatus from './NTPStatus';
import type { FC } from 'react';
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
@@ -21,12 +21,12 @@ const NetworkTime: FC = () => {
<Tab value="status" label={LL.STATUS_OF('NTP')} />
</RouterTabs>
<Routes>
<Route path="status" element={<NTPStatusForm />} />
<Route path="status" element={<NTPStatus />} />
<Route
path="settings"
element={
<RequireAdmin>
<NTPSettingsForm />
<NTPSettings />
</RequireAdmin>
}
/>

8
interface/src/framework/ota/OTASettingsForm.tsx → interface/src/framework/ota/OTASettings.tsx
View File

@@ -5,7 +5,7 @@ import { useState } from 'react';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { OTASettings } from 'types';
import type { OTASettingsType } from 'types';
import * as SystemApi from 'api/system';
import {
BlockFormControlLabel,
@@ -24,7 +24,7 @@ import { numberValue, updateValueDirty, useRest } from 'utils';
import { validate } from 'validators';
import { OTA_SETTINGS_VALIDATOR } from 'validators/system';
const OTASettingsForm: FC = () => {
const OTASettings: FC = () => {
const {
loadData,
saveData,
@@ -36,7 +36,7 @@ const OTASettingsForm: FC = () => {
setDirtyFlags,
blocker,
errorMessage
} = useRest<OTASettings>({
} = useRest<OTASettingsType>({
read: SystemApi.readOTASettings,
update: SystemApi.updateOTASettings
});
@@ -127,4 +127,4 @@ const OTASettingsForm: FC = () => {
);
};
export default OTASettingsForm;
export default OTASettings;

18
interface/src/framework/security/ManageUsersForm.tsx → interface/src/framework/security/ManageUsers.tsx
View File

@@ -14,9 +14,9 @@ import { useContext, useState } from 'react';
import { useBlocker } from 'react-router-dom';
import GenerateToken from './GenerateToken';
import UserForm from './UserForm';
import User from './User';
import type { FC } from 'react';
import type { SecuritySettings, User } from 'types';
import type { SecuritySettingsType, UserType } from 'types';
import * as SecurityApi from 'api/security';
import { ButtonRow, FormLoader, MessageBox, SectionContent, BlockNavigation } from 'components';
import { AuthenticatedContext } from 'contexts/authentication';
@@ -24,13 +24,13 @@ import { useI18nContext } from 'i18n/i18n-react';
import { useRest } from 'utils';
import { createUserValidator } from 'validators';
const ManageUsersForm: FC = () => {
const { loadData, saveData, saving, data, updateDataValue, errorMessage } = useRest<SecuritySettings>({
const ManageUsers: FC = () => {
const { loadData, saveData, saving, data, updateDataValue, errorMessage } = useRest<SecuritySettingsType>({
read: SecurityApi.readSecuritySettings,
update: SecurityApi.updateSecuritySettings
});
const [user, setUser] = useState<User>();
const [user, setUser] = useState<UserType>();
const [creating, setCreating] = useState<boolean>(false);
const [changed, setChanged] = useState<number>(0);
const [generatingToken, setGeneratingToken] = useState<string>();
@@ -86,7 +86,7 @@ const ManageUsersForm: FC = () => {
const noAdminConfigured = () => !data.users.find((u) => u.admin);
const removeUser = (toRemove: User) => {
const removeUser = (toRemove: UserType) => {
const users = data.users.filter((u) => u.username !== toRemove.username);
updateDataValue({ ...data, users });
setChanged(changed + 1);
@@ -101,7 +101,7 @@ const ManageUsersForm: FC = () => {
});
};
const editUser = (toEdit: User) => {
const editUser = (toEdit: UserType) => {
setCreating(false);
setUser({ ...toEdit });
};
@@ -219,7 +219,7 @@ const ManageUsersForm: FC = () => {
</Box>
<GenerateToken username={generatingToken} onClose={closeGenerateToken} />
<UserForm
<User
user={user}
setUser={setUser}
creating={creating}
@@ -239,4 +239,4 @@ const ManageUsersForm: FC = () => {
);
};
export default ManageUsersForm;
export default ManageUsers;

8
interface/src/framework/security/Security.tsx
View File

@@ -1,7 +1,7 @@
import { Tab } from '@mui/material';
import { Navigate, Routes, Route } from 'react-router-dom';
import ManageUsersForm from './ManageUsersForm';
import SecuritySettingsForm from './SecuritySettingsForm';
import ManageUsers from './ManageUsers';
import SecuritySettings from './SecuritySettings';
import type { FC } from 'react';
import { RouterTabs, useRouterTab, useLayoutTitle } from 'components';
@@ -21,8 +21,8 @@ const Security: FC = () => {
<Tab value="users" label={LL.MANAGE_USERS()} />
</RouterTabs>
<Routes>
<Route path="users" element={<ManageUsersForm />} />
<Route path="settings" element={<SecuritySettingsForm />} />
<Route path="users" element={<ManageUsers />} />
<Route path="settings" element={<SecuritySettings />} />
<Route path="*" element={<Navigate replace to="settings" />} />
</Routes>
</>

8
interface/src/framework/security/SecuritySettingsForm.tsx → interface/src/framework/security/SecuritySettings.tsx
View File

@@ -5,7 +5,7 @@ import { useContext, useState } from 'react';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { SecuritySettings } from 'types';
import type { SecuritySettingsType } from 'types';
import * as SecurityApi from 'api/security';
import { ButtonRow, FormLoader, MessageBox, SectionContent, ValidatedPasswordField, BlockNavigation } from 'components';
@@ -14,7 +14,7 @@ import { useI18nContext } from 'i18n/i18n-react';
import { updateValueDirty, useRest } from 'utils';
import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';
const SecuritySettingsForm: FC = () => {
const SecuritySettings: FC = () => {
const { LL } = useI18nContext();
const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -29,7 +29,7 @@ const SecuritySettingsForm: FC = () => {
blocker,
saveData,
errorMessage
} = useRest<SecuritySettings>({
} = useRest<SecuritySettingsType>({
read: SecurityApi.readSecuritySettings,
update: SecurityApi.updateSecuritySettings
});
@@ -103,4 +103,4 @@ const SecuritySettingsForm: FC = () => {
);
};
export default SecuritySettingsForm;
export default SecuritySettings;

10
interface/src/framework/security/UserForm.tsx → interface/src/framework/security/User.tsx
View File

@@ -8,7 +8,7 @@ import type Schema from 'async-validator';
import type { ValidateFieldsError } from 'async-validator';
import type { FC } from 'react';
import type { User } from 'types';
import type { UserType } from 'types';
import { dialogStyle } from 'CustomTheme';
import { BlockFormControlLabel, ValidatedPasswordField, ValidatedTextField } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
@@ -19,14 +19,14 @@ interface UserFormProps {
creating: boolean;
validator: Schema;
user?: User;
setUser: React.Dispatch<React.SetStateAction<User | undefined>>;
user?: UserType;
setUser: React.Dispatch<React.SetStateAction<UserType | undefined>>;
onDoneEditing: () => void;
onCancelEditing: () => void;
}
const UserForm: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEditing, onCancelEditing }) => {
const User: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEditing, onCancelEditing }) => {
const { LL } = useI18nContext();
const updateFormValue = updateValue(setUser);
@@ -104,4 +104,4 @@ const UserForm: FC<UserFormProps> = ({ creating, validator, user, setUser, onDon
);
};
export default UserForm;
export default User;

1
interface/src/framework/system/ESPSystemStatus.tsx
View File

@@ -133,6 +133,7 @@ const ESPSystemStatus: FC = () => {
secondary={formatNumber(data.fs_used) + ' KB / ' + formatNumber(data.fs_free) + ' KB'}
/>
</ListItem>
<Divider variant="inset" component="li" />
</List>
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>

12
interface/src/framework/system/Status.tsx → interface/src/framework/system/System.tsx
View File

@@ -7,25 +7,25 @@ import type { FC } from 'react';
import { useRouterTab, RouterTabs, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import Activity from 'project/Activity';
import SystemActivity from 'project/SystemActivity';
const Status: FC = () => {
const System: FC = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF(''));
useLayoutTitle(LL.SYSTEM(0));
const { routerTab } = useRouterTab();
return (
<>
<RouterTabs value={routerTab}>
<Tab value="status" label={LL.SYSTEM(1)} />
<Tab value="status" label={LL.STATUS_OF('')} />
<Tab value="activity" label={LL.ACTIVITY()} />
<Tab value="log" label={LL.LOG_OF('')} />
</RouterTabs>
<Routes>
<Route path="status" element={<SystemStatus />} />
<Route path="activity" element={<Activity />} />
<Route path="activity" element={<SystemActivity />} />
<Route path="log" element={<SystemLog />} />
<Route path="*" element={<Navigate replace to="status" />} />
</Routes>
@@ -33,4 +33,4 @@ const Status: FC = () => {
);
};
export default Status;
export default System;

4
interface/src/framework/system/SystemLog.tsx
View File

@@ -11,7 +11,7 @@ import { addAccessTokenParameter } from 'api/authentication';
import { EVENT_SOURCE_ROOT } from 'api/endpoints';
import * as SystemApi from 'api/system';
import { SectionContent, FormLoader, BlockFormControlLabel, BlockNavigation } from 'components';
import { SectionContent, FormLoader, BlockFormControlLabel, BlockNavigation, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import { LogLevel } from 'types';
@@ -50,6 +50,8 @@ const levelLabel = (level: LogLevel) => {
const SystemLog: FC = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.LOG_OF(''));
const { loadData, data, updateDataValue, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
useRest<LogSettings>({
read: SystemApi.readLogSettings,

122
interface/src/framework/system/SystemStatus.tsx
View File

@@ -1,7 +1,9 @@
import BuildIcon from '@mui/icons-material/Build';
import CancelIcon from '@mui/icons-material/Cancel';
import CastIcon from '@mui/icons-material/Cast';
import DeviceHubIcon from '@mui/icons-material/DeviceHub';
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
import MemoryIcon from '@mui/icons-material/Memory';
import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
import RefreshIcon from '@mui/icons-material/Refresh';
import TimerIcon from '@mui/icons-material/Timer';
@@ -29,10 +31,12 @@ import { toast } from 'react-toastify';
import { dialogStyle } from 'CustomTheme';
import * as SystemApi from 'api/system';
import { FormLoader, SectionContent, useLayoutTitle } from 'components';
import ListMenuItem from 'components/layout/ListMenuItem';
import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react';
import * as EMSESP from 'project/api';
import { busConnectionStatus } from 'project/types';
import { NTPSyncStatus } from 'types';
const SystemStatus: FC = () => {
const { LL } = useI18nContext();
@@ -71,6 +75,10 @@ const SystemStatus: FC = () => {
return formatted;
};
function formatNumber(num: number) {
return new Intl.NumberFormat().format(num);
}
const busStatus = () => {
if (data) {
switch (data.status) {
@@ -85,8 +93,6 @@ const SystemStatus: FC = () => {
return 'Unknown';
};
// export const isConnected = ({ status }: Status) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
const busStatusHighlight = () => {
switch (data.status) {
case busConnectionStatus.BUS_STATUS_TX_ERRORS:
@@ -100,6 +106,34 @@ const SystemStatus: FC = () => {
}
};
const ntpStatus = () => {
switch (data.ntp_status) {
case NTPSyncStatus.NTP_DISABLED:
return LL.NOT_ENABLED();
case NTPSyncStatus.NTP_INACTIVE:
return LL.INACTIVE(0);
case NTPSyncStatus.NTP_ACTIVE:
return LL.ACTIVE();
default:
return LL.UNKNOWN();
}
};
const ntpStatusHighlight = () => {
switch (data.ntp_status) {
case NTPSyncStatus.NTP_DISABLED:
return theme.palette.info.main;
case NTPSyncStatus.NTP_INACTIVE:
return theme.palette.error.main;
case NTPSyncStatus.NTP_ACTIVE:
return theme.palette.success.main;
default:
return theme.palette.error.main;
}
};
const activeHighlight = (value: boolean) => (value ? theme.palette.success.main : theme.palette.info.main);
const scan = async () => {
await scanDevices()
.then(() => {
@@ -136,27 +170,7 @@ const SystemStatus: FC = () => {
<List>
<ListItem>
<ListItemAvatar>
<Avatar>
<BuildIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.EMS_ESP_VER()} secondary={data.emsesp_version} />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
<TimerIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.UPTIME()} secondary={formatDurationSec(data.uptime)} />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar sx={{ bgcolor: busStatusHighlight() }}>
<Avatar sx={{ bgcolor: busStatusHighlight(), color: 'white' }}>
<DirectionsBusIcon />
</Avatar>
</ListItemAvatar>
@@ -166,7 +180,7 @@ const SystemStatus: FC = () => {
<ListItem>
<ListItemAvatar>
<Avatar sx={{ bgcolor: theme.palette.success.main }}>
<Avatar sx={{ bgcolor: '#5d89f7', color: 'white' }}>
<DeviceHubIcon />
</Avatar>
</ListItemAvatar>
@@ -191,7 +205,67 @@ const SystemStatus: FC = () => {
</Button>
)}
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
<TimerIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.UPTIME()} secondary={formatDurationSec(data.uptime)} />
</ListItem>
<Divider variant="inset" component="li" />
<ListMenuItem
disabled={!me.admin}
icon={BuildIcon}
bgcolor="#134ba2"
label={LL.EMS_ESP_VER()}
text={data.emsesp_version}
to="/settings/ems-esp"
/>
<Divider variant="inset" component="li" />
{/* TODO: translate */}
<ListMenuItem
disabled={!me.admin}
icon={MemoryIcon}
bgcolor="#68374d"
label="System Memory"
text={formatNumber(data.free_heap) + ' KB'}
to="/settings/espsystemstatus"
/>
<Divider variant="inset" component="li" />
<ListMenuItem
disabled={!me.admin}
icon={DeviceHubIcon}
bgcolor={activeHighlight(data.mqtt_status)}
label={LL.STATUS_OF('MQTT')}
text={data.mqtt_status ? LL.ACTIVE() : LL.INACTIVE(0)}
to="/settings/mqtt/status"
/>
<Divider variant="inset" component="li" />
<ListMenuItem
disabled={!me.admin}
icon={DeviceHubIcon}
bgcolor={ntpStatusHighlight()}
label={LL.STATUS_OF('NTP')}
text={ntpStatus()}
to="/settings/ntp/status"
/>
<Divider variant="inset" component="li" />
<ListMenuItem
disabled={!me.admin}
icon={CastIcon}
bgcolor={activeHighlight(data.ota_status)}
label={LL.STATUS_OF('OTA')}
text={data.ota_status ? LL.ACTIVE() : LL.INACTIVE(0)}
to="/settings/ota"
/>
<Divider variant="inset" component="li" />
</List>