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