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

added hover to table

Browse Source
This commit is contained in:
proddy
2020-07-08 12:30:41 +02:00
parent 14a64f97cf
commit 25664bb04e
1 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
interface/src/project/EMSESPDevicesForm.tsx
View File

@@ -1,4 +1,5 @@
import React, { Component, Fragment } from "react";
import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
import {
Table,
@@ -6,7 +7,7 @@ import {
TableCell,
TableHead,
TableRow,
List,
TableContainer,
withWidth,
WithWidthProps,
isWidthDown,
@@ -28,6 +29,18 @@ import { EMSESPDevices, Device } from "./EMSESPtypes";
import { ENDPOINT_ROOT } from '../api';
export const SCANDEVICES_ENDPOINT = ENDPOINT_ROOT + "scanDevices";
const StyledTableCell = withStyles((theme: Theme) =>
createStyles({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}),
)(TableCell);
function compareDevices(a: Device, b: Device) {
if (a.type < b.type) {
return -1;
@@ -56,24 +69,24 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
return (this.props.data.devices.length === 0);
};
createListItems() {
createTableItems() {
const { width, data } = this.props;
return (
<Fragment>
<TableContainer>
<Table size="small" padding={isWidthDown('xs', width!) ? "none" : "default"}>
<TableHead>
<TableRow>
<TableCell>Type</TableCell>
<TableCell align="center">Brand</TableCell>
<TableCell align="center">Name</TableCell>
<TableCell align="center">Device ID</TableCell>
<TableCell align="center">Product ID</TableCell>
<TableCell align="center">Version</TableCell>
<StyledTableCell>Type</StyledTableCell>
<StyledTableCell align="center">Brand</StyledTableCell>
<StyledTableCell align="center">Model</StyledTableCell>
<StyledTableCell align="center">Device ID</StyledTableCell>
<StyledTableCell align="center">Product ID</StyledTableCell>
<StyledTableCell align="center">Version</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.devices.sort(compareDevices).map(device => (
<TableRow key={device.type}>
<TableRow hover key={device.type}>
<TableCell component="th" scope="row">
{device.type}
</TableCell>
@@ -105,7 +118,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
</Box>
)
}
</Fragment >
</TableContainer>
);
}
@@ -117,7 +130,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
>
<DialogTitle>Confirm Scan Devices</DialogTitle>
<DialogContent dividers>
Are you sure you want to scan the EMS bus for all new devices?
Are you sure you want to initiate a scan on the EMS bus for all new devices?
</DialogContent>
<DialogActions>
<Button variant="contained" onClick={this.onScanDevicesRejected} color="secondary">
@@ -159,7 +172,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
render() {
return (
<Fragment>
<List>{this.createListItems()}</List>
{this.createTableItems()}
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1} padding={1}>