Added background color, Added Accordion onChange handler

Birdmap.API/ClientApp/src/App.tsx

@@ -1,9 +1,6 @@
 import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import AppBar from '@material-ui/core/AppBar';
-import blue from '@material-ui/core/colors/blue';
-import orange from '@material-ui/core/colors/orange';
-import grey from '@material-ui/core/colors/grey';
 import { positions } from '@material-ui/system';
 import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -17,17 +14,18 @@ import AuthService from './components/auth/AuthService';
 import { ClickAwayListener } from '@material-ui/core';
 import MapContainer from './components/heatmap/Heatmap';
 import Devices from './components/devices/Devices';
+import { blueGrey, blue, orange, grey } from '@material-ui/core/colors';
 
 
 const theme = createMuiTheme({
     palette: {
         primary: {
             main: blue[900],
-            dark: grey[400],
+            dark: blueGrey[50],
         },
         secondary: {
             main: orange[200],
-            dark: grey[400],
+            dark: blueGrey[50],
         }
     },
 });

Birdmap.API/ClientApp/src/components/devices/DeviceComponent.jsx

@@ -6,6 +6,7 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Grid, Typography, Paper } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
+import { withRouter } from "react-router";
 
 const styles = theme => ({
     grid_typo: {
@@ -37,6 +38,10 @@ const styles = theme => ({
 class DeviceComponent extends Component {
     constructor(props) {
         super(props);
+
+        this.state = {
+            expanded: "",
+        }
     }
 
     getColor(status) {
@@ -49,17 +54,26 @@ class DeviceComponent extends Component {
         }
     }
 
+    componentDidMount() {
+        const id = this.props.match.params.id;
+        this.setState({ expanded: id });
+    }
+
     render() {
         const { classes } = this.props;
         const Sensors = this.props.device.sensors.map((sensor, index) => (
             <Grid item className={classes.grid_item} key={sensor.id}>
                 <Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
-                <Typography className={classes.grid_item_typo_2}>S{sensor.id}</Typography>
+                <Typography className={classes.grid_item_typo_2}>{sensor.id}</Typography>
             </Grid>
         ));
 
+        const handleChange = (panel) => (event, isExpanded) => {
+            this.setState({ expanded: isExpanded ? panel : "" });
+        };
+
         return (
-            <Accordion>
+            <Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}>
                 <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls={"device-panel-/" + this.props.device.id}
@@ -82,4 +96,4 @@ class DeviceComponent extends Component {
     }
 }
 
-export default withStyles(styles)(DeviceComponent);
+export default withRouter(withStyles(styles)(DeviceComponent));

Birdmap.API/ClientApp/src/components/devices/Devices.jsx

@@ -10,7 +10,7 @@ import { grey } from '@material-ui/core/colors';
 const styles = theme => ({
     root: {
         padding: '64px',
-        color: theme.palette.primary.main,
+        backgroundColor: theme.palette.primary.dark,
     }
 });
 

Birdmap.API/ClientApp/src/components/devices/SensorComponent.jsx

@@ -8,14 +8,8 @@ export default class SensorComponent extends Component {
     }
 
     render() {
-        const Sensors = this.props.device.sensors.map((sensor, index) => (
-            <Typography>Sensor {this.props.index}</Typography>
-        ));
 
         return (
-            <AccordionDetails>
-                {Sensors}
-            </AccordionDetails>
         );
     }
 }