mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-08 00:39:50 +03:00
updates to web pages
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
import { Tab } from '@mui/material';
|
||||
import { useContext } from 'react';
|
||||
import { Navigate, Routes, Route } from 'react-router-dom';
|
||||
|
||||
import APSettingsForm from './APSettingsForm';
|
||||
import APStatusForm from './APStatusForm';
|
||||
import type { FC } from 'react';
|
||||
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
|
||||
@@ -15,14 +13,12 @@ const AccessPoint: FC = () => {
|
||||
|
||||
useLayoutTitle(LL.ACCESS_POINT(0));
|
||||
|
||||
const authenticatedContext = useContext(AuthenticatedContext);
|
||||
|
||||
const { routerTab } = useRouterTab();
|
||||
|
||||
return (
|
||||
<>
|
||||
<RouterTabs value={routerTab}>
|
||||
<Tab value="settings" label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} disabled={!authenticatedContext.me.admin} />
|
||||
<Tab value="settings" label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} />
|
||||
<Tab value="status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
|
||||
</RouterTabs>
|
||||
<Routes>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { Tab } from '@mui/material';
|
||||
import { useContext } from 'react';
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import MqttSettingsForm from './MqttSettingsForm';
|
||||
import MqttStatusForm from './MqttStatusForm';
|
||||
import type { FC } from 'react';
|
||||
|
||||
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
|
||||
@@ -15,13 +13,12 @@ const Mqtt: FC = () => {
|
||||
|
||||
useLayoutTitle('MQTT');
|
||||
|
||||
const authenticatedContext = useContext(AuthenticatedContext);
|
||||
const { routerTab } = useRouterTab();
|
||||
|
||||
return (
|
||||
<>
|
||||
<RouterTabs value={routerTab}>
|
||||
<Tab value="settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
|
||||
<Tab value="settings" label={LL.SETTINGS_OF('MQTT')} />
|
||||
<Tab value="status" label={LL.STATUS_OF('MQTT')} />
|
||||
</RouterTabs>
|
||||
<Routes>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Tab } from '@mui/material';
|
||||
import { useCallback, useContext, useState } from 'react';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { Navigate, Routes, Route, useNavigate } from 'react-router-dom';
|
||||
import NetworkSettingsForm from './NetworkSettingsForm';
|
||||
import NetworkStatusForm from './NetworkStatusForm';
|
||||
@@ -9,7 +9,6 @@ import type { FC } from 'react';
|
||||
|
||||
import type { WiFiNetwork } from 'types';
|
||||
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
|
||||
const NetworkConnection: FC = () => {
|
||||
@@ -18,7 +17,6 @@ const NetworkConnection: FC = () => {
|
||||
|
||||
const { routerTab } = useRouterTab();
|
||||
|
||||
const authenticatedContext = useContext(AuthenticatedContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();
|
||||
@@ -44,8 +42,8 @@ const NetworkConnection: FC = () => {
|
||||
}}
|
||||
>
|
||||
<RouterTabs value={routerTab}>
|
||||
<Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} disabled={!authenticatedContext.me.admin} />
|
||||
<Tab value="scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
|
||||
<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))} />
|
||||
</RouterTabs>
|
||||
<Routes>
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import { useRequest } from 'alova';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { Theme } from '@mui/material';
|
||||
import type { FC } from 'react';
|
||||
@@ -31,7 +31,6 @@ import type { NTPStatus } from 'types';
|
||||
import { dialogStyle } from 'CustomTheme';
|
||||
import * as NTPApi from 'api/ntp';
|
||||
import { ButtonRow, FormLoader, SectionContent } from 'components';
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
import { NTPSyncStatus } from 'types';
|
||||
@@ -59,7 +58,6 @@ const NTPStatusForm: FC = () => {
|
||||
const [localTime, setLocalTime] = useState<string>('');
|
||||
const [settingTime, setSettingTime] = useState<boolean>(false);
|
||||
const [processing, setProcessing] = useState<boolean>(false);
|
||||
const { me } = useContext(AuthenticatedContext);
|
||||
|
||||
const { LL } = useI18nContext();
|
||||
|
||||
@@ -201,7 +199,7 @@ const NTPStatusForm: FC = () => {
|
||||
</Button>
|
||||
</ButtonRow>
|
||||
</Box>
|
||||
{me.admin && data && !isNtpActive(data) && (
|
||||
{data && !isNtpActive(data) && (
|
||||
<Box flexWrap="nowrap" whiteSpace="nowrap">
|
||||
<ButtonRow>
|
||||
<Button onClick={openSetTime} variant="outlined" color="primary" startIcon={<AccessTimeIcon />}>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { Tab } from '@mui/material';
|
||||
import { useContext } from 'react';
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import NTPSettingsForm from './NTPSettingsForm';
|
||||
import NTPStatusForm from './NTPStatusForm';
|
||||
import type { FC } from 'react';
|
||||
|
||||
import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
|
||||
@@ -14,13 +12,12 @@ const NetworkTime: FC = () => {
|
||||
const { LL } = useI18nContext();
|
||||
useLayoutTitle('NTP');
|
||||
|
||||
const authenticatedContext = useContext(AuthenticatedContext);
|
||||
const { routerTab } = useRouterTab();
|
||||
|
||||
return (
|
||||
<>
|
||||
<RouterTabs value={routerTab}>
|
||||
<Tab value="settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
|
||||
<Tab value="settings" label={LL.SETTINGS_OF('NTP')} />
|
||||
<Tab value="status" label={LL.STATUS_OF('NTP')} />
|
||||
</RouterTabs>
|
||||
<Routes>
|
||||
|
||||
@@ -8,8 +8,8 @@ import type { FC } from 'react';
|
||||
import type { SecuritySettings } from 'types';
|
||||
import * as SecurityApi from 'api/security';
|
||||
import { ButtonRow, FormLoader, MessageBox, SectionContent, ValidatedPasswordField, BlockNavigation } from 'components';
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
|
||||
import { AuthenticatedContext } from 'contexts/authentication';
|
||||
import { useI18nContext } from 'i18n/i18n-react';
|
||||
import { updateValueDirty, useRest } from 'utils';
|
||||
import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';
|
||||
|
||||
@@ -232,7 +232,7 @@ const SystemLog: FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<SectionContent title={LL.LOG_OF(LL.SYSTEM(2))} titleGutter id="log-window">
|
||||
<SectionContent title={LL.LOG_OF(LL.SYSTEM(2))} id="log-window">
|
||||
{blocker ? <BlockNavigation blocker={blocker} /> : null}
|
||||
{content()}
|
||||
</SectionContent>
|
||||
|
||||
@@ -46,13 +46,14 @@ function formatNumber(num: number) {
|
||||
const SystemStatusForm: FC = () => {
|
||||
const { LL } = useI18nContext();
|
||||
|
||||
const { me } = useContext(AuthenticatedContext);
|
||||
const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
|
||||
const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
|
||||
const [processing, setProcessing] = useState<boolean>(false);
|
||||
const [restarting, setRestarting] = useState<boolean>();
|
||||
const [versionDialogOpen, setVersionDialogOpen] = useState<boolean>(false);
|
||||
|
||||
const { me } = useContext(AuthenticatedContext);
|
||||
|
||||
const { send: restartCommand } = useRequest(SystemApi.restart(), {
|
||||
immediate: false
|
||||
});
|
||||
@@ -187,7 +188,7 @@ const SystemStatusForm: FC = () => {
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<BuildIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -199,7 +200,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<TimerIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -208,7 +209,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<DevicesIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -217,7 +218,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<DeveloperBoardIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -240,7 +241,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<MemoryIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -254,7 +255,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<AppsIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -268,7 +269,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<SdStorageIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -282,7 +283,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<SdCardAlertIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
@@ -296,7 +297,7 @@ const SystemStatusForm: FC = () => {
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
|
||||
@@ -31,7 +31,7 @@ const SystemStatusVersionDialog = ({ open, onClose, version, platform }: SystemS
|
||||
const STABLE_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
|
||||
const DEV_RELNOTES_URL = 'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
|
||||
|
||||
const uploadURL = window.location.origin + '/system/upload';
|
||||
const uploadURL = window.location.origin + '/settings/upload';
|
||||
|
||||
const connected = latestVersion && latestDevVersion;
|
||||
|
||||
|
||||
@@ -153,11 +153,6 @@ const UploadDownload: FC = () => {
|
||||
<Typography sx={{ pt: 4, pb: 2 }} variant="h6" color="primary">
|
||||
{LL.DOWNLOAD(0)} {LL.SUPPORT_INFORMATION(1)}
|
||||
</Typography>
|
||||
<Box color="warning.main">
|
||||
<Typography mb={1} variant="body2">
|
||||
{LL.HELP_INFORMATION_4()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
startIcon={<DownloadIcon />}
|
||||
variant="outlined"
|
||||
@@ -216,7 +211,7 @@ const UploadDownload: FC = () => {
|
||||
)}
|
||||
</>
|
||||
);
|
||||
return <SectionContent title={LL.UPLOAD_DOWNLOAD()}>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
|
||||
return <SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
|
||||
};
|
||||
|
||||
export default UploadDownload;
|
||||
|
||||
Reference in New Issue
Block a user