2020-03-23 21:45:13 +00:00
|
|
|
// vim: set ts=2 sw=2 et tw=80:
|
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
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";
|
2020-03-18 14:30:02 +00:00
|
|
|
import NewDevice from "./devices/NewDevice";
|
2020-03-20 17:42:38 +00:00
|
|
|
import SettingsModal from "./devices/SettingsModal";
|
2020-03-23 20:24:17 +00:00
|
|
|
import { call } from "../../client_server";
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-17 15:20:43 +00:00
|
|
|
export default class DevicePanel extends Component {
|
2020-03-23 20:24:17 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
editMode: false,
|
2020-03-19 10:52:13 +00:00
|
|
|
};
|
2020-03-15 14:50:25 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
this.addDevice = this.addDevice.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
editModeController = (e) =>
|
|
|
|
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
|
|
|
|
|
|
openModal = (settingsDeviceId) => {
|
|
|
|
this.setState((prevState) => ({
|
|
|
|
openSettingsModal: !prevState.openSettingsModal,
|
|
|
|
settingsDeviceId: settingsDeviceId,
|
|
|
|
}));
|
|
|
|
};
|
|
|
|
|
|
|
|
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];
|
|
|
|
}
|
|
|
|
}
|
2020-03-20 17:42:38 +00:00
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
|
|
|
return null;
|
|
|
|
});
|
|
|
|
this.forceUpdate();
|
|
|
|
};
|
|
|
|
|
2020-03-24 17:17:04 +00:00
|
|
|
getDevices = () => {
|
2020-03-23 20:24:17 +00:00
|
|
|
if (this.props.activeItem === -1) {
|
|
|
|
call
|
|
|
|
.getAllDevices()
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.setState({
|
|
|
|
devices: res.data,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => {
|
|
|
|
console.log(err);
|
2020-03-19 10:52:13 +00:00
|
|
|
});
|
2020-03-23 20:24:17 +00:00
|
|
|
} else {
|
|
|
|
call
|
|
|
|
.getAllDevicesByRoom(this.props.activeItem)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.setState({
|
|
|
|
devices: res.data,
|
2020-03-20 17:42:38 +00:00
|
|
|
});
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => {});
|
2020-03-19 10:52:13 +00:00
|
|
|
}
|
2020-03-24 17:17:04 +00:00
|
|
|
};
|
2020-03-23 20:24:17 +00:00
|
|
|
|
|
|
|
async addDevice(data) {
|
|
|
|
const ds = await this.props.addDevice(data);
|
|
|
|
this.setState({
|
|
|
|
devices: ds,
|
|
|
|
});
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
|
|
|
|
updateDevice = (data) => {
|
|
|
|
const roomId = this.props.devices.filter(
|
|
|
|
(d) => d.id === this.state.settingsDeviceId
|
|
|
|
)[0].roomId;
|
|
|
|
data["id"] = this.state.settingsDeviceId;
|
|
|
|
data["roomId"] = roomId;
|
|
|
|
call
|
|
|
|
.deviceUpdate(data)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.getDevices();
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => {});
|
|
|
|
};
|
|
|
|
|
|
|
|
removeDevice = () => {
|
|
|
|
const item = this.props.devices.filter(
|
|
|
|
(d) => d.id === this.state.settingsDeviceId
|
|
|
|
)[0];
|
|
|
|
const data = {
|
|
|
|
device: item.kind,
|
|
|
|
id: this.state.settingsDeviceId,
|
|
|
|
};
|
2020-03-17 16:38:03 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.deviceDelete(data)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.openModal();
|
|
|
|
this.getDevices();
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => {});
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const edit = {
|
|
|
|
mode: this.state.editMode,
|
|
|
|
openModal: this.openModal,
|
|
|
|
};
|
|
|
|
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={4} divided="vertically">
|
|
|
|
{this.state.openSettingsModal ? (
|
|
|
|
<SettingsModal
|
|
|
|
openModal={this.openModal}
|
|
|
|
updateDevice={this.updateDevice}
|
|
|
|
removeDevice={this.removeDevice}
|
|
|
|
device={ds.filter((d) => d.id === this.state.settingsDeviceId)[0]}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
""
|
|
|
|
)}
|
|
|
|
{ds
|
|
|
|
? ds.map((e, i) => {
|
|
|
|
return (
|
|
|
|
<Grid.Column key={i}>
|
|
|
|
<DeviceType
|
2020-03-24 17:17:04 +00:00
|
|
|
updateDev={this.props.updateDeviceUi}
|
2020-03-23 20:24:17 +00:00
|
|
|
type={e.kind}
|
|
|
|
onChangeData={this.changeDeviceData}
|
|
|
|
device={e}
|
|
|
|
edit={edit}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
: null}
|
|
|
|
{this.props.activeItem !== -1 ? (
|
|
|
|
<Grid.Column>
|
|
|
|
<NewDevice addDevice={this.addDevice} devices={ds} />
|
|
|
|
</Grid.Column>
|
|
|
|
) : null}
|
|
|
|
</Grid>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|