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/>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|