mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-08 08:49:52 +03:00
added status and renamed components
This commit is contained in:
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user