85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {
|
|
Grid,
|
|
} from "semantic-ui-react";
|
|
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
|
|
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
|
|
import DeviceType from './devices/DeviceTypeController';
|
|
import NewDevice from "./devices/NewDevice";
|
|
|
|
export default class DevicePanel extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
editMode : false,
|
|
};
|
|
|
|
this.addDevice = this.addDevice.bind(this);
|
|
}
|
|
|
|
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
|
|
changeDeviceData = (deviceId, newSettings) => {
|
|
|
|
console.log(newSettings.name, " <-- new name --> ", deviceId );
|
|
this.props.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();
|
|
};
|
|
|
|
addDevice(data) {
|
|
const ds = this.props.addDevice(data);
|
|
this.setState({
|
|
devices: ds
|
|
});
|
|
}
|
|
|
|
|
|
render() {
|
|
const ds = this.state.devices ? this.state.devices : this.props.devices;
|
|
return (
|
|
<div style={panelStyle}>
|
|
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
|
<Grid doubling columns={ds.length > 0 ? ds.length : 1} divided="vertically">
|
|
{
|
|
ds ?
|
|
ds.map((e, i) => {
|
|
return (
|
|
<Grid.Column key={i}>
|
|
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
|
|
</Grid.Column>
|
|
)
|
|
})
|
|
:
|
|
null
|
|
}
|
|
<Grid.Column>
|
|
<NewDevice addDevice={this.addDevice} devices={ds}/>
|
|
</Grid.Column>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
|