diff --git a/interface/package.json b/interface/package.json index a8e216820..43fd86d71 100644 --- a/interface/package.json +++ b/interface/package.json @@ -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", diff --git a/interface/src/contexts/authentication/Authentication.tsx b/interface/src/contexts/authentication/Authentication.tsx index bf9e05bae..bc972aaa1 100644 --- a/interface/src/contexts/authentication/Authentication.tsx +++ b/interface/src/contexts/authentication/Authentication.tsx @@ -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 = ({ children }) => { const { LL } = useI18nContext(); - const navigate = useNavigate(); - const [initialized, setInitialized] = useState(false); const [me, setMe] = useState(); @@ -36,11 +34,12 @@ const Authentication: FC = ({ children }) => { } }; - const signOut = (redirect: boolean) => { + const signOut = (doRedirect: boolean) => { AuthenticationApi.clearAccessToken(); setMe(undefined); - if (redirect) { - navigate('/'); + if (doRedirect) { + // navigate('/'); + redirect('/'); } }; diff --git a/interface/src/project/DashboardDevices.tsx b/interface/src/project/DashboardDevices.tsx index acf4f1fbc..3d00c1d9c 100644 --- a/interface/src/project/DashboardDevices.tsx +++ b/interface/src/project/DashboardDevices.tsx @@ -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(false); const [selectedDevice, setSelectedDevice] = useState(); + 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 = () => { - {shown_data.length + ' ' + LL.ENTITIES(shown_data.length)} + {LL.SHOWING() + + ' ' + + shown_data.length + + '/' + + coreData.devices[deviceIndex].e + + ' ' + + LL.ENTITIES(shown_data.length)} setShowDeviceInfo(true)}> + + + diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx index 110535f34..183d32778 100644 --- a/interface/src/project/SettingsCustomization.tsx +++ b/interface/src/project/SettingsCustomization.tsx @@ -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(false); const [restartNeeded, setRestartNeeded] = useState(false); const [deviceEntities, setDeviceEntities] = useState([]); - const [selectedDevice, setSelectedDevice] = useState(-1); const [confirmReset, setConfirmReset] = useState(false); const [selectedFilters, setSelectedFilters] = useState(0); const [search, setSearch] = useState(''); const [selectedDeviceEntity, setSelectedDeviceEntity] = useState(); const [dialogOpen, setDialogOpen] = useState(false); + // fetch devices first + const { data: devices } = useRequest(EMSESP.readDevices); + + // const { state } = useLocation(); + const [selectedDevice, setSelectedDevice] = useState(useLocation().state || -1); + const [selectedDeviceName, setSelectedDeviceName] = useState(''); + 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) => { - 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 = () => ( <> - + {LL.CUSTOMIZATIONS_HELP_1()}. - - ={LL.CUSTOMIZATIONS_HELP_2()}   - ={LL.CUSTOMIZATIONS_HELP_3()}   - ={LL.CUSTOMIZATIONS_HELP_4()}   - ={LL.CUSTOMIZATIONS_HELP_5()}   - ={LL.CUSTOMIZATIONS_HELP_6()} - { fullWidth value={selectedDevice} disabled={numChanges !== 0} - onChange={changeSelectedDevice} + onChange={(e) => setSelectedDevice(parseInt(e.target.value))} margin="normal" select > {LL.SELECT_DEVICE()}... - {devices.devices.map((device: DeviceShort, index) => ( - + {devices.devices.map((device: DeviceShort) => ( + {device.s} ))} @@ -363,14 +364,19 @@ const SettingsCustomization: FC = () => { ); const renderDeviceData = () => { - if (deviceEntities.length === 0) { - return; - } - const shown_data = deviceEntities.filter((de) => filter_entity(de)); return ( <> + + + ={LL.CUSTOMIZATIONS_HELP_2()}   + ={LL.CUSTOMIZATIONS_HELP_3()}   + ={LL.CUSTOMIZATIONS_HELP_4()}   + ={LL.CUSTOMIZATIONS_HELP_5()}   + ={LL.CUSTOMIZATIONS_HELP_6()} + + { - {LL.SHOWING()} {shown_data.length}/{deviceEntities.length} + {LL.SHOWING()} {shown_data.length}/{deviceEntities.length} {LL.ENTITIES(deviceEntities.length)} @@ -467,7 +473,7 @@ const SettingsCustomization: FC = () => { {formatName(de, false)} ( - + {de.id} ) @@ -506,7 +512,7 @@ const SettingsCustomization: FC = () => { {LL.DEVICE_ENTITIES()} {devices && renderDeviceList()} - {renderDeviceData()} + {deviceEntities && renderDeviceData()} {restartNeeded && ( diff --git a/interface/yarn.lock b/interface/yarn.lock index cffae6de8..ecab06dc3 100644 --- a/interface/yarn.lock +++ b/interface/yarn.lock @@ -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 diff --git a/mock-api/server.js b/mock-api/server.js index 82fc53438..b5e96205e 100644 --- a/mock-api/server.js +++ b/mock-api/server.js @@ -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