2020-03-23 20:24:17 +00:00
|
|
|
import React, { Component } from "react";
|
2020-03-09 12:52:27 +00:00
|
|
|
import DevicePanel from "../components/dashboard/DevicePanel";
|
2020-03-23 20:24:17 +00:00
|
|
|
import Navbar from "./Navbar";
|
|
|
|
import MyHeader from "../components/HeaderController";
|
2020-03-09 12:52:27 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
import { call } from "../client_server";
|
|
|
|
import { Grid, Responsive } from "semantic-ui-react";
|
2020-03-18 14:30:02 +00:00
|
|
|
/*
|
2020-03-17 15:20:43 +00:00
|
|
|
rooms -> actual rooms
|
2020-03-18 14:30:02 +00:00
|
|
|
activeItem -> the current room in view
|
2020-03-17 15:20:43 +00:00
|
|
|
devices -> current device in current room view
|
2020-03-13 14:12:28 +00:00
|
|
|
|
2020-03-11 16:38:04 +00:00
|
|
|
|
2020-03-17 15:20:43 +00:00
|
|
|
id of Home is -1
|
|
|
|
*/
|
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
export default class Dashboard extends Component {
|
2020-03-11 16:38:04 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
rooms: [],
|
2020-03-17 15:20:43 +00:00
|
|
|
activeItem: -1,
|
|
|
|
devices: [],
|
|
|
|
tkn: this.props.tkn,
|
2020-03-11 16:38:04 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.addRoom = this.addRoom.bind(this);
|
2020-03-19 10:52:13 +00:00
|
|
|
this.deleteRoom = this.deleteRoom.bind(this);
|
2020-03-22 16:58:27 +00:00
|
|
|
this.updateRoom = this.updateRoom.bind(this);
|
2020-03-19 10:52:13 +00:00
|
|
|
this.addDevice = this.addDevice.bind(this);
|
2020-03-11 16:38:04 +00:00
|
|
|
this.handleItemClick = this.handleItemClick.bind(this);
|
|
|
|
}
|
|
|
|
|
2020-03-22 16:58:27 +00:00
|
|
|
getDevices() {
|
|
|
|
if (this.state.activeItem === -1) {
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.getAllDevices()
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
console.log(res.data);
|
|
|
|
this.setState({
|
|
|
|
devices: res.data,
|
2020-03-22 16:58:27 +00:00
|
|
|
});
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => {
|
|
|
|
console.log(err);
|
|
|
|
});
|
2020-03-22 16:58:27 +00:00
|
|
|
} else {
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.getAllDevicesByRoom(this.state.activeItem)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.setState({
|
|
|
|
devices: res.data,
|
2020-03-22 16:58:27 +00:00
|
|
|
});
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => {});
|
2020-03-22 16:58:27 +00:00
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
2020-03-22 16:58:27 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
getRooms() {
|
|
|
|
call
|
|
|
|
.getAllRooms(this.props.tkn)
|
|
|
|
.then((res) => {
|
|
|
|
this.setState({
|
|
|
|
rooms: res.data,
|
|
|
|
});
|
2020-03-22 16:58:27 +00:00
|
|
|
})
|
2020-03-23 20:24:17 +00:00
|
|
|
.catch((err) => {});
|
|
|
|
}
|
2020-03-22 16:58:27 +00:00
|
|
|
|
2020-03-13 14:12:28 +00:00
|
|
|
componentDidMount() {
|
2020-03-22 16:58:27 +00:00
|
|
|
this.getRooms();
|
|
|
|
this.getDevices();
|
2020-03-11 16:38:04 +00:00
|
|
|
}
|
|
|
|
|
2020-03-14 14:48:33 +00:00
|
|
|
addRoom(data) {
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.createRoom(data)
|
|
|
|
.then((res) => {
|
2020-03-11 16:38:04 +00:00
|
|
|
if (res.status === 200 && res.data) {
|
2020-03-22 16:58:27 +00:00
|
|
|
this.getRooms();
|
2020-03-11 16:38:04 +00:00
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
})
|
|
|
|
.catch((err) => {
|
2020-03-19 10:52:13 +00:00
|
|
|
console.log(err);
|
|
|
|
});
|
2020-03-23 20:24:17 +00:00
|
|
|
}
|
2020-03-11 16:38:04 +00:00
|
|
|
|
2020-03-19 10:52:13 +00:00
|
|
|
deleteRoom() {
|
|
|
|
let data = {
|
2020-03-23 20:24:17 +00:00
|
|
|
id: this.state.activeItem,
|
|
|
|
};
|
|
|
|
call
|
|
|
|
.deleteRoom(data)
|
|
|
|
.then((res) => {
|
2020-03-17 15:20:43 +00:00
|
|
|
//remove room in state.rooms
|
2020-03-22 16:58:27 +00:00
|
|
|
this.getRooms();
|
2020-03-23 20:24:17 +00:00
|
|
|
})
|
|
|
|
.catch((err) => {
|
2020-03-19 10:52:13 +00:00
|
|
|
console.log(err);
|
|
|
|
});
|
2020-03-14 14:48:33 +00:00
|
|
|
}
|
|
|
|
|
2020-03-22 16:58:27 +00:00
|
|
|
updateRoom(data) {
|
2020-03-23 18:08:31 +00:00
|
|
|
data.id = this.state.activeItem;
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.updateRoom(data)
|
|
|
|
.then((res) => {
|
2020-03-22 16:58:27 +00:00
|
|
|
if (res.status === 200 && res.data) {
|
|
|
|
this.getRooms();
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
})
|
2020-03-23 20:24:17 +00:00
|
|
|
.catch((err) => {});
|
2020-03-22 16:58:27 +00:00
|
|
|
}
|
|
|
|
|
2020-03-18 11:46:28 +00:00
|
|
|
handleItemClick(id) {
|
2020-03-17 15:20:43 +00:00
|
|
|
// el -> obj of name and id
|
2020-03-11 16:38:04 +00:00
|
|
|
//da fare richiesta get della room e settare activeItem
|
2020-03-19 10:52:13 +00:00
|
|
|
this.setState({
|
2020-03-23 20:24:17 +00:00
|
|
|
activeItem: id,
|
2020-03-18 14:30:02 +00:00
|
|
|
});
|
2020-03-23 20:24:17 +00:00
|
|
|
if (id === -1) {
|
|
|
|
call
|
|
|
|
.getAllDevices(this.props.tkn)
|
|
|
|
.then((res) => {
|
|
|
|
if (res.status === 200) {
|
2020-03-19 10:52:13 +00:00
|
|
|
this.setState({
|
2020-03-23 20:24:17 +00:00
|
|
|
devices: res.data,
|
2020-03-19 10:52:13 +00:00
|
|
|
});
|
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
})
|
|
|
|
.catch((err) => {
|
2020-03-19 10:52:13 +00:00
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
} else {
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.getAllDevicesByRoom(id, this.props.tkn)
|
|
|
|
.then((res) => {
|
2020-03-19 10:52:13 +00:00
|
|
|
if (res.status === 200) {
|
|
|
|
this.setState({
|
2020-03-23 20:24:17 +00:00
|
|
|
devices: res.data,
|
2020-03-19 10:52:13 +00:00
|
|
|
});
|
2020-03-22 16:58:27 +00:00
|
|
|
this.forceUpdate();
|
2020-03-19 10:52:13 +00:00
|
|
|
}
|
2020-03-23 20:24:17 +00:00
|
|
|
})
|
|
|
|
.catch((err) => {
|
2020-03-19 10:52:13 +00:00
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
addDevice(data) {
|
|
|
|
data.params["roomId"] = this.state.activeItem;
|
2020-03-23 20:24:17 +00:00
|
|
|
call
|
|
|
|
.devicePost(data, this.props.tkn)
|
|
|
|
.then((res) => {
|
|
|
|
this.setState((state) => ({
|
|
|
|
devices: state.devices.concat([res.data]),
|
|
|
|
}));
|
|
|
|
return this.state.devices;
|
|
|
|
})
|
|
|
|
.catch((err) => {});
|
2020-03-11 16:38:04 +00:00
|
|
|
}
|
2020-03-17 16:38:03 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div style={{ height: "110vh", background: "#1b1c1d" }}>
|
|
|
|
<Responsive minWidth={768}>
|
|
|
|
<Grid>
|
|
|
|
<Grid.Row color="black">
|
2020-03-22 16:58:27 +00:00
|
|
|
<Grid.Column>
|
|
|
|
<MyHeader logout={this.props.logout} />
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
2020-03-23 20:24:17 +00:00
|
|
|
<Grid.Row color="black">
|
|
|
|
<Grid.Column width={3}>
|
|
|
|
<Navbar
|
|
|
|
addRoom={this.addRoom}
|
|
|
|
updateRoom={this.updateRoom}
|
|
|
|
deleteRoom={this.deleteRoom}
|
|
|
|
rooms={this.state.rooms}
|
|
|
|
handleItemClick={this.handleItemClick}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
2020-03-22 16:58:27 +00:00
|
|
|
|
2020-03-23 20:24:17 +00:00
|
|
|
<Grid.Column width={13}>
|
|
|
|
<DevicePanel
|
|
|
|
tkn={this.props.tkn}
|
|
|
|
activeItem={this.state.activeItem}
|
|
|
|
addDevice={this.addDevice}
|
|
|
|
devices={this.state.devices}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
2020-03-22 16:58:27 +00:00
|
|
|
</Grid>
|
|
|
|
</Responsive>
|
2020-03-23 20:24:17 +00:00
|
|
|
<Responsive maxWidth={768}>
|
2020-03-22 16:58:27 +00:00
|
|
|
<Grid inverted>
|
2020-03-23 20:24:17 +00:00
|
|
|
<Grid.Row color="black">
|
|
|
|
<Grid.Column>
|
|
|
|
<MyHeader logout={this.props.logout} />
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
<Grid.Row color="black">
|
|
|
|
<Grid.Column color="black">
|
|
|
|
<Navbar
|
|
|
|
addRoom={this.addRoom}
|
|
|
|
deleteRoom={this.deleteRoom}
|
|
|
|
rooms={this.state.rooms}
|
|
|
|
handleItemClick={this.handleItemClick}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column>
|
|
|
|
<DevicePanel
|
|
|
|
tkn={this.props.tkn}
|
|
|
|
activeItem={this.state.activeItem}
|
|
|
|
addDevice={this.addDevice}
|
|
|
|
devices={this.state.devices}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
2020-03-22 16:58:27 +00:00
|
|
|
</Responsive>
|
2020-03-11 16:38:04 +00:00
|
|
|
</div>
|
2020-03-23 20:24:17 +00:00
|
|
|
);
|
2020-03-11 16:38:04 +00:00
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|