Merge branch '41-fix-all-warnings-and-clean-code' into 'dev'
fix all warnings and cleaned code Closes #41 See merge request sa4-2020/the-sanmarinoes/frontend!40
This commit is contained in:
commit
4c15df7058
18 changed files with 192 additions and 242 deletions
|
@ -44,18 +44,22 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
if (this.props.location) {
|
if (window.location) {
|
||||||
const values = queryString.parse(this.props.location.search);
|
const values = queryString.parse(window.location.search);
|
||||||
|
console.log(values);
|
||||||
this.setState({
|
this.setState({
|
||||||
query : values
|
query : values
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
query : "ciao"
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
auth(data) {
|
auth(data) {
|
||||||
return call.login(data.params)
|
return call.login(data.params)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log(res);
|
|
||||||
if (res.data && res.status === 200) {
|
if (res.data && res.status === 200) {
|
||||||
localStorage.setItem("token", res.data.jwttoken);
|
localStorage.setItem("token", res.data.jwttoken);
|
||||||
this.setState(
|
this.setState(
|
||||||
|
@ -80,7 +84,6 @@ class App extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
logout() {
|
logout() {
|
||||||
console.log("logout")
|
|
||||||
this.setState({
|
this.setState({
|
||||||
loggedIn : false,
|
loggedIn : false,
|
||||||
});
|
});
|
||||||
|
@ -109,7 +112,7 @@ class App extends Component {
|
||||||
<Route path="/sent-email-reg" >
|
<Route path="/sent-email-reg" >
|
||||||
<ConfirmRegistration />
|
<ConfirmRegistration />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/forgot-pass-reset" >
|
<Route path="/password-reset" >
|
||||||
<ChangePass query={this.state.query}/>
|
<ChangePass query={this.state.query}/>
|
||||||
</Route>
|
</Route>
|
||||||
<Route component={FourOhFour} />
|
<Route component={FourOhFour} />
|
||||||
|
|
|
@ -17,132 +17,56 @@ const tkn = localStorage.getItem("token");
|
||||||
export var call = {
|
export var call = {
|
||||||
login: function(data, headers) {
|
login: function(data, headers) {
|
||||||
return axios.post(config +'auth/login', data)
|
return axios.post(config +'auth/login', data)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return {status : "Errore"};
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
register: function(data, headers) {
|
register: function(data, headers) {
|
||||||
return axios.post(config + 'register', data)
|
return axios.post(config + 'register', data)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
//console.error(err);
|
|
||||||
return {status : "Errore"};
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
initResetPassword: function(data, headers) {
|
initResetPassword: function(data, headers) {
|
||||||
return axios.post(config + 'register/init-reset-password', data)
|
return axios.post(config + 'register/init-reset-password', data)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return {status : "Errore"};
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
resetPassword: function(data, headers) {
|
resetPassword: function(data, headers) {
|
||||||
return axios.put(config + 'register/reset-password', data)
|
return axios.put(config + 'register/reset-password', data)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return {status : "Errore"};
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
getAllRooms: function(token) {
|
getAllRooms: function(token) {
|
||||||
if (!token){
|
if (!token){
|
||||||
token = tkn;
|
token = tkn;
|
||||||
}
|
}
|
||||||
return axios.get(config + 'room', { headers: { Authorization : "Bearer " + token } })
|
return axios.get(config + 'room', { headers: { Authorization : "Bearer " + token } })
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
getAllDevices: function(token) {
|
getAllDevices: function(token) {
|
||||||
if (!token){
|
if (!token){
|
||||||
token = tkn;
|
token = tkn;
|
||||||
}
|
}
|
||||||
return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } })
|
return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } });
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
getAllDevicesByRoom: function(id, token) {
|
getAllDevicesByRoom: function(id, token) {
|
||||||
if (!token){
|
if (!token){
|
||||||
token = tkn;
|
token = tkn;
|
||||||
}
|
}
|
||||||
return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } })
|
return axios.get(config + 'room/' + id + '/devices' , { 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 => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
updateRoom: function(data, headers) {
|
updateRoom: function(data, headers) {
|
||||||
return axios.put(config + 'room/'+data.id)
|
return axios.put(config + 'room/'+data.id)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
deleteRoom: function(data, headers) {
|
deleteRoom: function(data, headers) {
|
||||||
return axios.delete(config + 'room/'+data.id)
|
return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
devicePost: function(data, headers) {
|
devicePost: function(data, headers) {
|
||||||
return axios.post(config + data.device, data.params)
|
return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
deviceUpdate: function(data, headers) {
|
deviceUpdate: function(data, headers) {
|
||||||
return axios.put(config + data.device, data.params)
|
return axios.put(config + data.device, data.params)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
deviceDelete: function(data, headers) {
|
deviceDelete: function(data, headers) {
|
||||||
return axios.delete(config + data.device + '/' + data.id, data.params)
|
return axios.delete(config + data.device + '/' + data.id, data.params)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
deviceGetById: function(data, headers) {
|
deviceGetById: function(data, headers) {
|
||||||
return axios.get(config + data.device + '/' + data.id)
|
return axios.get(config + data.device + '/' + data.id)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
deviceGetAll: function(data, headers) {
|
deviceGetAll: function(data, headers) {
|
||||||
return axios.get(config + data.device)
|
return axios.get(config + data.device)
|
||||||
.then(res => {
|
|
||||||
return res;
|
|
||||||
}).catch(err => {
|
|
||||||
return err;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React, { Component } from "react";
|
import React from "react";
|
||||||
import { render } from "react-dom";
|
import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
|
||||||
import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
|
|
||||||
import { Segment, Image } from 'semantic-ui-react'
|
import { Segment, Image } from 'semantic-ui-react'
|
||||||
|
|
||||||
const ImageExampleWrapped = () => (
|
const ImageExampleWrapped = () => (
|
||||||
|
@ -23,10 +22,6 @@ const ImageExampleWrapped3 = () => (
|
||||||
<Image src='title2.png' size='medium' centered/>
|
<Image src='title2.png' size='medium' centered/>
|
||||||
)
|
)
|
||||||
|
|
||||||
const HeaderExampleIconProp = () => (
|
|
||||||
<Header as='h2' icon='plug' color="white" content='Smart Hut' />
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const GridExampleInverted = (props) => (
|
const GridExampleInverted = (props) => (
|
||||||
|
@ -67,7 +62,6 @@ const GridExampleInverted = (props) => (
|
||||||
|
|
||||||
export default class MyHeader extends React.Component {
|
export default class MyHeader extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
console.log(this.props)
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<GridExampleInverted logout={this.props.logout} />
|
<GridExampleInverted logout={this.props.logout} />
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { render } from "react-dom";
|
|
||||||
import {
|
import {
|
||||||
Container,
|
Container,
|
||||||
Icon,
|
Icon,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
|
import { Button, Grid } from 'semantic-ui-react'
|
||||||
|
|
||||||
export default class SelectIcons extends Component {
|
export default class SelectIcons extends Component {
|
||||||
|
|
||||||
|
@ -29,7 +29,6 @@ export default class SelectIcons extends Component {
|
||||||
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
|
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
|
||||||
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
|
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
|
||||||
|
|
||||||
var colums = 0;
|
|
||||||
return (
|
return (
|
||||||
<Grid centered>
|
<Grid centered>
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import {
|
import {
|
||||||
Grid,
|
Grid,
|
||||||
} from "semantic-ui-react";
|
} from "semantic-ui-react";
|
||||||
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";
|
||||||
|
@ -9,67 +9,76 @@ import NewDevice from "./devices/NewDevice";
|
||||||
|
|
||||||
export default class DevicePanel 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 : this.props.devices,
|
};
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
this.addDevice = this.addDevice.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
changeDeviceData = (deviceId, newSettings) => {
|
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
||||||
|
|
||||||
console.log(newSettings.name, " <-- new name --> ", deviceId );
|
changeDeviceData = (deviceId, newSettings) => {
|
||||||
this.state.devices.map(device => {
|
|
||||||
if(device.id === deviceId){
|
console.log(newSettings.name, " <-- new name --> ", deviceId );
|
||||||
for(let prop in newSettings){
|
this.props.devices.map(device => {
|
||||||
if(device.hasOwnProperty(prop)){
|
if(device.id === deviceId){
|
||||||
if(prop==="name"){
|
for(let prop in newSettings){
|
||||||
if(checkMaxLength(newSettings[prop])){
|
if(device.hasOwnProperty(prop)){
|
||||||
device[prop] = newSettings[prop];
|
if(prop==="name"){
|
||||||
}
|
if(checkMaxLength(newSettings[prop])){
|
||||||
else{
|
device[prop] = newSettings[prop];
|
||||||
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
|
}
|
||||||
}
|
else{
|
||||||
}else{
|
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
|
||||||
device[prop] = newSettings[prop];
|
}
|
||||||
|
}else{
|
||||||
|
device[prop] = newSettings[prop];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
this.forceUpdate();
|
||||||
|
};
|
||||||
|
|
||||||
}
|
addDevice(data) {
|
||||||
}
|
const ds = this.props.addDevice(data);
|
||||||
}
|
this.setState({
|
||||||
return null;
|
devices: ds
|
||||||
});
|
});
|
||||||
this.forceUpdate();
|
}
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
const ds = this.state.devices ? this.state.devices : this.props.devices;
|
||||||
<div style={panelStyle}>
|
return (
|
||||||
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
<div style={panelStyle}>
|
||||||
<Grid doubling columns={this.state.devices.length > 0 ? this.state.devices.length : 1} divided="vertically">
|
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
|
||||||
{
|
<Grid doubling columns={ds.length > 0 ? ds.length : 1} divided="vertically">
|
||||||
this.state.devices ?
|
{
|
||||||
this.state.devices.map((e, i) => {
|
ds ?
|
||||||
return (
|
ds.map((e, i) => {
|
||||||
<Grid.Column key={i}>
|
return (
|
||||||
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
|
<Grid.Column key={i}>
|
||||||
</Grid.Column>
|
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
|
||||||
)
|
</Grid.Column>
|
||||||
})
|
)
|
||||||
:
|
})
|
||||||
null
|
:
|
||||||
}
|
null
|
||||||
<Grid.Column>
|
}
|
||||||
<NewDevice devices={this.state.devices}/>
|
<Grid.Column>
|
||||||
</Grid.Column>
|
<NewDevice addDevice={this.addDevice} devices={ds}/>
|
||||||
</Grid>
|
</Grid.Column>
|
||||||
</div>
|
</Grid>
|
||||||
)
|
</div>
|
||||||
}
|
)
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { Component } from 'react';
|
import React from 'react';
|
||||||
import Light from "./Light";
|
import Light from "./Light";
|
||||||
import SmartPlug from "./SmartPlug";
|
import SmartPlug from "./SmartPlug";
|
||||||
import Sensor from "./Sensor";
|
import Sensor from "./Sensor";
|
||||||
|
@ -9,8 +9,8 @@ import Switcher from "./Switch";
|
||||||
|
|
||||||
const DeviceType = (props) => {
|
const DeviceType = (props) => {
|
||||||
switch(props.type) {
|
switch(props.type) {
|
||||||
case "light":
|
case "regular-light":
|
||||||
return <Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
return (<Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />)
|
||||||
case "sensor":
|
case "sensor":
|
||||||
return <Sensor onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
return <Sensor onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
case "dimmer":
|
case "dimmer":
|
||||||
|
@ -19,6 +19,10 @@ const DeviceType = (props) => {
|
||||||
return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
case "switch":
|
case "switch":
|
||||||
return <Switcher onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
return <Switcher onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
case "light":
|
||||||
|
return <Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
|
||||||
|
default:
|
||||||
|
return ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,6 +25,7 @@ export default class NewDevice extends Component {
|
||||||
openModal : false
|
openModal : false
|
||||||
};
|
};
|
||||||
this.baseState = this.state
|
this.baseState = this.state
|
||||||
|
this.createDevice = this.createDevice.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOpen = () => {this.setState({openModal : true})};
|
handleOpen = () => {this.setState({openModal : true})};
|
||||||
|
@ -59,8 +60,16 @@ export default class NewDevice extends Component {
|
||||||
this.setState({lightsAttached : d.value});
|
this.setState({lightsAttached : d.value});
|
||||||
};
|
};
|
||||||
|
|
||||||
createDevice = () => {
|
createDevice() {
|
||||||
// Connect to the backend and create device here.
|
// Connect to the backend and create device here.
|
||||||
|
const data = {
|
||||||
|
params: {
|
||||||
|
"name": this.state.deviceName,
|
||||||
|
},
|
||||||
|
device: this.state.typeOfDevice
|
||||||
|
|
||||||
|
}
|
||||||
|
this.props.addDevice(data);
|
||||||
this.resetState();
|
this.resetState();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -70,7 +79,7 @@ export default class NewDevice extends Component {
|
||||||
{
|
{
|
||||||
key: 'light',
|
key: 'light',
|
||||||
text: 'Normal Light',
|
text: 'Normal Light',
|
||||||
value: 'light',
|
value: 'regularLight',
|
||||||
image: {avatar: true, src: '/img/lightOn.svg'},
|
image: {avatar: true, src: '/img/lightOn.svg'},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import {iconStyle} from "./styleComponents";
|
|
||||||
|
|
||||||
export const energyConsumedStyle = {
|
export const energyConsumedStyle = {
|
||||||
color : "black",
|
color : "black",
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Header, Image, Modal, Checkbox, Form, Grid, Input, Icon } from 'semantic-ui-react'
|
import { Button, Header, Modal, Form, Input, Icon } from 'semantic-ui-react'
|
||||||
import SelectIcons from "./SelectIcons";
|
import SelectIcons from "./SelectIcons";
|
||||||
|
|
||||||
export default class ModalWindow extends Component {
|
export default class ModalWindow extends Component {
|
||||||
|
@ -39,10 +39,7 @@ export default class ModalWindow extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteRoom = (e) => {
|
deleteRoom = (e) => {
|
||||||
let data = {
|
this.props.deleteRoom();
|
||||||
"id" : this.state.id
|
|
||||||
}
|
|
||||||
this.props.deleteRoom(data);
|
|
||||||
this.closeModal();
|
this.closeModal();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,40 +74,39 @@ export default class ModalWindow extends Component {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
{this.props.type == "new" ?
|
{this.props.type === "new" ?
|
||||||
<Button icon labelPosition='left' inverted onClick={this.openModal}>
|
<Button icon labelPosition='left' inverted onClick={this.openModal}>
|
||||||
<Icon name='plus' size='small'/>
|
<Icon name='plus' size='small'/>
|
||||||
ADD ROOM
|
ADD ROOM
|
||||||
</Button>
|
</Button>
|
||||||
:
|
:
|
||||||
<Icon name="pencil" size="small" onClick={this.openModal}/>
|
null
|
||||||
}
|
}
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
onClose={this.closeModal}
|
onClose={this.closeModal}
|
||||||
open={this.state.openModal}>
|
open={this.state.openModal}>
|
||||||
<Header>{this.props.type == "new" ? "Add new room" : "Modify room" }</Header>
|
<Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
|
||||||
<Modal.Content>
|
<Modal.Content>
|
||||||
<Form>
|
<Form>
|
||||||
<p>Insert the name of the room:</p>
|
<p>Insert the name of the room:</p>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
|
<Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
|
||||||
value={this.props.type == "new" ? null : this.props.idRoom.name }/>
|
value={this.props.type === "new" ? null : this.props.idRoom.name }/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<p>Insert an image of the room:</p>
|
<p>Insert an image of the room:</p>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Input label='Room image' type='file' name="img" onChange={this.changeSomething}
|
<Input label='Room image' type='file' name="img" onChange={this.changeSomething}
|
||||||
value={this.props.type == "new" ? null : this.props.idRoom.images }/>
|
value={this.props.type === "new" ? null : this.props.idRoom.images }/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
<div style={spaceDiv}>
|
<div style={spaceDiv}>
|
||||||
<p>Select an icon:</p>
|
<p>Select an icon:</p>
|
||||||
{this.props.type == "new" ? "home" : this.props.idRoom.icon }
|
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
|
||||||
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{this.props.type == "modify" ?
|
{this.props.type === "modify" ?
|
||||||
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
|
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
|
||||||
<Icon name='trash alternate' />
|
<Icon name='trash alternate' />
|
||||||
Delete room
|
Delete room
|
||||||
|
@ -119,12 +115,12 @@ export default class ModalWindow extends Component {
|
||||||
</Modal.Content>
|
</Modal.Content>
|
||||||
<Modal.Actions>
|
<Modal.Actions>
|
||||||
<Button color='red' onClick={this.closeModal}>
|
<Button color='red' onClick={this.closeModal}>
|
||||||
<Icon name='remove' /> {this.props.type == "new" ? "Cancel" : "Discard changes" }
|
<Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
|
||||||
<Button color='green' onClick={this.props.type == "new" ? this.addRoomModal : this.modifyRoomModal}>
|
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
|
||||||
<Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes"}
|
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
</Modal.Actions>
|
</Modal.Actions>
|
||||||
|
|
|
@ -1,14 +1,7 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { render } from "react-dom";
|
|
||||||
import HomeNavbar from "./../components/HomeNavbar";
|
import HomeNavbar from "./../components/HomeNavbar";
|
||||||
import {
|
import {
|
||||||
Container,
|
|
||||||
Icon,
|
|
||||||
Image,
|
Image,
|
||||||
Menu,
|
|
||||||
Sidebar,
|
|
||||||
Responsive,
|
|
||||||
Header,
|
|
||||||
Divider,
|
Divider,
|
||||||
Message,
|
Message,
|
||||||
Grid
|
Grid
|
||||||
|
|
|
@ -1,14 +1,7 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { render } from "react-dom";
|
|
||||||
import HomeNavbar from "./../components/HomeNavbar";
|
import HomeNavbar from "./../components/HomeNavbar";
|
||||||
import {
|
import {
|
||||||
Container,
|
|
||||||
Icon,
|
|
||||||
Image,
|
Image,
|
||||||
Menu,
|
|
||||||
Sidebar,
|
|
||||||
Responsive,
|
|
||||||
Header,
|
|
||||||
Divider,
|
Divider,
|
||||||
Message,
|
Message,
|
||||||
Grid
|
Grid
|
||||||
|
|
|
@ -25,62 +25,101 @@ export default class Dashboard extends Component{
|
||||||
};
|
};
|
||||||
|
|
||||||
this.addRoom = this.addRoom.bind(this);
|
this.addRoom = this.addRoom.bind(this);
|
||||||
|
this.deleteRoom = this.deleteRoom.bind(this);
|
||||||
|
this.addDevice = this.addDevice.bind(this);
|
||||||
this.handleItemClick = this.handleItemClick.bind(this);
|
this.handleItemClick = this.handleItemClick.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
call.getAllRooms(this.props.tkn)
|
call.getAllRooms(this.props.tkn)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.setState({
|
if (res.status === 200){
|
||||||
rooms: res.data
|
this.setState({
|
||||||
});
|
rooms: res.data
|
||||||
|
});
|
||||||
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
});
|
});
|
||||||
call.getAllDevices(this.props.tkn)
|
call.getAllDevices(this.props.tkn)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.setState({
|
if (res.status === 200) {
|
||||||
devices: res.data
|
this.setState({
|
||||||
});
|
devices: res.data
|
||||||
|
});
|
||||||
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
addRoom(data) {
|
addRoom(data) {
|
||||||
call.createRoom(data)
|
call.createRoom(data)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log(res);
|
|
||||||
if (res.status === 200 && res.data) {
|
if (res.status === 200 && res.data) {
|
||||||
this.setState(state => ({
|
this.setState(state => ({
|
||||||
rooms: state.rooms.concat([res.data])
|
rooms: state.rooms.concat([res.data])
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
deleteRoom(id) {
|
deleteRoom() {
|
||||||
call.deleteRoom(id)
|
let data = {
|
||||||
|
id : this.state.activeItem
|
||||||
|
}
|
||||||
|
call.deleteRoom(data)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
//remove room in state.rooms
|
//remove room in state.rooms
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleItemClick(id) {
|
handleItemClick(id) {
|
||||||
// el -> obj of name and id
|
// 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(id, this.props.tkn)
|
this.setState({
|
||||||
.then(res => {
|
activeItem: id
|
||||||
this.setState({
|
|
||||||
devices: res.data
|
|
||||||
});
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err);
|
|
||||||
});
|
});
|
||||||
|
if ( id === -1) {
|
||||||
|
call.getAllDevices(this.props.tkn)
|
||||||
|
.then(res => {
|
||||||
|
if ( res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
devices: res.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
call.getAllDevicesByRoom(id, this.props.tkn)
|
||||||
|
.then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
devices: res.data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addDevice(data) {
|
||||||
|
data.params["roomId"] = this.state.activeItem;
|
||||||
|
call.devicePost(data, this.props.tkn)
|
||||||
|
.then(res => {
|
||||||
|
this.setState(state => ({
|
||||||
|
devices: state.devices.concat([res.data])
|
||||||
|
}));
|
||||||
|
}).catch(err => {
|
||||||
|
|
||||||
|
});
|
||||||
|
return this.state.devices;
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
@ -94,11 +133,11 @@ export default class Dashboard extends Component{
|
||||||
</Grid.Row>
|
</Grid.Row>
|
||||||
<Grid.Row color='black'>
|
<Grid.Row color='black'>
|
||||||
<Grid.Column width={3}>
|
<Grid.Column width={3}>
|
||||||
<Navbar addRoom={this.addRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
|
<Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
|
|
||||||
<Grid.Column width={13}>
|
<Grid.Column width={13}>
|
||||||
<DevicePanel devices={this.state.devices} />
|
<DevicePanel addDevice={this.addDevice} devices={this.state.devices} />
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
</Grid.Row>
|
</Grid.Row>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
|
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
|
||||||
import { call } from '../client_server';
|
import { call } from '../client_server';
|
||||||
|
import { Redirect } from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
export default class ChangePass extends Component {
|
export default class ChangePass extends Component {
|
||||||
|
@ -13,6 +14,7 @@ export default class ChangePass extends Component {
|
||||||
message: "",
|
message: "",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.handleChangePassword = this.handleChangePassword.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
onChangeHandler = (event) => {
|
onChangeHandler = (event) => {
|
||||||
|
@ -32,14 +34,16 @@ export default class ChangePass extends Component {
|
||||||
|
|
||||||
handleChangePassword = (e) => {
|
handleChangePassword = (e) => {
|
||||||
const params = {
|
const params = {
|
||||||
"confirmationToken" : this.props.query.confirmationToken ,
|
"confirmationToken" : this.props.query.token ,
|
||||||
"password" : this.state.password
|
"password" : this.state.password
|
||||||
}
|
}
|
||||||
call.resetPassword(params)
|
call.resetPassword(params)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.status === "Errore") {
|
if (res.status !== 200){
|
||||||
this.setState({ error: { state: true,
|
this.setState({ error: { state: true,
|
||||||
message: "Errore"}});
|
message: "Errore"}});
|
||||||
|
} else {
|
||||||
|
return <Redirect to="/" />
|
||||||
}
|
}
|
||||||
// else set a message that an email has been sent
|
// else set a message that an email has been sent
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
|
|
|
@ -4,7 +4,6 @@ import HomeNavbar from './../components/HomeNavbar';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Container,
|
Container,
|
||||||
Divider,
|
|
||||||
Grid,
|
Grid,
|
||||||
Header,
|
Header,
|
||||||
Icon,
|
Icon,
|
||||||
|
@ -70,7 +69,6 @@ class DesktopContainer extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { children } = this.props
|
const { children } = this.props
|
||||||
const { fixed } = this.state
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
|
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment } from "semantic-ui-react";
|
import { Menu, Grid, Icon, Responsive, Segment } from "semantic-ui-react";
|
||||||
import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
|
import {editButtonStyle} from "../components/dashboard/devices/styleComponents";
|
||||||
import ModalWindow from "../components/modalform";
|
import ModalWindow from "../components/modalform";
|
||||||
|
|
||||||
|
@ -19,7 +19,14 @@ class Navbar extends Component {
|
||||||
|
|
||||||
handleClick = (e, {id}) => {
|
handleClick = (e, {id}) => {
|
||||||
console.log(id);
|
console.log(id);
|
||||||
|
let obj = undefined;
|
||||||
|
this.props.rooms.forEach((e) => {
|
||||||
|
if (e.id === id) {
|
||||||
|
obj = e;
|
||||||
|
}
|
||||||
|
});
|
||||||
this.setState({ activeItem: id,
|
this.setState({ activeItem: id,
|
||||||
|
activeRoom: obj
|
||||||
});
|
});
|
||||||
this.props.handleItemClick(id)
|
this.props.handleItemClick(id)
|
||||||
}
|
}
|
||||||
|
@ -38,6 +45,7 @@ class Navbar extends Component {
|
||||||
<Menu inverted fluid vertical>
|
<Menu inverted fluid vertical>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={-1}
|
key={-1}
|
||||||
|
id={-1}
|
||||||
name='Home'
|
name='Home'
|
||||||
active={this.state.activeItem === 'Home'}
|
active={this.state.activeItem === 'Home'}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
|
@ -103,7 +111,7 @@ class Navbar extends Component {
|
||||||
</Grid>
|
</Grid>
|
||||||
</Responsive>
|
</Responsive>
|
||||||
<Responsive as={Segment} maxWidth={768}>
|
<Responsive as={Segment} maxWidth={768}>
|
||||||
//dropdown menu
|
|
||||||
</Responsive>
|
</Responsive>
|
||||||
</Segment.Group>
|
</Segment.Group>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
import React, {Component} from 'react';
|
|
||||||
import {Button } from 'semantic-ui-react';
|
|
||||||
|
|
||||||
|
|
||||||
export default class NavbarTest extends Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<h1>Ciao</h1>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,15 +1,6 @@
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import React, { Component } from "react";
|
import React from "react";
|
||||||
import HeaderController from "./../components/HeaderController";
|
import HeaderController from "./../components/HeaderController";
|
||||||
import { render } from "react-dom";
|
|
||||||
import {
|
|
||||||
Container,
|
|
||||||
Icon,
|
|
||||||
Image,
|
|
||||||
Menu,
|
|
||||||
Sidebar,
|
|
||||||
Responsive
|
|
||||||
} from "semantic-ui-react";
|
|
||||||
|
|
||||||
export default class TestHeaderController extends React.Component {
|
export default class TestHeaderController extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
|
|
Loading…
Reference in a new issue