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

Merge pull request #1352 from proddy/dev

Browse Source 
quick link from device entities to custom entities page (the list icon)
This commit is contained in:
Proddy
2023-10-21 07:15:47 -07:00
committed by GitHub
parent 1fded64f2e 7a36c5e8cb
commit 36ca7e09ca
6 changed files with 119 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
interface/package.json
View File

@@ -28,7 +28,7 @@
"@table-library/react-table-library": "4.1.7",
"@types/lodash-es": "^4.17.10",
"@types/node": "^20.8.7",
"@types/react": "^18.2.30",
"@types/react": "^18.2.31",
"@types/react-dom": "^18.2.14",
"@types/react-router-dom": "^5.3.3",
"alova": "^2.13.1",
@@ -53,7 +53,7 @@
"@typescript-eslint/eslint-plugin": "^6.8.0",
"@typescript-eslint/parser": "^6.8.0",
"concurrently": "^8.2.2",
"eslint": "^8.51.0",
"eslint": "^8.52.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-prettier": "^9.0.0",

11
interface/src/contexts/authentication/Authentication.tsx
View File

@@ -1,6 +1,6 @@
import { useRequest } from 'alova';
import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { redirect } from 'react-router-dom';
import { toast } from 'react-toastify';
import { AuthenticationContext } from './context';
import type { FC } from 'react';
@@ -15,8 +15,6 @@ import { useI18nContext } from 'i18n/i18n-react';
const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
const { LL } = useI18nContext();
const navigate = useNavigate();
const [initialized, setInitialized] = useState<boolean>(false);
const [me, setMe] = useState<Me>();
@@ -36,11 +34,12 @@ const Authentication: FC<RequiredChildrenProps> = ({ children }) => {
}
};
const signOut = (redirect: boolean) => {
const signOut = (doRedirect: boolean) => {
AuthenticationApi.clearAccessToken();
setMe(undefined);
if (redirect) {
navigate('/');
if (doRedirect) {
// navigate('/');
redirect('/');
}
};

28
interface/src/project/DashboardDevices.tsx
View File

@@ -1,6 +1,7 @@
import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
import EditIcon from '@mui/icons-material/Edit';
import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
import DownloadIcon from '@mui/icons-material/GetApp';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -35,6 +36,7 @@ import { useRequest } from 'alova';
import { useState, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
import { IconContext } from 'react-icons';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
import DashboardDevicesDialog from './DashboardDevicesDialog';
import DeviceIcon from './DeviceIcon';
@@ -62,6 +64,8 @@ const DashboardDevices: FC = () => {
const [showDeviceInfo, setShowDeviceInfo] = useState<boolean>(false);
const [selectedDevice, setSelectedDevice] = useState<number>();
const navigate = useNavigate();
const { data: coreData, send: readCoreData } = useRequest(() => EMSESP.readCoreData(), {
initialData: {
connected: true,
@@ -264,13 +268,16 @@ const DashboardDevices: FC = () => {
}, [escFunction]);
const refreshData = () => {
if (deviceValueDialogOpen) {
return;
if (!deviceValueDialogOpen) {
selectedDevice ? void readDeviceData(selectedDevice) : void readCoreData();
}
if (selectedDevice) {
void readDeviceData(selectedDevice);
};
const customize = () => {
if (selectedDevice == 99) {
navigate('/settings/customentities');
} else {
void readCoreData();
navigate('/settings/customization', { state: selectedDevice });
}
};
@@ -496,10 +503,19 @@ const DashboardDevices: FC = () => {
<Grid container justifyContent="space-between">
<Typography sx={{ ml: 1 }} variant="subtitle2" color="primary">
{shown_data.length + ' ' + LL.ENTITIES(shown_data.length)}
{LL.SHOWING() +
' ' +
shown_data.length +
'/' +
coreData.devices[deviceIndex].e +
' ' +
LL.ENTITIES(shown_data.length)}
<IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
<IconButton onClick={customize}>
<FormatListNumberedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
<IconButton onClick={handleDownloadCsv}>
<DownloadIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>

88
interface/src/project/SettingsCustomization.tsx
View File

@@ -23,7 +23,7 @@ import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-li
import { useTheme } from '@table-library/react-table-library/theme';
import { useRequest } from 'alova';
import { useState, useEffect, useCallback } from 'react';
import { unstable_useBlocker as useBlocker } from 'react-router-dom';
import { unstable_useBlocker as useBlocker, useLocation } from 'react-router-dom';
import { toast } from 'react-toastify';
import EntityMaskToggle from './EntityMaskToggle';
@@ -52,19 +52,23 @@ const SettingsCustomization: FC = () => {
const [restarting, setRestarting] = useState<boolean>(false);
const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
const [deviceEntities, setDeviceEntities] = useState<DeviceEntity[]>([]);
const [selectedDevice, setSelectedDevice] = useState<number>(-1);
const [confirmReset, setConfirmReset] = useState<boolean>(false);
const [selectedFilters, setSelectedFilters] = useState<number>(0);
const [search, setSearch] = useState('');
const [selectedDeviceEntity, setSelectedDeviceEntity] = useState<DeviceEntity>();
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
// fetch devices first
const { data: devices } = useRequest(EMSESP.readDevices);
// const { state } = useLocation();
const [selectedDevice, setSelectedDevice] = useState<number>(useLocation().state || -1);
const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
const { send: resetCustomizations } = useRequest(EMSESP.resetCustomizations(), {
immediate: false
});
const { data: devices } = useRequest(EMSESP.readDevices);
const { send: writeCustomizationEntities } = useRequest((data) => EMSESP.writeCustomizationEntities(data), {
immediate: false
});
@@ -176,6 +180,22 @@ const SettingsCustomization: FC = () => {
}
}, [deviceEntities]);
useEffect(() => {
if (devices && selectedDevice !== -1) {
void readDeviceEntities(selectedDevice);
const id = devices.devices.findIndex((d) => d.i === selectedDevice);
if (id === -1) {
setSelectedDevice(-1);
setSelectedDeviceName('');
} else {
setSelectedDeviceName(devices.devices[id].tn || '');
setNumChanges(0);
setRestartNeeded(false);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [devices, selectedDevice]);
const restart = async () => {
await restartCommand().catch((error) => {
toast.error(error.message);
@@ -246,16 +266,6 @@ const SettingsCustomization: FC = () => {
);
};
const changeSelectedDevice = (event: React.ChangeEvent<HTMLInputElement>) => {
if (devices) {
const selected_device = parseInt(event.target.value, 10);
setSelectedDevice(selected_device);
setNumChanges(0);
void readDeviceEntities(devices?.devices[selected_device].i);
setRestartNeeded(false);
}
};
const resetCustomization = async () => {
try {
await resetCustomizations();
@@ -314,30 +324,21 @@ const SettingsCustomization: FC = () => {
return;
}
await writeCustomizationEntities({ id: devices?.devices[selectedDevice].i, entity_ids: masked_entities }).catch(
(error) => {
if (error.message === 'Reboot required') {
setRestartNeeded(true);
} else {
toast.error(error.message);
}
await writeCustomizationEntities({ id: selectedDevice, entity_ids: masked_entities }).catch((error) => {
if (error.message === 'Reboot required') {
setRestartNeeded(true);
} else {
toast.error(error.message);
}
);
});
setOriginalSettings(deviceEntities);
}
};
const renderDeviceList = () => (
<>
<Box mb={2} color="warning.main">
<Box mb={1} color="warning.main">
<Typography variant="body2">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
<Typography variant="body2" mt={1}>
<OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}&nbsp;&nbsp;
<OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}&nbsp;&nbsp;
<OptionIcon type="api_mqtt_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
<OptionIcon type="web_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
<OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
</Typography>
</Box>
<TextField
name="device"
@@ -346,15 +347,15 @@ const SettingsCustomization: FC = () => {
fullWidth
value={selectedDevice}
disabled={numChanges !== 0}
onChange={changeSelectedDevice}
onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
margin="normal"
select
>
<MenuItem disabled key={-1} value={-1}>
{LL.SELECT_DEVICE()}...
</MenuItem>
{devices.devices.map((device: DeviceShort, index) => (
<MenuItem key={index} value={index}>
{devices.devices.map((device: DeviceShort) => (
<MenuItem key={device.i} value={device.i}>
{device.s}
</MenuItem>
))}
@@ -363,14 +364,19 @@ const SettingsCustomization: FC = () => {
);
const renderDeviceData = () => {
if (deviceEntities.length === 0) {
return;
}
const shown_data = deviceEntities.filter((de) => filter_entity(de));
return (
<>
<Box color="warning.main">
<Typography variant="body2" mt={1}>
<OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}&nbsp;&nbsp;
<OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}&nbsp;&nbsp;
<OptionIcon type="api_mqtt_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
<OptionIcon type="web_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
<OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
</Typography>
</Box>
<Grid container mb={1} mt={0} spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item xs={2}>
<TextField
@@ -443,7 +449,7 @@ const SettingsCustomization: FC = () => {
</Grid>
<Grid item>
<Typography variant="subtitle2" color="primary">
{LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
{LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}&nbsp;{LL.ENTITIES(deviceEntities.length)}
</Typography>
</Grid>
</Grid>
@@ -467,7 +473,7 @@ const SettingsCustomization: FC = () => {
</Cell>
<Cell>
{formatName(de, false)}&nbsp;(
<Link target="_blank" href={APIURL + devices?.devices[selectedDevice].tn + '/' + de.id}>
<Link target="_blank" href={APIURL + selectedDeviceName + '/' + de.id}>
{de.id}
</Link>
)
@@ -506,7 +512,7 @@ const SettingsCustomization: FC = () => {
{LL.DEVICE_ENTITIES()}
</Typography>
{devices && renderDeviceList()}
{renderDeviceData()}
{deviceEntities && renderDeviceData()}
{restartNeeded && (
<MessageBox my={2} level="warning" message={LL.RESTART_TEXT()}>
<Button startIcon={<PowerSettingsNewIcon />} variant="contained" color="error" onClick={restart}>
@@ -523,7 +529,7 @@ const SettingsCustomization: FC = () => {
startIcon={<CancelIcon />}
variant="outlined"
color="secondary"
onClick={() => devices && readDeviceEntities(devices.devices[selectedDevice].i)}
onClick={() => devices && readDeviceEntities(selectedDevice)}
>
{LL.CANCEL()}
</Button>

58
interface/yarn.lock
View File

@@ -658,10 +658,10 @@ __metadata:
languageName: node
linkType: hard
"@eslint/js@npm:8.51.0":
version: 8.51.0
resolution: "@eslint/js@npm:8.51.0"
checksum: 1641f02c787a6477bf4b054afb8113abdca552b8c222520b5ee44d85352294dafd4a34f0e510b1e38a02fc27c1f68547cb6c2abbea891d20688f474440266af3
"@eslint/js@npm:8.52.0":
version: 8.52.0
resolution: "@eslint/js@npm:8.52.0"
checksum: 86beff213d0ae4ced203a922b74e2cc4d767d109e7815f985bf648946ba072198977102e32afc9fa04f7825a6de83a831874f6b6675ba0c1d0743ade2dc2d53d
languageName: node
linkType: hard
@@ -703,14 +703,14 @@ __metadata:
languageName: node
linkType: hard
"@humanwhocodes/config-array@npm:^0.11.11":
version: 0.11.11
resolution: "@humanwhocodes/config-array@npm:0.11.11"
"@humanwhocodes/config-array@npm:^0.11.13":
version: 0.11.13
resolution: "@humanwhocodes/config-array@npm:0.11.13"
dependencies:
"@humanwhocodes/object-schema": "npm:^1.2.1"
"@humanwhocodes/object-schema": "npm:^2.0.1"
debug: "npm:^4.1.1"
minimatch: "npm:^3.0.5"
checksum: 4aad64bc4c68ec99a72c91ad9a8a9070e8da47e8fc4f51eefa2eaf56f4b0cae17dfc3ff82eb9268298f687b5bb3b68669ff542203c77bcd400dc27924d56cad6
checksum: 9f655e1df7efa5a86822cd149ca5cef57240bb8ffd728f0c07cc682cc0a15c6bdce68425fbfd58f9b3e8b16f79b3fd8cb1e96b10c434c9a76f20b2a89f213272
languageName: node
linkType: hard
@@ -721,10 +721,10 @@ __metadata:
languageName: node
linkType: hard
"@humanwhocodes/object-schema@npm:^1.2.1":
version: 1.2.1
resolution: "@humanwhocodes/object-schema@npm:1.2.1"
checksum: b48a8f87fcd5fdc4ac60a31a8bf710d19cc64556050575e6a35a4a48a8543cf8cde1598a65640ff2cdfbfd165b38f9db4fa3782bea7848eb585cc3db824002e6
"@humanwhocodes/object-schema@npm:^2.0.1":
version: 2.0.1
resolution: "@humanwhocodes/object-schema@npm:2.0.1"
checksum: dbddfd0465aecf92ed845ec30d06dba3f7bb2496d544b33b53dac7abc40370c0e46b8787b268d24a366730d5eeb5336ac88967232072a183905ee4abf7df4dab
languageName: node
linkType: hard
@@ -1370,14 +1370,14 @@ __metadata:
languageName: node
linkType: hard
"@types/react@npm:^18.2.30":
version: 18.2.30
resolution: "@types/react@npm:18.2.30"
"@types/react@npm:^18.2.31":
version: 18.2.31
resolution: "@types/react@npm:18.2.31"
dependencies:
"@types/prop-types": "npm:*"
"@types/scheduler": "npm:*"
csstype: "npm:^3.0.2"
checksum: dcad8aed0d0bf5731f4c6a7e8d28d8f571bd031c6c94edbcc1b7ab2c86e7cf61ae49d66c3229e1849fb4b82c5aa7be7c40e71ac5c2d7fef4eafb7a3b4abd25d6
checksum: ac9f42f1cd6ee34329ea7a81894877dc333a2dc86141545e23121b07dcd7cea902bedc6b645ce017c92610bd8cd2c6e25dbba581379889a705314f3c759371bf
languageName: node
linkType: hard
@@ -1535,6 +1535,13 @@ __metadata:
languageName: node
linkType: hard
"@ungap/structured-clone@npm:^1.2.0":
version: 1.2.0
resolution: "@ungap/structured-clone@npm:1.2.0"
checksum: c6fe89a505e513a7592e1438280db1c075764793a2397877ff1351721fe8792a966a5359769e30242b3cd023f2efb9e63ca2ca88019d73b564488cc20e3eab12
languageName: node
linkType: hard
"EMS-ESP@workspace:.":
version: 0.0.0-use.local
resolution: "EMS-ESP@workspace:."
@@ -1550,7 +1557,7 @@ __metadata:
"@table-library/react-table-library": "npm:4.1.7"
"@types/lodash-es": "npm:^4.17.10"
"@types/node": "npm:^20.8.7"
"@types/react": "npm:^18.2.30"
"@types/react": "npm:^18.2.31"
"@types/react-dom": "npm:^18.2.14"
"@types/react-router-dom": "npm:^5.3.3"
"@typescript-eslint/eslint-plugin": "npm:^6.8.0"
@@ -1558,7 +1565,7 @@ __metadata:
alova: "npm:^2.13.1"
async-validator: "npm:^4.2.5"
concurrently: "npm:^8.2.2"
eslint: "npm:^8.51.0"
eslint: "npm:^8.52.0"
eslint-config-airbnb: "npm:^19.0.4"
eslint-config-airbnb-typescript: "npm:^17.1.0"
eslint-config-prettier: "npm:^9.0.0"
@@ -3645,17 +3652,18 @@ __metadata:
languageName: node
linkType: hard
"eslint@npm:^8.51.0":
version: 8.51.0
resolution: "eslint@npm:8.51.0"
"eslint@npm:^8.52.0":
version: 8.52.0
resolution: "eslint@npm:8.52.0"
dependencies:
"@eslint-community/eslint-utils": "npm:^4.2.0"
"@eslint-community/regexpp": "npm:^4.6.1"
"@eslint/eslintrc": "npm:^2.1.2"
"@eslint/js": "npm:8.51.0"
"@humanwhocodes/config-array": "npm:^0.11.11"
"@eslint/js": "npm:8.52.0"
"@humanwhocodes/config-array": "npm:^0.11.13"
"@humanwhocodes/module-importer": "npm:^1.0.1"
"@nodelib/fs.walk": "npm:^1.2.8"
"@ungap/structured-clone": "npm:^1.2.0"
ajv: "npm:^6.12.4"
chalk: "npm:^4.0.0"
cross-spawn: "npm:^7.0.2"
@@ -3688,7 +3696,7 @@ __metadata:
text-table: "npm:^0.2.0"
bin:
eslint: bin/eslint.js
checksum: 1f3720dd2a8e25198815c33720dd66ceee88d7527b3b6f2da57b57d0476440af29da2a1d9f28515660afb3345e4f84438562772d6b5fc19b6fab7c77c478ebca
checksum: 01784ab15351d749bc95446039ed7acd5124f7cc84acdbf98c7199272eae06212a8f3ea4a9b47e7cc54ab17ca094c3a664bbfc3002c7de27936220e278b5028a
languageName: node
linkType: hard

19
mock-api/server.js
View File

@@ -1816,7 +1816,7 @@ const emsesp_devicedata_99 = {
};
// CUSTOM ENTITIES
let emsesp_entities = {
let emsesp_customentities = {
// entities: []
entities: [
{
@@ -1876,10 +1876,10 @@ let emsesp_schedule = {
};
// CUSTOMIZATIONS
const emsesp_deviceentities_1 = [{}];
const emsesp_deviceentities_3 = [{}];
const emsesp_deviceentities_5 = [{}];
const emsesp_deviceentities_6 = [{}];
const emsesp_deviceentities_1 = [{ v: 'dummy value', n: 'dummy name', id: 'dummy', m: 0, w: false }];
const emsesp_deviceentities_3 = [{ v: 'dummy value', n: 'dummy name', id: 'dummy', m: 0, w: false }];
const emsesp_deviceentities_5 = [{ v: 'dummy value', n: 'dummy name', id: 'dummy', m: 0, w: false }];
const emsesp_deviceentities_6 = [{ v: 'dummy value', n: 'dummy name', id: 'dummy', m: 0, w: false }];
const emsesp_deviceentities_2 = [
{
@@ -2205,6 +2205,7 @@ rest_server.get(EMSESP_SENSOR_DATA_ENDPOINT, (req, res) => {
res.json(emsesp_sensordata);
});
rest_server.get(EMSESP_DEVICES_ENDPOINT, (req, res) => {
console.log('send back list of devices...');
res.json(emsesp_devices);
});
rest_server.post(EMSESP_SCANDEVICES_ENDPOINT, (req, res) => {
@@ -2398,7 +2399,7 @@ rest_server.post(EMSESP_WRITE_SCHEDULE_ENDPOINT, (req, res) => {
rest_server.post(EMSESP_WRITE_ENTITIES_ENDPOINT, (req, res) => {
console.log('write entities');
console.log(req.body);
emsesp_entities = req.body;
emsesp_customentities = req.body;
res.sendStatus(200);
});
@@ -2730,7 +2731,7 @@ rest_server.get(GET_CUSTOMIZATIONS_ENDPOINT, (req, res) => {
const GET_ENTITIES_ENDPOINT = REST_ENDPOINT_ROOT + 'getEntities';
rest_server.get(GET_ENTITIES_ENDPOINT, (req, res) => {
console.log('getEntities');
res.json(emsesp_entities);
res.json(emsesp_customentities);
});
const GET_SCHEDULE_ENDPOINT = REST_ENDPOINT_ROOT + 'getSchedule';
@@ -2745,10 +2746,10 @@ rest_server.get(SCHEDULE_ENDPOINT, (req, res) => {
res.json(emsesp_schedule);
});
const ENTITIES_ENDPOINT = REST_ENDPOINT_ROOT + 'entities';
const ENTITIES_ENDPOINT = REST_ENDPOINT_ROOT + 'customentities';
rest_server.get(ENTITIES_ENDPOINT, (req, res) => {
console.log('Sending Custom Entities data');
res.json(emsesp_entities);
res.json(emsesp_customentities);
});
// start server