Merge branch '35-fixed-login-display-and-devices' into 'dev'
fixed login display and devices Closes #35 See merge request sa4-2020/the-sanmarinoes/frontend!29
This commit is contained in:
commit
359fa65a84
6 changed files with 132 additions and 55 deletions
|
@ -59,6 +59,28 @@ export var call = {
|
||||||
return err;
|
return err;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
getAllDevices: function(token) {
|
||||||
|
if (!token){
|
||||||
|
token = tkn;
|
||||||
|
}
|
||||||
|
return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } })
|
||||||
|
.then(res => {
|
||||||
|
return res;
|
||||||
|
}).catch(err => {
|
||||||
|
return err;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getAllDevicesByRoom: function(id, token) {
|
||||||
|
if (!token){
|
||||||
|
token = tkn;
|
||||||
|
}
|
||||||
|
return axios.get(config + 'room/' + id + '/device' , { headers: { Authorization : "Bearer " + token } })
|
||||||
|
.then(res => {
|
||||||
|
return res;
|
||||||
|
}).catch(err => {
|
||||||
|
return err;
|
||||||
|
});
|
||||||
|
},
|
||||||
createRoom: function(data, headers) {
|
createRoom: function(data, headers) {
|
||||||
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
|
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
|
||||||
.then(res => {
|
.then(res => {
|
||||||
|
|
|
@ -2,17 +2,13 @@ import React, {Component} from 'react';
|
||||||
import {
|
import {
|
||||||
Grid,
|
Grid,
|
||||||
} from "semantic-ui-react";
|
} 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 {editButtonStyle, panelStyle} from "./devices/styleComponents";
|
||||||
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
|
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
|
||||||
import Light from "./devices/Light";
|
import DeviceType from './devices/DeviceTypeController';
|
||||||
import SmartPlug from "./devices/SmartPlug";
|
import NewDevice from "./devices/NewDevice";
|
||||||
import Sensor from "./devices/Sensor";
|
|
||||||
|
|
||||||
|
|
||||||
const devices = [
|
/* const devices = [
|
||||||
{
|
{
|
||||||
"id" : 1,
|
"id" : 1,
|
||||||
"name": "Bedroom Light",
|
"name": "Bedroom Light",
|
||||||
|
@ -50,15 +46,15 @@ const devices = [
|
||||||
"name": "Bedroom Thermometer",
|
"name": "Bedroom Thermometer",
|
||||||
"type" : "temperature-sensor",
|
"type" : "temperature-sensor",
|
||||||
},
|
},
|
||||||
];
|
];*/
|
||||||
|
|
||||||
class Panel extends Component {
|
export default class DevicePanel extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
editMode : false,
|
editMode : false,
|
||||||
devices : devices,
|
devices : this.props.devices,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -94,16 +90,19 @@ class Panel extends Component {
|
||||||
return (
|
return (
|
||||||
<div style={panelStyle}>
|
<div style={panelStyle}>
|
||||||
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
||||||
<Grid doubling columns={5} divided="vertically">
|
<Grid doubling divided="vertically">
|
||||||
<Grid.Column>
|
{
|
||||||
<Light onChangeData={this.changeDeviceData} device={devices[0]} edit={this.state.editMode}/>
|
this.props.devices ?
|
||||||
</Grid.Column>
|
this.props.devices.map((e, i) => {
|
||||||
<Grid.Column>
|
return (
|
||||||
<SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={this.state.editMode}/>
|
<Grid.Column>
|
||||||
</Grid.Column>
|
<DeviceType type={e.type} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
|
||||||
<Grid.Column>
|
</Grid.Column>
|
||||||
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
|
)
|
||||||
</Grid.Column>
|
})
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<NewDevice/>
|
<NewDevice/>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
|
@ -112,23 +111,5 @@ class Panel extends Component {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default class DevicePanel extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
shownRoom: "All"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Panel/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import Light from "./Light";
|
||||||
|
import SmartPlug from "./SmartPlug";
|
||||||
|
import Sensor from "./Sensor";
|
||||||
|
import DefaultDimmer from "./Dimmer";
|
||||||
|
import Switcher from "./Switcher";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const DeviceType = (props) => {
|
||||||
|
switch(props.type) {
|
||||||
|
case "light":
|
||||||
|
return <Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
case "sensor":
|
||||||
|
return <Sensor onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
case "dimmer":
|
||||||
|
return <DefaultDimmer onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
case "smartplug":
|
||||||
|
return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
case "switch":
|
||||||
|
return <Switcher onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DeviceType;
|
|
@ -30,7 +30,7 @@ export class StatefulDimmer extends Component{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class DefaultDimmer extends Component{
|
export default class DefaultDimmer extends Component{
|
||||||
// As far as I am concern, even though this dimmer doesn't have state, internally it's needed
|
// As far as I am concern, even though this dimmer doesn't have state, internally it's needed
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
|
|
|
@ -4,18 +4,24 @@ import Navbar from './Navbar'
|
||||||
import MyHeader from '../components/HeaderController'
|
import MyHeader from '../components/HeaderController'
|
||||||
|
|
||||||
import { call } from '../client_server';
|
import { call } from '../client_server';
|
||||||
import {Button} from 'semantic-ui-react';
|
import { Grid } from 'semantic-ui-react'
|
||||||
import { Menu } from 'semantic-ui-react'
|
/*
|
||||||
import { Grid, Image, Icon } 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{
|
export default class Dashboard extends Component{
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
rooms: [],
|
rooms: [],
|
||||||
activeItem: "Home",
|
activeItem: -1,
|
||||||
tkn: this.props.tkn
|
devices: [],
|
||||||
|
tkn: this.props.tkn,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.addRoom = this.addRoom.bind(this);
|
this.addRoom = this.addRoom.bind(this);
|
||||||
|
@ -33,6 +39,17 @@ export default class Dashboard extends Component{
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(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) {
|
addRoom(data) {
|
||||||
|
@ -50,11 +67,27 @@ export default class Dashboard extends Component{
|
||||||
};
|
};
|
||||||
|
|
||||||
deleteRoom(id) {
|
deleteRoom(id) {
|
||||||
|
call.deleteRoom(id)
|
||||||
|
.then(res => {
|
||||||
|
//remove room in state.rooms
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleItemClick(el) {
|
handleItemClick(el) {
|
||||||
|
// el -> obj of name and id
|
||||||
//da fare richiesta get della room e settare activeItem
|
//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 () {
|
render () {
|
||||||
|
@ -72,7 +105,7 @@ export default class Dashboard extends Component{
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
|
|
||||||
<Grid.Column width={13}>
|
<Grid.Column width={13}>
|
||||||
<DevicePanel />
|
<DevicePanel devices={this.state.devices} />
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
</Grid.Row>
|
</Grid.Row>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import { Message} from 'semantic-ui-react';
|
import { Header, Grid, Message, Button} from 'semantic-ui-react';
|
||||||
import {Link } from "react-router-dom";
|
import {Link } from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
|
@ -7,13 +7,29 @@ export default class FourOhFour extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Message>
|
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
||||||
<Message.Header>404 Page Not Found</Message.Header>
|
<Grid centered>
|
||||||
<p>
|
<Grid.Row>
|
||||||
Hey what are you doing here?
|
<Header as='h1'>404</Header>
|
||||||
Go back to our homepage <Link to="/"/>
|
</Grid.Row>
|
||||||
</p>
|
<Grid.Row>
|
||||||
</Message>
|
<Grid.Column width={10}>
|
||||||
|
<Message>
|
||||||
|
<Message.Header>404 Page Not Found</Message.Header>
|
||||||
|
<p>
|
||||||
|
Hey what are you doing here?
|
||||||
|
Looks like you are lost, this room does not exist.
|
||||||
|
</p>
|
||||||
|
</Message>
|
||||||
|
</Grid.Column>
|
||||||
|
<Grid.Column width={6}>
|
||||||
|
<Button >
|
||||||
|
<Link to="/">Go back to our main room</Link>
|
||||||
|
</Button>
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid.Row>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue