andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 15:59:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

stripped table rows

Browse Source
This commit is contained in:
proddy
2021-11-22 00:36:15 +01:00
parent 53de2ca25b
commit bb38458ac4
5 changed files with 59 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG_LATEST.md
View File

@@ -48,6 +48,7 @@
- Removed settings for MQTT subscribe format [#173](https://github.com/emsesp/EMS-ESP32/issues/173) - Removed settings for MQTT subscribe format [#173](https://github.com/emsesp/EMS-ESP32/issues/173)
- Improve Nefit Moduline 200 functionality [#183](https://github.com/emsesp/EMS-ESP32/issues/183) - Improve Nefit Moduline 200 functionality [#183](https://github.com/emsesp/EMS-ESP32/issues/183)
- `status` in the MQTT heartbeat renamed to `bus_status` - `status` in the MQTT heartbeat renamed to `bus_status`
- Layout changes in the WebUI, showing stripped table rows in Dashboard
## **BREAKING CHANGES** ## **BREAKING CHANGES**

94
interface/src/project/EMSESPDataForm.tsx
View File

@@ -59,19 +59,32 @@ export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + 'deviceData';
export const WRITE_VALUE_ENDPOINT = ENDPOINT_ROOT + 'writeValue'; export const WRITE_VALUE_ENDPOINT = ENDPOINT_ROOT + 'writeValue';
export const WRITE_SENSOR_ENDPOINT = ENDPOINT_ROOT + 'writeSensor'; export const WRITE_SENSOR_ENDPOINT = ENDPOINT_ROOT + 'writeSensor';
const StyledTableCell = withStyles((theme: Theme) => const StyledTableRow = withStyles((theme: Theme) =>
createStyles({ createStyles({
head: { root: {
backgroundColor: theme.palette.common.black, '&:nth-child(even)': {
color: theme.palette.common.white backgroundColor: '#4e4e4e'
},
'&:hover': {
backgroundColor: theme.palette.info.light
}
}, },
body: {
fontSize: 14 selected: {
backgroundColor: theme.palette.common.white
} }
}) })
)(TableCell); )(TableRow);
const CustomTooltip = withStyles((theme: Theme) => ({ const StyledTableRowHeader = withStyles((theme: Theme) =>
createStyles({
head: {
backgroundColor: theme.palette.common.black
}
})
)(TableRow);
const StyledTooltip = withStyles((theme: Theme) => ({
tooltip: { tooltip: {
backgroundColor: theme.palette.secondary.main, backgroundColor: theme.palette.secondary.main,
color: 'white', color: 'white',
@@ -304,7 +317,7 @@ class EMSESPDataForm extends Component<
return (this.state.deviceData?.data || []).length === 0; return (this.state.deviceData?.data || []).length === 0;
}; };
renderDeviceItems() { renderDevices() {
const { width, data } = this.props; const { width, data } = this.props;
return ( return (
<TableContainer> <TableContainer>
@@ -325,7 +338,7 @@ class EMSESPDataForm extends Component<
onClick={() => this.handleRowClick(device.i)} onClick={() => this.handleRowClick(device.i)}
> >
<TableCell> <TableCell>
<CustomTooltip <StyledTooltip
title={ title={
'DeviceID:0x' + 'DeviceID:0x' +
('00' + device.d.toString(16).toUpperCase()).slice(-2) + ('00' + device.d.toString(16).toUpperCase()).slice(-2) +
@@ -343,7 +356,7 @@ class EMSESPDataForm extends Component<
> >
{device.t} {device.t}
</Button> </Button>
</CustomTooltip> </StyledTooltip>
</TableCell> </TableCell>
<TableCell align="right"> <TableCell align="right">
{device.b + ' ' + device.n}{' '} {device.b + ' ' + device.n}{' '}
@@ -371,7 +384,7 @@ class EMSESPDataForm extends Component<
); );
} }
renderSensorItems() { renderSensorData() {
const { data } = this.props; const { data } = this.props;
const me = this.props.authenticatedContext.me; const me = this.props.authenticatedContext.me;
return ( return (
@@ -383,26 +396,22 @@ class EMSESPDataForm extends Component<
{!this.noSensors() && ( {!this.noSensors() && (
<Table size="small" padding="normal"> <Table size="small" padding="normal">
<TableHead> <TableHead>
<TableRow> <StyledTableRowHeader>
<StyledTableCell <TableCell padding="checkbox" style={{ width: 18 }}></TableCell>
padding="checkbox" <TableCell>Dallas Sensor #</TableCell>
style={{ width: 18 }} <TableCell align="left">ID / Name</TableCell>
></StyledTableCell> <TableCell align="right">Temperature</TableCell>
<StyledTableCell>Sensor #</StyledTableCell> </StyledTableRowHeader>
<StyledTableCell align="left">ID / Name</StyledTableCell>
<StyledTableCell align="right">Temperature</StyledTableCell>
</TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{data.sensors.map((sensorData) => ( {data.sensors.map((sensorData) => (
<TableRow <StyledTableRow
key={sensorData.n} key={sensorData.n}
hover
onClick={() => this.sendSensor(sensorData)} onClick={() => this.sendSensor(sensorData)}
> >
<TableCell padding="checkbox" style={{ width: 18 }}> <TableCell padding="checkbox">
{me.admin && ( {me.admin && (
<CustomTooltip title="edit" placement="left-end"> <StyledTooltip title="edit" placement="left-end">
<IconButton <IconButton
edge="start" edge="start"
size="small" size="small"
@@ -411,7 +420,7 @@ class EMSESPDataForm extends Component<
> >
<EditIcon color="primary" fontSize="small" /> <EditIcon color="primary" fontSize="small" />
</IconButton> </IconButton>
</CustomTooltip> </StyledTooltip>
)} )}
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
@@ -421,7 +430,7 @@ class EMSESPDataForm extends Component<
<TableCell align="right"> <TableCell align="right">
{formatValue(sensorData.t, DeviceValueUOM.DEGREES)} {formatValue(sensorData.t, DeviceValueUOM.DEGREES)}
</TableCell> </TableCell>
</TableRow> </StyledTableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
@@ -437,20 +446,23 @@ class EMSESPDataForm extends Component<
); );
} }
renderAnalog() { renderAnalogData() {
const { data } = this.props; const { data } = this.props;
return ( return (
<TableContainer> <TableContainer>
<p></p>
{data.analog > 0 && ( {data.analog > 0 && (
<Table size="small" padding="normal"> <Table size="small" padding="normal">
<TableHead> <TableHead>
<TableRow> <StyledTableRowHeader>
<StyledTableCell>Sensortype</StyledTableCell> <TableCell padding="normal" style={{ width: 18 }}></TableCell>
<StyledTableCell align="right">Value</StyledTableCell> <TableCell>Sensor Type</TableCell>
</TableRow> <TableCell align="right">Value</TableCell>
</StyledTableRowHeader>
</TableHead> </TableHead>
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell padding="normal">&nbsp;&nbsp;</TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
Analog Input Analog Input
</TableCell> </TableCell>
@@ -575,7 +587,7 @@ class EMSESPDataForm extends Component<
<p></p> <p></p>
<Box bgcolor="info.main" p={1} mt={1} mb={1}> <Box bgcolor="info.main" p={1} mt={1} mb={1}>
<Typography variant="body1" color="initial"> <Typography variant="body1" color="initial">
{deviceData.name} {deviceData.type}&nbsp;Data
</Typography> </Typography>
</Box> </Box>
{!this.noDeviceData() && ( {!this.noDeviceData() && (
@@ -584,17 +596,15 @@ class EMSESPDataForm extends Component<
size="small" size="small"
padding={isWidthDown('xs', width!) ? 'none' : 'normal'} padding={isWidthDown('xs', width!) ? 'none' : 'normal'}
> >
<TableHead></TableHead>
<TableBody> <TableBody>
{deviceData.data.map((item, i) => ( {deviceData.data.map((item, i) => (
<TableRow <StyledTableRow
hover
key={i} key={i}
onClick={() => this.sendCommand(item)} onClick={() => this.sendCommand(item)}
> >
<TableCell padding="checkbox" style={{ width: 18 }}> <TableCell padding="checkbox" style={{ width: 18 }}>
{item.c && this.props.authenticatedContext.me.admin && ( {item.c && this.props.authenticatedContext.me.admin && (
<CustomTooltip <StyledTooltip
title="change value" title="change value"
placement="left-end" placement="left-end"
> >
@@ -606,7 +616,7 @@ class EMSESPDataForm extends Component<
> >
<EditIcon color="primary" fontSize="small" /> <EditIcon color="primary" fontSize="small" />
</IconButton> </IconButton>
</CustomTooltip> </StyledTooltip>
)} )}
</TableCell> </TableCell>
<TableCell padding="none" component="th" scope="row"> <TableCell padding="none" component="th" scope="row">
@@ -615,7 +625,7 @@ class EMSESPDataForm extends Component<
<TableCell padding="none" align="right"> <TableCell padding="none" align="right">
{formatValue(item.v, item.u)} {formatValue(item.v, item.u)}
</TableCell> </TableCell>
</TableRow> </StyledTableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
@@ -637,10 +647,10 @@ class EMSESPDataForm extends Component<
return ( return (
<Fragment> <Fragment>
<br></br> <br></br>
{this.renderDeviceItems()} {this.renderDevices()}
{this.renderDeviceData()} {this.renderDeviceData()}
{this.renderSensorItems()} {this.renderSensorData()}
{this.renderAnalog()} {this.renderAnalogData()}
<br></br> <br></br>
<Box display="flex" flexWrap="wrap"> <Box display="flex" flexWrap="wrap">
<Box flexGrow={1} padding={1}> <Box flexGrow={1} padding={1}>

2
interface/src/project/EMSESPtypes.ts
View File

@@ -73,7 +73,7 @@ export interface DeviceValue {
} }
export interface EMSESPDeviceData { export interface EMSESPDeviceData {
name: string; type: string;
data: DeviceValue[]; data: DeviceValue[];
} }

7
mock-api/server.js
View File

@@ -353,6 +353,7 @@ const emsesp_data = {
{ n: 1, i: '28-233D-9497-0C03', t: 25.7, o: 1.2 }, { n: 1, i: '28-233D-9497-0C03', t: 25.7, o: 1.2 },
{ n: 2, i: '28-243D-7437-1E3A', t: 26.1, o: 0 }, { n: 2, i: '28-243D-7437-1E3A', t: 26.1, o: 0 },
], ],
analog: 12,
} }
const emsesp_status = { const emsesp_status = {
@@ -364,7 +365,7 @@ const emsesp_status = {
} }
const emsesp_devicedata_1 = { const emsesp_devicedata_1 = {
name: 'Thermostat: RC20/Moduline 300', type: 'Thermostat',
data: [ data: [
{ {
v: '(0)', v: '(0)',
@@ -400,7 +401,7 @@ const emsesp_devicedata_1 = {
} }
const emsesp_devicedata_2 = { const emsesp_devicedata_2 = {
name: 'Boiler: Nefit GBx72/Trendline/Cerapur/Greenstar Si/27i', type: 'Boiler',
data: [ data: [
{ v: 'off', u: 0, n: 'heating active' }, { v: 'off', u: 0, n: 'heating active' },
{ v: 'off', u: 0, n: 'warm water active' }, { v: 'off', u: 0, n: 'warm water active' },
@@ -525,7 +526,7 @@ const emsesp_devicedata_2 = {
} }
const emsesp_devicedata_3 = { const emsesp_devicedata_3 = {
name: 'Controller: BC1', type: 'Controller',
data: [], data: [],
} }

2
src/emsdevice.cpp
View File

@@ -616,7 +616,7 @@ const std::string EMSdevice::get_value_uom(const char * key) {
// except additional data is stored in the JSON document needed for the Web UI like the UOM and command // except additional data is stored in the JSON document needed for the Web UI like the UOM and command
// v = value, u=uom, n=name, c=cmd // v = value, u=uom, n=name, c=cmd
void EMSdevice::generate_values_json_web(JsonObject & output) { void EMSdevice::generate_values_json_web(JsonObject & output) {
output["name"] = to_string_short(); output["type"] = device_type_name();
JsonArray data = output.createNestedArray("data"); JsonArray data = output.createNestedArray("data");
for (const auto & dv : devicevalues_) { for (const auto & dv : devicevalues_) {