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

#1665

Browse Source
This commit is contained in:
proddy
2024-03-17 19:08:03 +01:00
parent 2739712c5b
commit 9bf7fbfb2e
58 changed files with 631 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
interface/src/framework/Settings.tsx Normal file
View File

@@ -0,0 +1,171 @@
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import CastIcon from '@mui/icons-material/Cast';
import DeviceHubIcon from '@mui/icons-material/DeviceHub';
import ImportExportIcon from '@mui/icons-material/ImportExport';
import LockIcon from '@mui/icons-material/Lock';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
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 } from '@mui/material';
import { Link } from 'react-router-dom';
import type { FC } from 'react';
import { SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
const Settings: FC = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.SETTINGS(0));
return (
<SectionContent>
<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 system settings" />
</ListItemButton>
</ListItem>
<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>
<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>
<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>
<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>
<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>
<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="Configure user administration" />
</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>
</List>
</SectionContent>
);
};
export default Settings;

2
interface/src/framework/ap/APSettingsForm.tsx
View File

@@ -205,7 +205,7 @@ const APSettingsForm: FC = () => {
};
return (
<SectionContent title={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} titleGutter>
<SectionContent title={LL.SETTINGS_OF(LL.ACCESS_POINT(1))}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{content()}
</SectionContent>

6
interface/src/framework/ap/APStatusForm.tsx
View File

@@ -99,11 +99,7 @@ const APStatusForm: FC = () => {
);
};
return (
<SectionContent title={LL.STATUS_OF(LL.ACCESS_POINT(1))} titleGutter>
{content()}
</SectionContent>
);
return <SectionContent title={LL.STATUS_OF(LL.ACCESS_POINT(1))}>{content()}</SectionContent>;
};
export default APStatusForm;

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

@@ -22,16 +22,11 @@ const AccessPoint: FC = () => {
return (
<>
<RouterTabs value={routerTab}>
<Tab value="/ap/status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
<Tab
value="/ap/settings"
label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))}
disabled={!authenticatedContext.me.admin}
/>
<Tab value="settings" label={LL.SETTINGS_OF(LL.ACCESS_POINT(1))} disabled={!authenticatedContext.me.admin} />
<Tab value="status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
</RouterTabs>
<Routes>
<Route path="status" element={<APStatusForm />} />
<Route index element={<Navigate to="status" />} />
<Route
path="settings"
element={
@@ -40,7 +35,7 @@ const AccessPoint: FC = () => {
</RequireAdmin>
}
/>
<Route path="*" element={<Navigate replace to="/ap/status" />} />
<Route path="*" element={<Navigate replace to="settings" />} />
</Routes>
</>
);

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

@@ -21,8 +21,8 @@ const Mqtt: FC = () => {
return (
<>
<RouterTabs value={routerTab}>
<Tab value="/mqtt/status" label={LL.STATUS_OF('MQTT')} />
<Tab value="/mqtt/settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
<Tab value="settings" label={LL.SETTINGS_OF('MQTT')} disabled={!authenticatedContext.me.admin} />
<Tab value="status" label={LL.STATUS_OF('MQTT')} />
</RouterTabs>
<Routes>
<Route path="status" element={<MqttStatusForm />} />
@@ -34,7 +34,7 @@ const Mqtt: FC = () => {
</RequireAdmin>
}
/>
<Route path="*" element={<Navigate replace to="/mqtt/status" />} />
<Route path="*" element={<Navigate replace to="settings" />} />
</Routes>
</>
);

2
interface/src/framework/mqtt/MqttSettingsForm.tsx
View File

@@ -449,7 +449,7 @@ const MqttSettingsForm: FC = () => {
};
return (
<SectionContent title={LL.SETTINGS_OF('MQTT')} titleGutter>
<SectionContent title={LL.SETTINGS_OF('MQTT')}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{content()}
</SectionContent>

6
interface/src/framework/mqtt/MqttStatusForm.tsx
View File

@@ -146,11 +146,7 @@ const MqttStatusForm: FC = () => {
);
};
return (
<SectionContent title={LL.STATUS_OF('MQTT')} titleGutter>
{content()}
</SectionContent>
);
return <SectionContent title={LL.STATUS_OF('MQTT')}>{content()}</SectionContent>;
};
export default MqttStatusForm;

12
interface/src/framework/network/NetworkConnection.tsx
View File

@@ -44,13 +44,9 @@ const NetworkConnection: FC = () => {
}}
>
<RouterTabs value={routerTab}>
<Tab value="/network/status" label={LL.STATUS_OF(LL.NETWORK(1))} />
<Tab value="/network/scan" label={LL.NETWORK_SCAN()} disabled={!authenticatedContext.me.admin} />
<Tab
value="/network/settings"
label={LL.SETTINGS_OF(LL.NETWORK(1))}
disabled={!authenticatedContext.me.admin}
/>
<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="status" label={LL.STATUS_OF(LL.NETWORK(1))} />
</RouterTabs>
<Routes>
<Route path="status" element={<NetworkStatusForm />} />
@@ -70,7 +66,7 @@ const NetworkConnection: FC = () => {
</RequireAdmin>
}
/>
<Route path="*" element={<Navigate replace to="/network/status" />} />
<Route path="*" element={<Navigate replace to="settings" />} />
</Routes>
</WiFiConnectionContext.Provider>
);

