diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx index 235fb8ece..bac7800a1 100644 --- a/interface/src/project/DashboardData.tsx +++ b/interface/src/project/DashboardData.tsx @@ -661,7 +661,7 @@ const DashboardData: FC = () => { TYPE DESCRIPTION ENTITIES - + @@ -767,7 +767,7 @@ const DashboardData: FC = () => { VALUE - + diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx index 88fa675e9..e392cd03e 100644 --- a/interface/src/project/SettingsCustomization.tsx +++ b/interface/src/project/SettingsCustomization.tsx @@ -10,6 +10,7 @@ import { DialogContent, DialogTitle, ToggleButton, + IconButton, ToggleButtonGroup } from '@mui/material'; @@ -36,7 +37,7 @@ import * as EMSESP from './api'; import { extractErrorMessage } from '../utils'; -import { DeviceShort, Devices, DeviceEntity } from './types'; +import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types'; const SettingsCustomization: FC = () => { const { enqueueSnackbar } = useSnackbar(); @@ -46,16 +47,20 @@ const SettingsCustomization: FC = () => { const [errorMessage, setErrorMessage] = useState(); const [selectedDevice, setSelectedDevice] = useState(0); const [confirmReset, setConfirmReset] = useState(false); + const [selectedFilters, setSelectedFilters] = useState(DeviceEntityMask.DV_FAVORITE); // eslint-disable-next-line const [masks, setMasks] = useState(() => ['']); const entities_theme = useTheme({ + Table: ` + height: 100%; + `, BaseRow: ` font-size: 14px; color: white; height: 32px; - `, + `, HeaderRow: ` text-transform: uppercase; background-color: black; @@ -88,14 +93,19 @@ const SettingsCustomization: FC = () => { border-top: 1px solid #177ac9; border-bottom: 1px solid #177ac9; } - `, + `, BaseCell: ` border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; &:nth-of-type(1) { - min-width: 128px; - width: 128px; + width: 130px; + } + &:nth-of-type(2) { + flex: 1; + } + &:last-of-type { + text-align: right; } ` }); @@ -192,7 +202,7 @@ const SettingsCustomization: FC = () => { Select a device and customize each of its entities using the options: - +  mark it as favorite to be listed at the top of the Dashboard @@ -263,10 +273,15 @@ const SettingsCustomization: FC = () => { }; const renderDeviceData = () => { - if (devices?.devices.length === 0 || !deviceEntities) { + if (devices?.devices.length === 0 || deviceEntities[0].id === '') { return; } + const hasMask = (de: DeviceEntity) => { + return de.m & selectedFilters; + return (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE; + }; + const setMask = (de: DeviceEntity, newMask: string[]) => { var new_mask = 0; for (let entry of newMask) { @@ -295,62 +310,95 @@ const SettingsCustomization: FC = () => { }; return ( - - {(tableList: any) => ( - <> -
- - OPTIONS - - - - VALUE - - -
- - {tableList.map((de: DeviceEntity) => ( - - - { - setMask(de, mask); - }} + <> + setSelectedDevice(8)}> + + + + { + // setMask(de, mask); + }} + > + + + + + + + + + + + + + + +
hasMask(de)) }} + theme={entities_theme} + sort={entity_sort} + layout={{ custom: true, horizontalScroll: true }} + > + {(tableList: any) => ( + <> +
+ + OPTIONS + +
+ NAME + + + VALUE + + + + + {tableList.map((de: DeviceEntity) => ( + + + { + setMask(de, mask); + }} + > + + + + + + + + + + + + + + + + {de.id} ({de.s}) + + {formatValue(de.v)} + + ))} + + + )} + + ); }; @@ -390,12 +438,18 @@ const SettingsCustomization: FC = () => { const content = () => { return ( - <> +
Device Entities {renderDeviceList()} - {renderDeviceData()} +
+ {renderDeviceData()} +
@@ -416,7 +470,7 @@ const SettingsCustomization: FC = () => { {renderResetDialog()} - +
); }; diff --git a/mock-api/server.js b/mock-api/server.js index 972cd7ccc..bfd5a0c8e 100644 --- a/mock-api/server.js +++ b/mock-api/server.js @@ -698,7 +698,7 @@ const emsesp_deviceentities_4 = [ v: 16, id: 'hc2 selected room temperature', s: 'hc2/seltemp', - m: 0, + m: 8, w: true, }, { @@ -916,15 +916,15 @@ function updateMask(entity, de, dd) { objIndex = de.findIndex((obj) => obj.s == name) if (objIndex !== -1) { de[objIndex].m = new_mask - const fullname = de[objIndex].n - objIndex = dd.data.findIndex((obj) => obj.n.slice(2) == fullname) + const fullname = de[objIndex].id + objIndex = dd.data.findIndex((obj) => obj.id.slice(2) == fullname) if (objIndex !== -1) { // see if the mask has changed - const old_mask = parseInt(dd.data[objIndex].n.slice(0, 2), 16) + const old_mask = parseInt(dd.data[objIndex].id.slice(0, 2), 16) if (old_mask !== new_mask) { const mask_hex = entity.slice(0, 2) - console.log('Updating ' + dd.data[objIndex].n + ' -> ' + mask_hex + fullname) - dd.data[objIndex].n = mask_hex + fullname + console.log('Updating ' + dd.data[objIndex].id + ' -> ' + mask_hex + fullname) + dd.data[objIndex].id = mask_hex + fullname } } } else { @@ -934,6 +934,7 @@ function updateMask(entity, de, dd) { rest_server.post(EMSESP_MASKED_ENTITIES_ENDPOINT, (req, res) => { const id = req.body.id + console.log('customization id = ' + id) console.log(req.body.entity_ids) for (const entity of req.body.entity_ids) { if (id === 1) {