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

upgrade alova to v3

Browse Source
This commit is contained in:
proddy
2024-08-03 15:35:54 +02:00
parent 9a23d4e2b3
commit 7751baf8bf
33 changed files with 481 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
interface/src/app/main/CustomEntities.tsx
View File

@@ -20,7 +20,7 @@ import {
Table
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { updateState, useRequest } from 'alova';
import { updateState, useRequest } from 'alova/client';
import {
BlockNavigation,
ButtonRow,
@@ -182,7 +182,6 @@ const CustomEntities: FC = () => {
const onDialogSave = (updatedItem: EntityItem) => {
setDialogOpen(false);
updateState('entities', (data: EntityItem[]) => {
const new_data = creating
? [

2
interface/src/app/main/Customization.tsx
View File

@@ -40,7 +40,7 @@ import {
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import RestartMonitor from 'app/status/RestartMonitor';
import {
BlockNavigation,

2
interface/src/app/main/Devices.tsx
View File

@@ -57,7 +57,7 @@ import {
import { useTheme } from '@table-library/react-table-library/theme';
import type { Action, State } from '@table-library/react-table-library/types/common';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, MessageBox, SectionContent, useLayoutTitle } from 'components';
import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react';

158
interface/src/app/main/Help.tsx
View File

@@ -18,8 +18,10 @@ import {
Typography
} from '@mui/material';
import * as SystemApi from 'api/system';
import * as EMSESP from 'app/main/api';
import { useRequest } from 'alova';
import { useAutoRequest, useRequest } from 'alova/client';
import { SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
@@ -36,6 +38,9 @@ const Help: FC = () => {
}
);
// TODO check useAutoRequest - https://alova.js.org/tutorial/client/strategy/use-auto-request/#basic-usage
const { data, loading } = useAutoRequest(SystemApi.readSystemStatus);
onGetAPI((event) => {
const anchor = document.createElement('a');
anchor.href = URL.createObjectURL(
@@ -45,7 +50,7 @@ const Help: FC = () => {
);
anchor.download =
'emsesp_' + event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt';
'emsesp_' + event.args[0].device + '_' + event.args[0].entity + '.txt';
anchor.click();
URL.revokeObjectURL(anchor.href);
toast.info(LL.DOWNLOAD_SUCCESSFUL());
@@ -57,88 +62,97 @@ const Help: FC = () => {
});
};
console.log('loading: ' + loading + ' data2: ' + data);
if (loading) {
return <div>Loading...</div>;
}
return (
<SectionContent>
<List sx={{ borderRadius: 3, border: '2px solid grey' }}>
<ListItem>
<ListItemButton component="a" href="https://emsesp.github.io/docs">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#72caf9' }}>
<MenuBookIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.HELP_INFORMATION_1()} />
</ListItemButton>
</ListItem>
<>
<div>version is {data.emsesp_version}</div>
<SectionContent>
<List sx={{ borderRadius: 3, border: '2px solid grey' }}>
<ListItem>
<ListItemButton component="a" href="https://emsesp.github.io/docs">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#72caf9' }}>
<MenuBookIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.HELP_INFORMATION_1()} />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#72caf9' }}>
<CommentIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.HELP_INFORMATION_2()} />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton component="a" href="https://discord.gg/3J3GgnzpyT">
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#72caf9' }}>
<CommentIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.HELP_INFORMATION_2()} />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
component="a"
href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
<ListItem>
<ListItemButton
component="a"
href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
>
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#72caf9' }}>
<GitHubIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.HELP_INFORMATION_3()} />
</ListItemButton>
</ListItem>
</List>
<Box p={2} color="warning.main">
<Typography mb={1} variant="body2">
{LL.HELP_INFORMATION_4()}
</Typography>
<Button
startIcon={<DownloadIcon />}
variant="outlined"
color="primary"
onClick={() => callAPI('system', 'info')}
>
<ListItemAvatar>
<Avatar sx={{ bgcolor: '#72caf9' }}>
<GitHubIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={LL.HELP_INFORMATION_3()} />
</ListItemButton>
</ListItem>
</List>
{LL.SUPPORT_INFORMATION(0)}
</Button>
</Box>
<Box p={2} color="warning.main">
<Typography mb={1} variant="body2">
{LL.HELP_INFORMATION_4()}
</Typography>
<Button
sx={{ ml: 2 }}
startIcon={<DownloadIcon />}
variant="outlined"
color="primary"
onClick={() => callAPI('system', 'info')}
onClick={() => callAPI('system', 'allvalues')}
>
{LL.SUPPORT_INFORMATION(0)}
All Values
</Button>
</Box>
<Button
sx={{ ml: 2 }}
startIcon={<DownloadIcon />}
variant="outlined"
color="primary"
onClick={() => callAPI('system', 'allvalues')}
>
All Values
</Button>
<Box border={1} p={1} mt={4}>
<Typography align="center" variant="subtitle1" color="orange">
<b>{LL.HELP_INFORMATION_5()}</b>
</Typography>
<Typography align="center">
<Link
target="_blank"
href="https://github.com/emsesp/EMS-ESP32"
color="primary"
>
{'github.com/emsesp/EMS-ESP32'}
</Link>
</Typography>
<Typography color="white" variant="subtitle2" align="center">
@proddy @MichaelDvP
</Typography>
</Box>
</SectionContent>
<Box border={1} p={1} mt={4}>
<Typography align="center" variant="subtitle1" color="orange">
<b>{LL.HELP_INFORMATION_5()}</b>
</Typography>
<Typography align="center">
<Link
target="_blank"
href="https://github.com/emsesp/EMS-ESP32"
color="primary"
>
{'github.com/emsesp/EMS-ESP32'}
</Link>
</Typography>
<Typography color="white" variant="subtitle2" align="center">
@proddy @MichaelDvP
</Typography>
</Box>
</SectionContent>
</>
);
};

23
interface/src/app/main/Modules.tsx
View File

@@ -8,6 +8,8 @@ import CircleIcon from '@mui/icons-material/Circle';
import WarningIcon from '@mui/icons-material/Warning';
import { Box, Button, Typography } from '@mui/material';
import { alovaInstance } from 'api/endpoints';
import {
Body,
Cell,
@@ -18,7 +20,7 @@ import {
Table
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { updateState, useRequest } from 'alova';
import { updateState, useRequest } from 'alova/client';
import {
BlockNavigation,
ButtonRow,
@@ -122,14 +124,19 @@ const Modules: FC = () => {
return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
}
// TODO example of how to use updateState
// TODO see https://alova.js.org/api/states/#updatestate
const updateModuleItem = (updatedItem: ModuleItem) => {
updateState('modules', (data: ModuleItem[]) => {
const new_data = data.map((mi) =>
mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
);
setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
return new_data;
});
updateState<ModuleItem[]>(
[alovaInstance.snapshots.match('modules', true)] as any,
(data: ModuleItem[]) => {
const new_data = data.map((mi) =>
mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
);
setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
return new_data;
}
);
};
const saveModules = async () => {

3
interface/src/app/main/Scheduler.tsx
View File

@@ -19,7 +19,7 @@ import {
Table
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { updateState, useRequest } from 'alova';
import { updateState, useRequest } from 'alova/client';
import {
BlockNavigation,
ButtonRow,
@@ -177,7 +177,6 @@ const Scheduler: FC = () => {
const onDialogSave = (updatedItem: ScheduleItem) => {
setDialogOpen(false);
updateState('schedule', (data: ScheduleItem[]) => {
const new_data = creating
? [

2
interface/src/app/main/Sensors.tsx
View File

@@ -21,7 +21,7 @@ import {
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import type { State } from '@table-library/react-table-library/types/common';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react';

8
interface/src/app/main/api.ts
View File

@@ -65,7 +65,7 @@ export const readDeviceEntities = (id: number) =>
alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
params: { id },
responseType: 'arraybuffer',
transformData(data) {
transform(data) {
return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
...de,
o_m: de.m,
@@ -89,7 +89,7 @@ export const writeDeviceName = (data: { id: number; name: string }) =>
export const readSchedule = () =>
alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
name: 'schedule',
transformData(data) {
transform(data) {
return (data as Schedule).schedule.map((si: ScheduleItem) => ({
...si,
o_id: si.id,
@@ -110,7 +110,7 @@ export const writeSchedule = (data: Schedule) =>
export const readModules = () =>
alovaInstance.Get<ModuleItem[]>('/rest/modules', {
name: 'modules',
transformData(data) {
transform(data) {
return (data as Modules).modules.map((mi: ModuleItem) => ({
...mi,
o_enabled: mi.enabled,
@@ -128,7 +128,7 @@ export const writeModules = (data: {
export const readCustomEntities = () =>
alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
name: 'entities',
transformData(data) {
transform(data) {
return (data as Entities).entities.map((ei: EntityItem) => ({
...ei,
o_id: ei.id,

2
interface/src/app/settings/ApplicationSettings.tsx
View File

@@ -19,7 +19,7 @@ import {
import * as SystemApi from 'api/system';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import RestartMonitor from 'app/status/RestartMonitor';
import type { ValidateFieldsError } from 'async-validator';
import {

3
interface/src/app/settings/NTPSettings.tsx
View File

@@ -7,7 +7,7 @@ import { Button, Checkbox, MenuItem } from '@mui/material';
import * as NTPApi from 'api/ntp';
import { updateState } from 'alova';
import { updateState } from 'alova/client';
import type { ValidateFieldsError } from 'async-validator';
import {
BlockFormControlLabel,
@@ -73,6 +73,7 @@ const NTPSettings: FC = () => {
const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
updateFormValue(event);
// TODO fix
updateState('ntpSettings', (settings: NTPSettingsType) => ({
...settings,
tz_label: event.target.value,

2
interface/src/app/settings/Settings.tsx
View File

@@ -24,7 +24,7 @@ import {
import * as SystemApi from 'api/system';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { SectionContent, useLayoutTitle } from 'components';
import ListMenuItem from 'components/layout/ListMenuItem';
import { useI18nContext } from 'i18n/i18n-react';

8
interface/src/app/settings/UploadDownload.tsx
View File

@@ -7,7 +7,7 @@ import { Box, Button, Divider, Link, Typography } from '@mui/material';
import * as SystemApi from 'api/system';
import * as EMSESP from 'app/main/api';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import type { APIcall } from 'app/main/types';
import {
FormLoader,
@@ -150,11 +150,7 @@ const UploadDownload: FC = () => {
saveFile(event.data, 'schedule.json');
});
onGetAPI((event) => {
saveFile(
event.data,
event.sendArgs[0].device + '_' + event.sendArgs[0].entity + '.txt'
);
saveFile(event.data, event.args[0].device + '_' + event.args[0].entity + '.txt');
});
const downloadSettings = async () => {

2
interface/src/app/settings/network/NetworkSettings.tsx
View File

@@ -26,7 +26,7 @@ import {
import * as NetworkApi from 'api/network';
import * as SystemApi from 'api/system';
import { updateState, useRequest } from 'alova';
import { updateState, useRequest } from 'alova/client';
import type { ValidateFieldsError } from 'async-validator';
import {
BlockFormControlLabel,

3
interface/src/app/settings/network/WiFiNetworkScanner.tsx
View File

@@ -6,7 +6,7 @@ import { Button } from '@mui/material';
import * as NetworkApi from 'api/network';
import { updateState, useRequest } from 'alova';
import { updateState, useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
@@ -47,6 +47,7 @@ const WiFiNetworkScanner: FC = () => {
onCompleteScanNetworks(() => {
pollCount.current = 0;
setErrorMessage(undefined);
// TODO fix
updateState('listNetworks', () => undefined);
void getNetworkList();
});

2
interface/src/app/settings/security/GenerateToken.tsx
View File

@@ -17,7 +17,7 @@ import {
import * as SecurityApi from 'api/security';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { MessageBox } from 'components';
import { useI18nContext } from 'i18n/i18n-react';

2
interface/src/app/status/APStatus.tsx
View File

@@ -18,7 +18,7 @@ import type { Theme } from '@mui/material';
import * as APApi from 'api/ap';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import type { APStatusType } from 'types';

2
interface/src/app/status/Activity.tsx
View File

@@ -14,7 +14,7 @@ import {
Table
} from '@table-library/react-table-library/table';
import { useTheme as tableTheme } from '@table-library/react-table-library/theme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import type { Translation } from 'i18n/i18n-types';

2
interface/src/app/status/HardwareStatus.tsx
View File

@@ -22,7 +22,7 @@ import {
import * as SystemApi from 'api/system';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';

2
interface/src/app/status/MqttStatus.tsx
View File

@@ -19,7 +19,7 @@ import type { Theme } from '@mui/material';
import * as MqttApi from 'api/mqtt';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import type { MqttStatusType } from 'types';

2
interface/src/app/status/NTPStatus.tsx
View File

@@ -30,7 +30,7 @@ import type { Theme } from '@mui/material';
import * as NTPApi from 'api/ntp';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import type { NTPStatusType, Time } from 'types';

2
interface/src/app/status/NetworkStatus.tsx
View File

@@ -22,7 +22,7 @@ import type { Theme } from '@mui/material';
import * as NetworkApi from 'api/network';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { ButtonRow, FormLoader, SectionContent, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import type { NetworkStatusType } from 'types';

2
interface/src/app/status/RestartMonitor.tsx
View File

@@ -3,7 +3,7 @@ import type { FC } from 'react';
import * as SystemApi from 'api/system';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { FormLoader } from 'components';
import { useI18nContext } from 'i18n/i18n-react';

22
interface/src/app/status/Status.tsx
View File

@@ -34,7 +34,7 @@ import {
import * as SystemApi from 'api/system';
import { dialogStyle } from 'CustomTheme';
import { useRequest } from 'alova';
import { useRequest } from 'alova/client';
import { busConnectionStatus } from 'app/main/types';
import { FormLoader, SectionContent, useLayoutTitle } from 'components';
import ListMenuItem from 'components/layout/ListMenuItem';
@@ -67,9 +67,11 @@ const SystemStatus: FC = () => {
const {
data: data,
send: loadData,
error
} = useRequest(SystemApi.readSystemStatus, { force: true });
loading,
send: loadData
} = useRequest(SystemApi.readSystemStatus, {
initialData: []
});
const theme = useTheme();
@@ -270,8 +272,12 @@ const SystemStatus: FC = () => {
);
const content = () => {
if (!data) {
return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
// if (!data) {
// return <FormLoader onRetry={loadData} errorMessage={error?.message} />;
// }
if (loading) {
return <>fddfdd</>;
}
return (
@@ -405,9 +411,7 @@ const SystemStatus: FC = () => {
);
};
return (
<SectionContent>{restarting ? <RestartMonitor /> : content()}</SectionContent>
);
return <SectionContent>{content()}</SectionContent>;
};
export default SystemStatus;

3
interface/src/app/status/SystemLog.tsx
View File

@@ -17,8 +17,7 @@ import {
import * as SystemApi from 'api/system';
import { fetchLogES } from 'api/system';
import { useSSE } from '@alova/scene-react';
import { useRequest } from 'alova';
import { useRequest, useSSE } from 'alova/client';
import {
BlockFormControlLabel,
BlockNavigation,