2
interface/src/framework/network/NetworkSettingsForm.tsx
View File

@@ -360,7 +360,7 @@ const WiFiSettingsForm: FC = () => {
};
return (
<SectionContent title={LL.SETTINGS_OF(LL.NETWORK(1))} titleGutter>
<SectionContent title={LL.SETTINGS_OF(LL.NETWORK(1))}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{restarting ? <RestartMonitor /> : content()}
</SectionContent>

6
interface/src/framework/network/NetworkStatusForm.tsx
View File

@@ -193,11 +193,7 @@ const NetworkStatusForm: FC = () => {
);
};
return (
<SectionContent title={LL.STATUS_OF(LL.NETWORK(1))} titleGutter>
{content()}
</SectionContent>
);
return <SectionContent title={LL.STATUS_OF(LL.NETWORK(1))}>{content()}</SectionContent>;
};
export default NetworkStatusForm;

2
interface/src/framework/ntp/NTPSettingsForm.tsx
View File

@@ -130,7 +130,7 @@ const NTPSettingsForm: FC = () => {
};
return (
<SectionContent title={LL.SETTINGS_OF('NTP')} titleGutter>
<SectionContent title={LL.SETTINGS_OF('NTP')}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{content()}
</SectionContent>

6
interface/src/framework/ntp/NTPStatusForm.tsx
View File

@@ -216,11 +216,7 @@ const NTPStatusForm: FC = () => {
);
};
return (
<SectionContent title={LL.STATUS_OF('NTP')} titleGutter>
{content()}
</SectionContent>
);
return <SectionContent title={LL.STATUS_OF('NTP')}>{content()}</SectionContent>;
};
export default NTPStatusForm;

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

