86 lines
1.7 KiB
JavaScript
86 lines
1.7 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {
|
|
Grid,
|
|
} from "semantic-ui-react";
|
|
import Device from "./devices/Device";
|
|
import NewDevice from "./devices/NewDevice";
|
|
import {LightDevice, TemperatureSensor} from "./devices/TypesOfDevices";
|
|
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
|
|
|
|
class Panel extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
editMode : false
|
|
};
|
|
}
|
|
|
|
editModeController = (e) => {
|
|
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
};
|
|
|
|
render() {
|
|
const devices = [
|
|
{
|
|
"name": "Bedroom Light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"name": "Bathroom Light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"name": "Desktop Light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"name": "Entrance Light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"name": "Bedroom",
|
|
...TemperatureSensor
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div style={panelStyle}>
|
|
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
|
<Grid doubling columns={5} divided="vertically">
|
|
{devices.map((e, i) => {
|
|
return (
|
|
<Grid.Column key={i.toString()}>
|
|
<Device device={e} edit={this.state.editMode}/>
|
|
</Grid.Column>
|
|
)
|
|
})}
|
|
<Grid.Column>
|
|
<NewDevice/>
|
|
</Grid.Column>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
export default class DevicePanel extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
shownRoom: "All"
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Panel/>
|
|
)
|
|
}
|
|
|
|
}
|
|
|