Skip to content

Commit 7a36c5e

Browse files
proddyproddy
committed
quick link from device entities to custom entities page (the list icon)
1 parent 15b9751 commit 7a36c5e

File tree

2 files changed

+69
-47
lines changed

2 files changed

+69
-47
lines changed

‎interface/src/project/DashboardDevices.tsx

+22-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
22
import EditIcon from '@mui/icons-material/Edit';
33
import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
4+
import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
45
import DownloadIcon from '@mui/icons-material/GetApp';
56
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
67
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -35,6 +36,7 @@ import { useRequest } from 'alova';
3536
import { useState, useContext, useEffect, useCallback, useLayoutEffect } from 'react';
3637

3738
import { IconContext } from 'react-icons';
39+
import { useNavigate } from 'react-router-dom';
3840
import { toast } from 'react-toastify';
3941
import DashboardDevicesDialog from './DashboardDevicesDialog';
4042
import DeviceIcon from './DeviceIcon';
@@ -62,6 +64,8 @@ const DashboardDevices: FC = () => {
6264
const [showDeviceInfo, setShowDeviceInfo] = useState<boolean>(false);
6365
const [selectedDevice, setSelectedDevice] = useState<number>();
6466

67+
const navigate = useNavigate();
68+
6569
const { data: coreData, send: readCoreData } = useRequest(() => EMSESP.readCoreData(), {
6670
initialData: {
6771
connected: true,
@@ -264,13 +268,16 @@ const DashboardDevices: FC = () => {
264268
}, [escFunction]);
265269

266270
const refreshData = () => {
267-
if (deviceValueDialogOpen) {
268-
return;
271+
if (!deviceValueDialogOpen) {
272+
selectedDevice ? void readDeviceData(selectedDevice) : void readCoreData();
269273
}
270-
if (selectedDevice) {
271-
void readDeviceData(selectedDevice);
274+
};
275+
276+
const customize = () => {
277+
if (selectedDevice == 99) {
278+
navigate('/settings/customentities');
272279
} else {
273-
void readCoreData();
280+
navigate('/settings/customization', { state: selectedDevice });
274281
}
275282
};
276283

@@ -496,10 +503,19 @@ const DashboardDevices: FC = () => {
496503

497504
<Grid container justifyContent="space-between">
498505
<Typography sx={{ ml: 1 }} variant="subtitle2" color="primary">
499-
{shown_data.length + ' ' + LL.ENTITIES(shown_data.length)}
506+
{LL.SHOWING() +
507+
' ' +
508+
shown_data.length +
509+
'/' +
510+
coreData.devices[deviceIndex].e +
511+
' ' +
512+
LL.ENTITIES(shown_data.length)}
500513
<IconButton onClick={() => setShowDeviceInfo(true)}>
501514
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
502515
</IconButton>
516+
<IconButton onClick={customize}>
517+
<FormatListNumberedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
518+
</IconButton>
503519
<IconButton onClick={handleDownloadCsv}>
504520
<DownloadIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
505521
</IconButton>

‎interface/src/project/SettingsCustomization.tsx

+47-41
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { Table, Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-li
2323
import { useTheme } from '@table-library/react-table-library/theme';
2424
import { useRequest } from 'alova';
2525
import { useState, useEffect, useCallback } from 'react';
26-
import { unstable_useBlocker as useBlocker } from 'react-router-dom';
26+
import { unstable_useBlocker as useBlocker, useLocation } from 'react-router-dom';
2727
import { toast } from 'react-toastify';
2828

2929
import EntityMaskToggle from './EntityMaskToggle';
@@ -52,19 +52,23 @@ const SettingsCustomization: FC = () => {
5252
const [restarting, setRestarting] = useState<boolean>(false);
5353
const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
5454
const [deviceEntities, setDeviceEntities] = useState<DeviceEntity[]>([]);
55-
const [selectedDevice, setSelectedDevice] = useState<number>(-1);
5655
const [confirmReset, setConfirmReset] = useState<boolean>(false);
5756
const [selectedFilters, setSelectedFilters] = useState<number>(0);
5857
const [search, setSearch] = useState('');
5958
const [selectedDeviceEntity, setSelectedDeviceEntity] = useState<DeviceEntity>();
6059
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
6160

61+
// fetch devices first
62+
const { data: devices } = useRequest(EMSESP.readDevices);
63+
64+
// const { state } = useLocation();
65+
const [selectedDevice, setSelectedDevice] = useState<number>(useLocation().state || -1);
66+
const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
67+
6268
const { send: resetCustomizations } = useRequest(EMSESP.resetCustomizations(), {
6369
immediate: false
6470
});
6571

66-
const { data: devices } = useRequest(EMSESP.readDevices);
67-
6872
const { send: writeCustomizationEntities } = useRequest((data) => EMSESP.writeCustomizationEntities(data), {
6973
immediate: false
7074
});
@@ -176,6 +180,22 @@ const SettingsCustomization: FC = () => {
176180
}
177181
}, [deviceEntities]);
178182

183+
useEffect(() => {
184+
if (devices && selectedDevice !== -1) {
185+
void readDeviceEntities(selectedDevice);
186+
const id = devices.devices.findIndex((d) => d.i === selectedDevice);
187+
if (id === -1) {
188+
setSelectedDevice(-1);
189+
setSelectedDeviceName('');
190+
} else {
191+
setSelectedDeviceName(devices.devices[id].tn || '');
192+
setNumChanges(0);
193+
setRestartNeeded(false);
194+
}
195+
}
196+
// eslint-disable-next-line react-hooks/exhaustive-deps
197+
}, [devices, selectedDevice]);
198+
179199
const restart = async () => {
180200
await restartCommand().catch((error) => {
181201
toast.error(error.message);
@@ -246,16 +266,6 @@ const SettingsCustomization: FC = () => {
246266
);
247267
};
248268

249-
const changeSelectedDevice = (event: React.ChangeEvent<HTMLInputElement>) => {
250-
if (devices) {
251-
const selected_device = parseInt(event.target.value, 10);
252-
setSelectedDevice(selected_device);
253-
setNumChanges(0);
254-
void readDeviceEntities(devices?.devices[selected_device].i);
255-
setRestartNeeded(false);
256-
}
257-
};
258-
259269
const resetCustomization = async () => {
260270
try {
261271
await resetCustomizations();
@@ -314,30 +324,21 @@ const SettingsCustomization: FC = () => {
314324
return;
315325
}
316326

317-
await writeCustomizationEntities({ id: devices?.devices[selectedDevice].i, entity_ids: masked_entities }).catch(
318-
(error) => {
319-
if (error.message === 'Reboot required') {
320-
setRestartNeeded(true);
321-
} else {
322-
toast.error(error.message);
323-
}
327+
await writeCustomizationEntities({ id: selectedDevice, entity_ids: masked_entities }).catch((error) => {
328+
if (error.message === 'Reboot required') {
329+
setRestartNeeded(true);
330+
} else {
331+
toast.error(error.message);
324332
}
325-
);
333+
});
326334
setOriginalSettings(deviceEntities);
327335
}
328336
};
329337

330338
const renderDeviceList = () => (
331339
<>
332-
<Box mb={2} color="warning.main">
340+
<Box mb={1} color="warning.main">
333341
<Typography variant="body2">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
334-
<Typography variant="body2" mt={1}>
335-
<OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}&nbsp;&nbsp;
336-
<OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}&nbsp;&nbsp;
337-
<OptionIcon type="api_mqtt_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
338-
<OptionIcon type="web_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
339-
<OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
340-
</Typography>
341342
</Box>
342343
<TextField
343344
name="device"
@@ -346,15 +347,15 @@ const SettingsCustomization: FC = () => {
346347
fullWidth
347348
value={selectedDevice}
348349
disabled={numChanges !== 0}
349-
onChange={changeSelectedDevice}
350+
onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
350351
margin="normal"
351352
select
352353
>
353354
<MenuItem disabled key={-1} value={-1}>
354355
{LL.SELECT_DEVICE()}...
355356
</MenuItem>
356-
{devices.devices.map((device: DeviceShort, index) => (
357-
<MenuItem key={index} value={index}>
357+
{devices.devices.map((device: DeviceShort) => (
358+
<MenuItem key={device.i} value={device.i}>
358359
{device.s}
359360
</MenuItem>
360361
))}
@@ -363,14 +364,19 @@ const SettingsCustomization: FC = () => {
363364
);
364365

365366
const renderDeviceData = () => {
366-
if (deviceEntities.length === 0) {
367-
return;
368-
}
369-
370367
const shown_data = deviceEntities.filter((de) => filter_entity(de));
371368

372369
return (
373370
<>
371+
<Box color="warning.main">
372+
<Typography variant="body2" mt={1}>
373+
<OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}&nbsp;&nbsp;
374+
<OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}&nbsp;&nbsp;
375+
<OptionIcon type="api_mqtt_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
376+
<OptionIcon type="web_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
377+
<OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
378+
</Typography>
379+
</Box>
374380
<Grid container mb={1} mt={0} spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
375381
<Grid item xs={2}>
376382
<TextField
@@ -443,7 +449,7 @@ const SettingsCustomization: FC = () => {
443449
</Grid>
444450
<Grid item>
445451
<Typography variant="subtitle2" color="primary">
446-
{LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
452+
{LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}&nbsp;{LL.ENTITIES(deviceEntities.length)}
447453
</Typography>
448454
</Grid>
449455
</Grid>
@@ -467,7 +473,7 @@ const SettingsCustomization: FC = () => {
467473
</Cell>
468474
<Cell>
469475
{formatName(de, false)}&nbsp;(
470-
<Link target="_blank" href={APIURL + devices?.devices[selectedDevice].tn + '/' + de.id}>
476+
<Link target="_blank" href={APIURL + selectedDeviceName + '/' + de.id}>
471477
{de.id}
472478
</Link>
473479
)
@@ -506,7 +512,7 @@ const SettingsCustomization: FC = () => {
506512
{LL.DEVICE_ENTITIES()}
507513
</Typography>
508514
{devices && renderDeviceList()}
509-
{renderDeviceData()}
515+
{deviceEntities && renderDeviceData()}
510516
{restartNeeded && (
511517
<MessageBox my={2} level="warning" message={LL.RESTART_TEXT()}>
512518
<Button startIcon={<PowerSettingsNewIcon />} variant="contained" color="error" onClick={restart}>
@@ -523,7 +529,7 @@ const SettingsCustomization: FC = () => {
523529
startIcon={<CancelIcon />}
524530
variant="outlined"
525531
color="secondary"
526-
onClick={() => devices && readDeviceEntities(devices.devices[selectedDevice].i)}
532+
onClick={() => devices && readDeviceEntities(selectedDevice)}
527533
>
528534
{LL.CANCEL()}
529535
</Button>

0 commit comments

Comments
 (0)