116 lines
2.7 KiB
JavaScript
116 lines
2.7 KiB
JavaScript
import React, {Component} from 'react';
|
|
import DevicePanel from "../components/dashboard/DevicePanel";
|
|
import Navbar from './Navbar'
|
|
import MyHeader from '../components/HeaderController'
|
|
|
|
import { call } from '../client_server';
|
|
import { Grid } from 'semantic-ui-react'
|
|
/*
|
|
rooms -> actual rooms
|
|
activeItem -> the current room in view
|
|
devices -> current device in current room view
|
|
|
|
|
|
id of Home is -1
|
|
*/
|
|
|
|
export default class Dashboard extends Component{
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
rooms: [],
|
|
activeItem: -1,
|
|
devices: [],
|
|
tkn: this.props.tkn,
|
|
};
|
|
|
|
this.addRoom = this.addRoom.bind(this);
|
|
this.handleItemClick = this.handleItemClick.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
call.getAllRooms(this.props.tkn)
|
|
.then(res => {
|
|
res.data.forEach((e) => {
|
|
this.setState(state => ({
|
|
rooms: state.rooms.concat([e])
|
|
}));
|
|
});
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
call.getAllDevices(this.props.tkn)
|
|
.then(res => {
|
|
console.log(res);
|
|
res.data.forEach((e) => {
|
|
this.setState(state => ({
|
|
devices: state.devices.concat([e])
|
|
}));
|
|
});
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
addRoom(data) {
|
|
call.createRoom(data)
|
|
.then(res => {
|
|
console.log(res);
|
|
if (res.status === 200 && res.data) {
|
|
this.setState(state => ({
|
|
rooms: state.rooms.concat([res.data])
|
|
}));
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
deleteRoom(id) {
|
|
call.deleteRoom(id)
|
|
.then(res => {
|
|
//remove room in state.rooms
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
handleItemClick(el) {
|
|
// el -> obj of name and id
|
|
//da fare richiesta get della room e settare activeItem
|
|
call.getAllDevicesByRoom(el.id, this.props.tkn)
|
|
.then(res => {
|
|
res.data.forEach((e) => {
|
|
this.setState(state => ({
|
|
devices: state.devices.concat([e])
|
|
}));
|
|
});
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
render () {
|
|
return(
|
|
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
|
<Grid >
|
|
<Grid.Row color='black'>
|
|
<Grid.Column>
|
|
<MyHeader />
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row color='black'>
|
|
<Grid.Column width={3}>
|
|
<Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
|
|
</Grid.Column>
|
|
|
|
<Grid.Column width={13}>
|
|
<DevicePanel devices={this.state.devices} />
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
}
|