diff --git a/CHANGELOG_LATEST.md b/CHANGELOG_LATEST.md index 101718e8c..4a3897cd8 100644 --- a/CHANGELOG_LATEST.md +++ b/CHANGELOG_LATEST.md @@ -48,6 +48,7 @@ - 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) - `status` in the MQTT heartbeat renamed to `bus_status` +- Layout changes in the WebUI, showing stripped table rows in Dashboard ## **BREAKING CHANGES** diff --git a/interface/src/project/EMSESPDataForm.tsx b/interface/src/project/EMSESPDataForm.tsx index 7f9f0d5c4..a4c1549bb 100644 --- a/interface/src/project/EMSESPDataForm.tsx +++ b/interface/src/project/EMSESPDataForm.tsx @@ -59,19 +59,32 @@ export const DEVICE_DATA_ENDPOINT = ENDPOINT_ROOT + 'deviceData'; export const WRITE_VALUE_ENDPOINT = ENDPOINT_ROOT + 'writeValue'; export const WRITE_SENSOR_ENDPOINT = ENDPOINT_ROOT + 'writeSensor'; -const StyledTableCell = withStyles((theme: Theme) => +const StyledTableRow = withStyles((theme: Theme) => createStyles({ - head: { - backgroundColor: theme.palette.common.black, - color: theme.palette.common.white + root: { + '&:nth-child(even)': { + 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: { backgroundColor: theme.palette.secondary.main, color: 'white', @@ -304,7 +317,7 @@ class EMSESPDataForm extends Component< return (this.state.deviceData?.data || []).length === 0; }; - renderDeviceItems() { + renderDevices() { const { width, data } = this.props; return ( @@ -325,7 +338,7 @@ class EMSESPDataForm extends Component< onClick={() => this.handleRowClick(device.i)} > - {device.t} - + {device.b + ' ' + device.n}{' '} @@ -371,7 +384,7 @@ class EMSESPDataForm extends Component< ); } - renderSensorItems() { + renderSensorData() { const { data } = this.props; const me = this.props.authenticatedContext.me; return ( @@ -383,26 +396,22 @@ class EMSESPDataForm extends Component< {!this.noSensors() && ( - - - Sensor # - ID / Name - Temperature - + + + Dallas Sensor # + ID / Name + Temperature + {data.sensors.map((sensorData) => ( - this.sendSensor(sensorData)} > - + {me.admin && ( - + - + )} @@ -421,7 +430,7 @@ class EMSESPDataForm extends Component< {formatValue(sensorData.t, DeviceValueUOM.DEGREES)} - + ))}
@@ -437,20 +446,23 @@ class EMSESPDataForm extends Component< ); } - renderAnalog() { + renderAnalogData() { const { data } = this.props; return ( +

{data.analog > 0 && ( - - Sensortype - Value - + + + Sensor Type + Value + +    Analog Input @@ -575,7 +587,7 @@ class EMSESPDataForm extends Component<

- {deviceData.name} + {deviceData.type} Data {!this.noDeviceData() && ( @@ -584,17 +596,15 @@ class EMSESPDataForm extends Component< size="small" padding={isWidthDown('xs', width!) ? 'none' : 'normal'} > - {deviceData.data.map((item, i) => ( - this.sendCommand(item)} > {item.c && this.props.authenticatedContext.me.admin && ( - @@ -606,7 +616,7 @@ class EMSESPDataForm extends Component< > - + )} @@ -615,7 +625,7 @@ class EMSESPDataForm extends Component< {formatValue(item.v, item.u)} - + ))}
@@ -637,10 +647,10 @@ class EMSESPDataForm extends Component< return (

- {this.renderDeviceItems()} + {this.renderDevices()} {this.renderDeviceData()} - {this.renderSensorItems()} - {this.renderAnalog()} + {this.renderSensorData()} + {this.renderAnalogData()}

diff --git a/interface/src/project/EMSESPtypes.ts b/interface/src/project/EMSESPtypes.ts index 7aa04d19f..ae9d071cc 100644 --- a/interface/src/project/EMSESPtypes.ts +++ b/interface/src/project/EMSESPtypes.ts @@ -73,7 +73,7 @@ export interface DeviceValue { } export interface EMSESPDeviceData { - name: string; + type: string; data: DeviceValue[]; } diff --git a/mock-api/server.js b/mock-api/server.js index ee6a34d4d..36de77a7f 100644 --- a/mock-api/server.js +++ b/mock-api/server.js @@ -353,6 +353,7 @@ const emsesp_data = { { 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 }, ], + analog: 12, } const emsesp_status = { @@ -364,7 +365,7 @@ const emsesp_status = { } const emsesp_devicedata_1 = { - name: 'Thermostat: RC20/Moduline 300', + type: 'Thermostat', data: [ { v: '(0)', @@ -400,7 +401,7 @@ const emsesp_devicedata_1 = { } const emsesp_devicedata_2 = { - name: 'Boiler: Nefit GBx72/Trendline/Cerapur/Greenstar Si/27i', + type: 'Boiler', data: [ { v: 'off', u: 0, n: 'heating active' }, { v: 'off', u: 0, n: 'warm water active' }, @@ -525,7 +526,7 @@ const emsesp_devicedata_2 = { } const emsesp_devicedata_3 = { - name: 'Controller: BC1', + type: 'Controller', data: [], } diff --git a/src/emsdevice.cpp b/src/emsdevice.cpp index 2465104ed..d2c3e0d47 100644 --- a/src/emsdevice.cpp +++ b/src/emsdevice.cpp @@ -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 // v = value, u=uom, n=name, c=cmd void EMSdevice::generate_values_json_web(JsonObject & output) { - output["name"] = to_string_short(); + output["type"] = device_type_name(); JsonArray data = output.createNestedArray("data"); for (const auto & dv : devicevalues_) {