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;
|
||||
});
|
||||
},
|
||||
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) {
|
||||
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
|
||||
.then(res => {
|
||||
|
|
|
@ -2,17 +2,13 @@ import React, {Component} from 'react';
|
|||
import {
|
||||
Grid,
|
||||
} 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 {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
|
||||
import Light from "./devices/Light";
|
||||
import SmartPlug from "./devices/SmartPlug";
|
||||
import Sensor from "./devices/Sensor";
|
||||
import DeviceType from './devices/DeviceTypeController';
|
||||
import NewDevice from "./devices/NewDevice";
|
||||
|
||||
|
||||
const devices = [
|
||||
/* const devices = [
|
||||
{
|
||||
"id" : 1,
|
||||
"name": "Bedroom Light",
|
||||
|
@ -50,15 +46,15 @@ const devices = [
|
|||
"name": "Bedroom Thermometer",
|
||||
"type" : "temperature-sensor",
|
||||
},
|
||||
];
|
||||
];*/
|
||||
|
||||
class Panel extends Component {
|
||||
export default class DevicePanel extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
editMode : false,
|
||||
devices : devices,
|
||||
devices : this.props.devices,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -94,16 +90,19 @@ class Panel extends Component {
|
|||
return (
|
||||
<div style={panelStyle}>
|
||||
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
||||
<Grid doubling columns={5} divided="vertically">
|
||||
<Grid.Column>
|
||||
<Light onChangeData={this.changeDeviceData} device={devices[0]} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
<Grid doubling divided="vertically">
|
||||
{
|
||||
this.props.devices ?
|
||||
this.props.devices.map((e, i) => {
|
||||
return (
|
||||
<Grid.Column>
|
||||
<DeviceType type={e.type} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
|
||||
</Grid.Column>
|
||||
)
|
||||
})
|
||||
:
|
||||
null
|
||||
}
|
||||
<Grid.Column>
|
||||
<NewDevice/>
|
||||
</Grid.Column>
|
||||
|
@ -114,21 +113,3 @@ 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
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
|
|
@ -4,18 +4,24 @@ import Navbar from './Navbar'
|
|||
import MyHeader from '../components/HeaderController'
|
||||
|
||||
import { call } from '../client_server';
|
||||
import {Button} from 'semantic-ui-react';
|
||||
import { Menu } from 'semantic-ui-react'
|
||||
import { Grid, Image, Icon } from 'semantic-ui-react'
|
||||
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: "Home",
|
||||
tkn: this.props.tkn
|
||||
activeItem: -1,
|
||||
devices: [],
|
||||
tkn: this.props.tkn,
|
||||
};
|
||||
|
||||
this.addRoom = this.addRoom.bind(this);
|
||||
|
@ -33,6 +39,17 @@ export default class Dashboard extends Component{
|
|||
}).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) {
|
||||
|
@ -50,11 +67,27 @@ export default class Dashboard extends Component{
|
|||
};
|
||||
|
||||
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 () {
|
||||
|
@ -72,7 +105,7 @@ export default class Dashboard extends Component{
|
|||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={13}>
|
||||
<DevicePanel />
|
||||
<DevicePanel devices={this.state.devices} />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
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";
|
||||
|
||||
|
||||
|
@ -7,13 +7,29 @@ export default class FourOhFour extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Message>
|
||||
<Message.Header>404 Page Not Found</Message.Header>
|
||||
<p>
|
||||
Hey what are you doing here?
|
||||
Go back to our homepage <Link to="/"/>
|
||||
</p>
|
||||
</Message>
|
||||
<div style={{height : "110vh", background: '#1b1c1d'}}>
|
||||
<Grid centered>
|
||||
<Grid.Row>
|
||||
<Header as='h1'>404</Header>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<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