@@ -20,8 +20,8 @@ const NetworkTime: FC = () => {
return (
<>
<RouterTabs value={routerTab}>
<Tab value="/ntp/status" label={LL.STATUS_OF('NTP')} />
<Tab value="/ntp/settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
<Tab value="settings" label={LL.SETTINGS_OF('NTP')} disabled={!authenticatedContext.me.admin} />
<Tab value="status" label={LL.STATUS_OF('NTP')} />
</RouterTabs>
<Routes>
<Route path="status" element={<NTPStatusForm />} />
@@ -33,7 +33,7 @@ const NetworkTime: FC = () => {
</RequireAdmin>
}
/>
<Route path="*" element={<Navigate replace to="/ntp/status" />} />
<Route path="*" element={<Navigate replace to="settings" />} />
</Routes>
</>
);

7
interface/src/framework/system/OTASettingsForm.tsx → interface/src/framework/ota/OTASettingsForm.tsx
View File

@@ -14,7 +14,8 @@ import {
SectionContent,
ValidatedPasswordField,
ValidatedTextField,
BlockNavigation
BlockNavigation,
useLayoutTitle
} from 'components';
import { useI18nContext } from 'i18n/i18n-react';
@@ -61,6 +62,8 @@ const OTASettingsForm: FC = () => {
}
};
useLayoutTitle('OTA');
return (
<>
<BlockFormControlLabel
@@ -117,7 +120,7 @@ const OTASettingsForm: FC = () => {
};
return (
<SectionContent title={LL.SETTINGS_OF('OTA')} titleGutter>
<SectionContent title={LL.SETTINGS_OF('OTA')}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{content()}
</SectionContent>

2
interface/src/framework/security/ManageUsersForm.tsx
View File

@@ -232,7 +232,7 @@ const ManageUsersForm: FC = () => {
};
return (
<SectionContent title={LL.MANAGE_USERS()} titleGutter>
<SectionContent title={LL.MANAGE_USERS()}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{content()}
</SectionContent>

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

@@ -17,13 +17,13 @@ const Security: FC = () => {
return (
<>
<RouterTabs value={routerTab}>
<Tab value="/security/users" label={LL.MANAGE_USERS()} />
<Tab value="/security/settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
<Tab value="settings" label={LL.SETTINGS_OF(LL.SECURITY(1))} />
<Tab value="users" label={LL.MANAGE_USERS()} />
</RouterTabs>
<Routes>
<Route path="users" element={<ManageUsersForm />} />
<Route path="settings" element={<SecuritySettingsForm />} />
<Route path="*" element={<Navigate replace to="/security/users" />} />
<Route path="*" element={<Navigate replace to="settings" />} />
</Routes>
</>
);

2
interface/src/framework/security/SecuritySettingsForm.tsx
View File

@@ -96,7 +96,7 @@ const SecuritySettingsForm: FC = () => {
};
return (
<SectionContent title={LL.SETTINGS_OF(LL.SECURITY(1))} titleGutter>
<SectionContent title={LL.SETTINGS_OF(LL.SECURITY(1))}>
{blocker ? <BlockNavigation blocker={blocker} /> : null}
{content()}
</SectionContent>

36
interface/src/framework/system/Status.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { Tab } from '@mui/material';
import { Navigate, Routes, Route } from 'react-router-dom';
import SystemLog from './SystemLog';
import SystemStatusForm from './SystemStatusForm';
import type { FC } from 'react';
import { useRouterTab, RouterTabs, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import EMSStatus from 'project/EMSStatus';
const Status: FC = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.STATUS_OF(''));
const { routerTab } = useRouterTab();
return (
<>
<RouterTabs value={routerTab}>
<Tab value="status" label={LL.SYSTEM(1)} />
<Tab value="emsesp-status" label="EMS-ESP" />
<Tab value="log" label={LL.LOG_OF(LL.SYSTEM(2))} />
</RouterTabs>
<Routes>
<Route path="status" element={<SystemStatusForm />} />
<Route path="emsesp-status" element={<EMSStatus />} />
<Route path="log" element={<SystemLog />} />
<Route path="*" element={<Navigate replace to="status" />} />
</Routes>
</>
);
};
export default Status;

56
interface/src/framework/system/System.tsx
View File

@@ -1,56 +0,0 @@
import { Tab } from '@mui/material';
import { useContext } from 'react';
import { Navigate, Routes, Route } from 'react-router-dom';
import OTASettingsForm from './OTASettingsForm';
import SystemLog from './SystemLog';
import SystemStatusForm from './SystemStatusForm';
import UploadFileForm from './UploadFileForm';
import type { FC } from 'react';
import { useRouterTab, RouterTabs, useLayoutTitle, RequireAdmin } from 'components';
import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react';
const System: FC = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.SYSTEM(0));
const { me } = useContext(AuthenticatedContext);
const { routerTab } = useRouterTab();
return (
<>
<RouterTabs value={routerTab}>
<Tab value="/system/status" label={LL.STATUS_OF(LL.SYSTEM(1))} />
<Tab value="/system/log" label={LL.LOG_OF(LL.SYSTEM(2))} />
<Tab value="/system/ota" label={LL.SETTINGS_OF('OTA')} disabled={!me.admin} />
<Tab value="/system/upload" label={LL.UPLOAD_DOWNLOAD()} disabled={!me.admin} />
</RouterTabs>
<Routes>
<Route path="status" element={<SystemStatusForm />} />
<Route path="log" element={<SystemLog />} />
<Route
path="ota"
element={
<RequireAdmin>
<OTASettingsForm />
</RequireAdmin>
}
/>
<Route
path="upload"
element={
<RequireAdmin>
<UploadFileForm />
</RequireAdmin>
}
/>
<Route path="*" element={<Navigate replace to="/system/status" />} />
</Routes>
</>
);
};
export default System;

2
interface/src/framework/system/SystemStatusForm.tsx
View File

@@ -345,7 +345,7 @@ const SystemStatusForm: FC = () => {
};
return (
<SectionContent title={LL.STATUS_OF(LL.SYSTEM(1))} titleGutter>
<SectionContent title={LL.STATUS_OF(LL.SYSTEM(1))}>
{restarting ? <RestartMonitor /> : content()}
{data && (
<SystemStatusVersionDialog

14
interface/src/framework/system/UploadFileForm.tsx → interface/src/framework/system/UploadDownload.tsx
View File

@@ -6,12 +6,12 @@ import { toast } from 'react-toastify';
import RestartMonitor from './RestartMonitor';
import * as SystemApi from 'api/system';
import { SectionContent, SingleUpload } from 'components';
import { SectionContent, SingleUpload, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import * as EMSESP from 'project/api';
const UploadFileForm: FC = () => {
const UploadDownload: FC = () => {
const { LL } = useI18nContext();
const [restarting, setRestarting] = useState<boolean>();
const [md5, setMd5] = useState<string>();
@@ -127,6 +127,8 @@ const UploadFileForm: FC = () => {
});
};
useLayoutTitle(LL.UPLOAD_DOWNLOAD());
const content = () => (
<>
<Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
@@ -214,11 +216,7 @@ const UploadFileForm: FC = () => {
)}
</>
);
return (
<SectionContent title={LL.UPLOAD_DOWNLOAD()} titleGutter>
{restarting ? <RestartMonitor /> : content()}
</SectionContent>
);
return <SectionContent title={LL.UPLOAD_DOWNLOAD()}>{restarting ? <RestartMonitor /> : content()}</SectionContent>;
};
export default UploadFileForm;
export default UploadDownload;