135 lines
3.6 KiB
JavaScript
135 lines
3.6 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, SmartPlugDevice} from "./devices/TypesOfDevices";
|
|
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
|
|
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
|
|
import Light from "./devices/Light";
|
|
import SmartPlug from "./devices/SmartPlug";
|
|
import Sensor from "./devices/Sensor";
|
|
|
|
|
|
const devices = [
|
|
{
|
|
"id" : 1,
|
|
"name": "Bedroom Light",
|
|
"type" : "light",
|
|
"hasIntensity" : true,
|
|
"intensityLevel" : 0.20,
|
|
...LightDevice
|
|
},
|
|
{
|
|
"id" : 2,
|
|
"name": "Bathroom Light",
|
|
"type" : "light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"id" : 3,
|
|
"name": "Desktop Light",
|
|
"type" : "light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"id" : 4,
|
|
"name": "Entrance Light",
|
|
"type" : "light",
|
|
...LightDevice
|
|
},
|
|
{
|
|
"id" : 5,
|
|
"name": "Smart Plug",
|
|
"type" : "smartplug",
|
|
...SmartPlugDevice
|
|
},
|
|
{
|
|
"id" : 6,
|
|
"name": "Bedroom Thermometer",
|
|
"type" : "temperature-sensor",
|
|
},
|
|
];
|
|
|
|
class Panel extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
editMode : false,
|
|
devices : devices,
|
|
};
|
|
}
|
|
|
|
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
|
|
changeDeviceData = (deviceId, newSettings) => {
|
|
console.log(newSettings.name, " <-- new name --> ", deviceId );
|
|
this.state.devices.map(device => {
|
|
if(device.id === deviceId){
|
|
for(let prop in newSettings){
|
|
if(device.hasOwnProperty(prop)){
|
|
if(prop==="name"){
|
|
if(checkMaxLength(newSettings[prop])){
|
|
device[prop] = newSettings[prop];
|
|
}
|
|
else{
|
|
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
|
|
}
|
|
}else{
|
|
device[prop] = newSettings[prop];
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
});
|
|
this.forceUpdate();
|
|
};
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div style={panelStyle}>
|
|
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
|
<Grid doubling columns={5} divided="vertically">
|
|
<Grid.Column>
|
|
<Light onChangeData={this.changeDeviceData} device={devices[0]} edit={this.state.editMode}/>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={this.state.editMode}/>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} 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/>
|
|
)
|
|
}
|
|
|
|
}
|
|
|