Skip to content

Commit

Permalink
link to device entity details from customization page
Browse files Browse the repository at this point in the history
  • Loading branch information
@proddy
proddy committed Jul 24, 2022
1 parent d0bcbb8 commit d12879b
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 44 deletions.
62 changes: 27 additions & 35 deletions interface/src/project/SettingsCustomization.tsx
View file
Expand Up @@ -13,7 +13,8 @@ import {
ToggleButtonGroup,
Tooltip,
Grid,
TextField
TextField,
Link
} from '@mui/material';

import { Table } from '@table-library/react-table-library/table';
Expand All @@ -26,11 +27,6 @@ import { useSnackbar } from 'notistack';
import SaveIcon from '@mui/icons-material/Save';
import CancelIcon from '@mui/icons-material/Cancel';

// import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
// import StarIcon from '@mui/icons-material/Star';
// import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
// import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';

import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
Expand All @@ -48,13 +44,15 @@ import { extractErrorMessage } from '../utils';

import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types';

export const APIURL = window.location.origin + '/api/';

const SettingsCustomization: FC = () => {
const { enqueueSnackbar } = useSnackbar();

const [deviceEntities, setDeviceEntities] = useState<DeviceEntity[]>([{ id: '', v: 0, n: '', m: 0, w: false }]);
const [devices, setDevices] = useState<Devices>();
const [errorMessage, setErrorMessage] = useState<string>();
const [selectedDevice, setSelectedDevice] = useState<number>(0);
const [selectedDevice, setSelectedDevice] = useState<number>(-1);
const [confirmReset, setConfirmReset] = useState<boolean>(false);
const [selectedFilters, setSelectedFilters] = useState<number>(0);
const [search, setSearch] = useState('');
Expand Down Expand Up @@ -94,7 +92,6 @@ const SettingsCustomization: FC = () => {
Row: `
background-color: #1e1e1e;
position: relative;
cursor: pointer;
.td {
border-top: 1px solid #565656;
Expand All @@ -107,11 +104,6 @@ const SettingsCustomization: FC = () => {
font-weight: normal;
}
&:hover .td {
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
}
&:nth-of-type(odd) .td {
background-color: #303030;
}
Expand Down Expand Up @@ -194,7 +186,15 @@ const SettingsCustomization: FC = () => {
} else if (de.n === '') {
return 'Command: ' + de.id;
}
return de.n + ' (' + de.id + ')';
return (
<>
{de.n}&nbsp;(
<Link target="_blank" href={APIURL + devices?.devices[selectedDevice].t + '/' + de.id}>
{de.id}
</Link>
)
</>
);
}

const getMaskNumber = (newMask: string[]) => {
Expand Down Expand Up @@ -239,20 +239,12 @@ const SettingsCustomization: FC = () => {
);
};

function compareDevices(a: DeviceShort, b: DeviceShort) {
if (a.s < b.s) {
return -1;
}
if (a.s > b.s) {
return 1;
}
return 0;
}

const changeSelectedDevice = (event: React.ChangeEvent<HTMLInputElement>) => {
const selected_device = parseInt(event.target.value, 10);
setSelectedDevice(selected_device);
fetchDeviceEntities(selected_device);
if (devices) {
const selected_device = parseInt(event.target.value, 10);
setSelectedDevice(selected_device);
fetchDeviceEntities(devices?.devices[selected_device].i);
}
};

const resetCustomization = async () => {
Expand All @@ -267,7 +259,7 @@ const SettingsCustomization: FC = () => {
};

const saveCustomization = async () => {
if (deviceEntities && selectedDevice) {
if (devices && deviceEntities && selectedDevice !== -1) {
const masked_entities = deviceEntities
.filter((de) => de.m !== de.om)
.map((new_de) => new_de.m.toString(16).padStart(2, '0') + new_de.id);
Expand All @@ -279,7 +271,7 @@ const SettingsCustomization: FC = () => {

try {
const response = await EMSESP.writeMaskedEntities({
id: selectedDevice,
id: devices?.devices[selectedDevice].i,
entity_ids: masked_entities
});
if (response.status === 200) {
Expand All @@ -305,13 +297,13 @@ const SettingsCustomization: FC = () => {
<Typography variant="body2">Select a device and customize each of its entities using the options:</Typography>
<Typography variant="body2">
<OptionIcon type="favorite" isSet={true} />
=mark as a favorite&nbsp;&nbsp;
=mark as favorite&nbsp;&nbsp;
<OptionIcon type="readonly" isSet={true} />
=disable write action&nbsp;&nbsp;
<OptionIcon type="api_mqtt_exclude" isSet={true} />
=exclude from MQTT and API outputs&nbsp;&nbsp;
=exclude from MQTT and API&nbsp;&nbsp;
<OptionIcon type="web_exclude" isSet={true} />
=hide from Web Dashboard
=hide from Dashboard
</Typography>
</Box>
<ValidatedTextField
Expand All @@ -324,11 +316,11 @@ const SettingsCustomization: FC = () => {
margin="normal"
select
>
<MenuItem disabled key={0} value={0}>
<MenuItem disabled key={0} value={-1}>
Select a device...
</MenuItem>
{devices.devices.sort(compareDevices).map((device: DeviceShort, index) => (
<MenuItem key={index} value={device.i}>
{devices.devices.map((device: DeviceShort, index) => (
<MenuItem key={index} value={index}>
{device.s}
</MenuItem>
))}
Expand Down
5 changes: 3 additions & 2 deletions interface/src/project/types.ts
View file
Expand Up @@ -104,9 +104,10 @@ export interface CoreData {

export interface DeviceShort {
i: number; // id
d: number; // deviceid
p: number; // productid
d?: number; // deviceid
p?: number; // productid
s: string; // shortname
t?: string; // device type name
}

export interface Devices {
Expand Down
5 changes: 4 additions & 1 deletion mock-api/server.js
View file
Expand Up @@ -347,18 +347,21 @@ const emsesp_devices = {
d: 23,
p: 77,
s: 'Thermostat (RC20/Moduline 300)',
t: 'thermostat1',
},
{
i: 2,
d: 8,
p: 123,
s: 'Boiler (Nefit GBx72/Trendline/Cerapur/Greenstar Si/27i)',
t: 'boiler',
},
{
i: 4,
d: 16,
p: 165,
s: 'Thermostat (RC100/Moduline 1000/1010)',
t: 'thermostat2',
},
],
}
Expand Down Expand Up @@ -1224,8 +1227,8 @@ rest_server.get(GET_CUSTOMIZATIONS_ENDPOINT, (req, res) => {

// start server
const expressServer = rest_server.listen(port, () =>
console.log(`EMS-ESP REST API server running on http://localhost:${port}/api`),
)
console.log(`EMS-ESP Rest API listening to http://localhost:${port}/api`)

// start websocket server
const websocketServer = new WebSocket.Server({
Expand Down
13 changes: 7 additions & 6 deletions src/web/WebCustomizationService.cpp
View file
Expand Up @@ -165,22 +165,23 @@ void WebCustomizationService::devices(AsyncWebServerRequest * request) {
auto * response = new AsyncJsonResponse(false, EMSESP_JSON_SIZE_LARGE_DYN);
JsonObject root = response->getRoot();

// list is already sorted by device type
// controller is ignored since it doesn't have any associated entities
JsonArray devices = root.createNestedArray("devices");
for (const auto & emsdevice : EMSESP::emsdevices) {
if (emsdevice->has_entities()) {
JsonObject obj = devices.createNestedObject();
obj["i"] = emsdevice->unique_id(); // a unique id
obj["i"] = emsdevice->unique_id(); // its unique id
obj["s"] = emsdevice->device_type_name() + " (" + emsdevice->name() + ")"; // shortname

/*
// device type name. We may have one than one (e.g. multiple thermostats) so postfix name with index
uint8_t device_index = EMSESP::device_index(emsdevice->device_type(), emsdevice->unique_id());
if (device_index) {
char s[10];
obj["s"] = emsdevice->device_type_name() + Helpers::smallitoa(s, device_index) + " (" + emsdevice->name() + ")"; // shortname - we prefix the count to make it unique
obj["t"] = Helpers::toLower(emsdevice->device_type_name()) + Helpers::smallitoa(s, device_index);
} else {
obj["s"] = emsdevice->device_type_name() + " (" + emsdevice->name() + ")";
obj["t"] = Helpers::toLower(emsdevice->device_type_name());
}
*/
obj["s"] = emsdevice->device_type_name() + " (" + emsdevice->name() + ")";
}
}

Expand Down

0 comments on commit d12879b

Please sign in to comment.