smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch '41-fix-all-warnings-and-clean-code' into 'dev'

Browse source 
fix all warnings and cleaned code

Closes #41

See merge request sa4-2020/the-sanmarinoes/frontend!40
This commit is contained in:
Claudio Maggioni 2020-03-19 12:14:38 +01:00
commit 4c15df7058
18 changed files with 192 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
smart-hut/src/App.js
View file

@ -44,18 +44,22 @@ class App extends Component {
}
componentDidMount() {
if (this.props.location) {
const values = queryString.parse(this.props.location.search);
if (window.location) {
const values = queryString.parse(window.location.search);
console.log(values);
this.setState({
query : values
});
} else {
this.setState({
query : "ciao"
});
}
}
auth(data) {
return call.login(data.params)
.then(res => {
console.log(res);
if (res.data && res.status === 200) {
localStorage.setItem("token", res.data.jwttoken);
this.setState(
@ -80,7 +84,6 @@ class App extends Component {
};
logout() {
console.log("logout")
this.setState({
loggedIn : false,
});
@ -109,7 +112,7 @@ class App extends Component {
<Route path="/sent-email-reg" >
<ConfirmRegistration />
</Route>
<Route path="/forgot-pass-reset" >
<Route path="/password-reset" >
<ChangePass query={this.state.query}/>
</Route>
<Route component={FourOhFour} />

84
smart-hut/src/client_server.js
View file

@ -17,132 +17,56 @@ const tkn = localStorage.getItem("token");
export var call = {
login: function(data, headers) {
return axios.post(config +'auth/login', data)
.then(res => {
return res;
}).catch(err => {
return {status : "Errore"};
});
},
register: function(data, headers) {
return axios.post(config + 'register', data)
.then(res => {
return res;
}).catch(err => {
//console.error(err);
return {status : "Errore"};
});
},
initResetPassword: function(data, headers) {
return axios.post(config + 'register/init-reset-password', data)
.then(res => {
return res;
}).catch(err => {
return {status : "Errore"};
});
},
resetPassword: function(data, headers) {
return axios.put(config + 'register/reset-password', data)
.then(res => {
return res;
}).catch(err => {
return {status : "Errore"};
});
},
getAllRooms: function(token) {
if (!token){
token = tkn;
}
return axios.get(config + 'room', { headers: { Authorization : "Bearer " + token } })
.then(res => {
return res;
}).catch(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;
});
return axios.get(config + 'device', { headers: { Authorization : "Bearer " + token } });
},
getAllDevicesByRoom: function(id, token) {
if (!token){
token = tkn;
}
return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } })
.then(res => {
return res;
}).catch(err => {
return err;
});
return axios.get(config + 'room/' + id + '/devices' , { headers: { Authorization : "Bearer " + token } });
},
createRoom: function(data, headers) {
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
.then(res => {
return res;
}).catch(err => {
return err;
});
},
updateRoom: function(data, headers) {
return axios.put(config + 'room/'+data.id)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deleteRoom: function(data, headers) {
return axios.delete(config + 'room/'+data.id)
.then(res => {
return res;
}).catch(err => {
return err;
});
return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
},
devicePost: function(data, headers) {
return axios.post(config + data.device, data.params)
.then(res => {
return res;
}).catch(err => {
return err;
});
return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
},
deviceUpdate: function(data, headers) {
return axios.put(config + data.device, data.params)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceDelete: function(data, headers) {
return axios.delete(config + data.device + '/' + data.id, data.params)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceGetById: function(data, headers) {
return axios.get(config + data.device + '/' + data.id)
.then(res => {
return res;
}).catch(err => {
return err;
});
},
deviceGetAll: function(data, headers) {
return axios.get(config + data.device)
.then(res => {
return res;
}).catch(err => {
return err;
});
}
};

10
smart-hut/src/components/HeaderController.js
View file

@ -1,6 +1,5 @@
import React, { Component } from "react";
import { render } from "react-dom";
import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
import React from "react";
import { Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
import { Segment, Image } from 'semantic-ui-react'
const ImageExampleWrapped = () => (
@ -23,10 +22,6 @@ const ImageExampleWrapped3 = () => (
<Image src='title2.png' size='medium' centered/>
)
const HeaderExampleIconProp = () => (
<Header as='h2' icon='plug' color="white" content='Smart Hut' />
)
const GridExampleInverted = (props) => (
@ -67,7 +62,6 @@ const GridExampleInverted = (props) => (
export default class MyHeader extends React.Component {
render() {
console.log(this.props)
return (
<div>
<GridExampleInverted logout={this.props.logout} />

1
smart-hut/src/components/HomeNavbar.js
View file

@ -1,6 +1,5 @@
import _ from "lodash";
import React, { Component } from "react";
import { render } from "react-dom";
import {
Container,
Icon,

3
smart-hut/src/components/SelectIcons.js
View file

@ -1,5 +1,5 @@
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 {
@ -29,7 +29,6 @@ export default class SelectIcons extends Component {
['trophy', 'wrench', 'image', 'book', 'university', 'medkit'],
['paw', 'tree', 'utensils', 'male', 'female', 'life ring outline']];
var colums = 0;
return (
<Grid centered>
{

121
smart-hut/src/components/dashboard/DevicePanel.js
View file

@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {
Grid,
Grid,
} from "semantic-ui-react";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
@ -9,67 +9,76 @@ import NewDevice from "./devices/NewDevice";
export default class DevicePanel extends Component {
constructor(props) {
super(props);
this.state = {
editMode : false,
devices : this.props.devices,
};
}
constructor(props) {
super(props);
this.state = {
editMode : false,
};
this.addDevice = this.addDevice.bind(this);
}
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));
changeDeviceData = (deviceId, newSettings) => {
changeDeviceData = (deviceId, newSettings) => {
console.log(newSettings.name, " <-- new name --> ", deviceId );
this.state.devices.map(device => {
if(device.id === deviceId){
for(let prop in newSettings){
if(device.hasOwnProperty(prop)){
if(prop==="name"){
if(checkMaxLength(newSettings[prop])){
device[prop] = newSettings[prop];
}
else{
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
}
}else{
device[prop] = newSettings[prop];
console.log(newSettings.name, " <-- new name --> ", deviceId );
this.props.devices.map(device => {
if(device.id === deviceId){
for(let prop in newSettings){
if(device.hasOwnProperty(prop)){
if(prop==="name"){
if(checkMaxLength(newSettings[prop])){
device[prop] = newSettings[prop];
}
else{
alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
}
}else{
device[prop] = newSettings[prop];
}
}
}
}
return null;
});
this.forceUpdate();
};
}
}
}
return null;
});
this.forceUpdate();
};
addDevice(data) {
const ds = this.props.addDevice(data);
this.setState({
devices: ds
});
}
render() {
return (
<div style={panelStyle}>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
<Grid doubling columns={this.state.devices.length > 0 ? this.state.devices.length : 1} divided="vertically">
{
this.state.devices ?
this.state.devices.map((e, i) => {
return (
<Grid.Column key={i}>
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
</Grid.Column>
)
})
:
null
}
<Grid.Column>
<NewDevice devices={this.state.devices}/>
</Grid.Column>
</Grid>
</div>
)
}
render() {
const ds = this.state.devices ? this.state.devices : this.props.devices;
return (
<div style={panelStyle}>
<button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
<Grid doubling columns={ds.length > 0 ? ds.length : 1} divided="vertically">
{
ds ?
ds.map((e, i) => {
return (
<Grid.Column key={i}>
<DeviceType type={e.kind} onChangeData={this.changeDeviceData} device={e} edit={this.state.editMode}/>
</Grid.Column>
)
})
:
null
}
<Grid.Column>
<NewDevice addDevice={this.addDevice} devices={ds}/>
</Grid.Column>
</Grid>
</div>
)
}
}
}

10
smart-hut/src/components/dashboard/devices/DeviceTypeController.js
View file

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React from 'react';
import Light from "./Light";
import SmartPlug from "./SmartPlug";
import Sensor from "./Sensor";
@ -9,8 +9,8 @@ import Switcher from "./Switch";
const DeviceType = (props) => {
switch(props.type) {
case "light":
return <Light onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
case "regular-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":
@ -19,6 +19,10 @@ const DeviceType = (props) => {
return <SmartPlug onChangeData={props.changeDeviceData} device={props.device} edit={props.edit} />
case "switch":
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 ""
}
}

13
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

@ -25,6 +25,7 @@ export default class NewDevice extends Component {
openModal : false
};
this.baseState = this.state
this.createDevice = this.createDevice.bind(this);
}
handleOpen = () => {this.setState({openModal : true})};
@ -59,8 +60,16 @@ export default class NewDevice extends Component {
this.setState({lightsAttached : d.value});
};
createDevice = () => {
createDevice() {
// 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();
};
@ -70,7 +79,7 @@ export default class NewDevice extends Component {
{
key: 'light',
text: 'Normal Light',
value: 'light',
value: 'regularLight',
image: {avatar: true, src: '/img/lightOn.svg'},
},
{

1
smart-hut/src/components/dashboard/devices/SmartPlugStyle.js
View file

@ -1,4 +1,3 @@
import {iconStyle} from "./styleComponents";
export const energyConsumedStyle = {
color : "black",

28
smart-hut/src/components/modalform.js
View file

@ -1,5 +1,5 @@
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";
export default class ModalWindow extends Component {
@ -39,10 +39,7 @@ export default class ModalWindow extends Component {
}
deleteRoom = (e) => {
let data = {
"id" : this.state.id
}
this.props.deleteRoom(data);
this.props.deleteRoom();
this.closeModal();
}
@ -77,40 +74,39 @@ export default class ModalWindow extends Component {
return (
<div>
{this.props.type == "new" ?
{this.props.type === "new" ?
<Button icon labelPosition='left' inverted onClick={this.openModal}>
<Icon name='plus' size='small'/>
ADD ROOM
</Button>
:
<Icon name="pencil" size="small" onClick={this.openModal}/>
null
}
<Modal
onClose={this.closeModal}
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>
<Form>
<p>Insert the name of the room:</p>
<Form.Field>
<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>
<p>Insert an image of the room:</p>
<Form.Field>
<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>
<div style={spaceDiv}>
<p>Select an icon:</p>
{this.props.type == "new" ? "home" : this.props.idRoom.icon }
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
<SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
</div>
{this.props.type == "modify" ?
{this.props.type === "modify" ?
<Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
<Icon name='trash alternate' />
Delete room
@ -119,12 +115,12 @@ export default class ModalWindow extends Component {
</Modal.Content>
<Modal.Actions>
<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 color='green' onClick={this.props.type == "new" ? this.addRoomModal : this.modifyRoomModal}>
<Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes"}
<Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
<Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
</Button>
</Modal.Actions>

7
smart-hut/src/views/ConfirmForgotPassword.js
View file

@ -1,14 +1,7 @@
import React, { Component } from "react";
import { render } from "react-dom";
import HomeNavbar from "./../components/HomeNavbar";
import {
Container,
Icon,
Image,
Menu,
Sidebar,
Responsive,
Header,
Divider,
Message,
Grid

7
smart-hut/src/views/ConfirmRegistration.js
View file

@ -1,14 +1,7 @@
import React, { Component } from "react";
import { render } from "react-dom";
import HomeNavbar from "./../components/HomeNavbar";
import {
Container,
Icon,
Image,
Menu,
Sidebar,
Responsive,
Header,
Divider,
Message,
Grid

91
smart-hut/src/views/Dashboard.js
View file

@ -25,62 +25,101 @@ export default class Dashboard extends Component{
};
this.addRoom = this.addRoom.bind(this);
this.deleteRoom = this.deleteRoom.bind(this);
this.addDevice = this.addDevice.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
}
componentDidMount() {
call.getAllRooms(this.props.tkn)
.then(res => {
this.setState({
rooms: res.data
});
if (res.status === 200){
this.setState({
rooms: res.data
});
}
}).catch(err => {
console.log(err);
});
console.log(err);
});
call.getAllDevices(this.props.tkn)
.then(res => {
this.setState({
devices: res.data
});
if (res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
console.log(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);
});
console.log(err);
});
};
deleteRoom(id) {
call.deleteRoom(id)
deleteRoom() {
let data = {
id : this.state.activeItem
}
call.deleteRoom(data)
.then(res => {
//remove room in state.rooms
}).catch(err => {
console.log(err);
});
console.log(err);
});
}
handleItemClick(id) {
// el -> obj of name and id
//da fare richiesta get della room e settare activeItem
call.getAllDevicesByRoom(id, this.props.tkn)
.then(res => {
this.setState({
devices: res.data
});
}).catch(err => {
console.log(err);
this.setState({
activeItem: id
});
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 () {
@ -94,11 +133,11 @@ export default class Dashboard extends Component{
</Grid.Row>
<Grid.Row color='black'>
<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 width={13}>
<DevicePanel devices={this.state.devices} />
<DevicePanel addDevice={this.addDevice} devices={this.state.devices} />
</Grid.Column>
</Grid.Row>
</Grid>

8
smart-hut/src/views/Forgot-pass-reset.js
View file

@ -1,6 +1,7 @@
import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
import { call } from '../client_server';
import { Redirect } from "react-router-dom";
export default class ChangePass extends Component {
@ -13,6 +14,7 @@ export default class ChangePass extends Component {
message: "",
}
}
this.handleChangePassword = this.handleChangePassword.bind(this);
}
onChangeHandler = (event) => {
@ -32,14 +34,16 @@ export default class ChangePass extends Component {
handleChangePassword = (e) => {
const params = {
"confirmationToken" : this.props.query.confirmationToken ,
"confirmationToken" : this.props.query.token ,
"password" : this.state.password
}
call.resetPassword(params)
.then(res => {
if (res.status === "Errore") {
if (res.status !== 200){
this.setState({ error: { state: true,
message: "Errore"}});
} else {
return <Redirect to="/" />
}
// else set a message that an email has been sent
}).catch(err => {

2
smart-hut/src/views/Home.js
View file

@ -4,7 +4,6 @@ import HomeNavbar from './../components/HomeNavbar';
import {
Button,
Container,
Divider,
Grid,
Header,
Icon,
@ -70,7 +69,6 @@ class DesktopContainer extends Component {
render() {
const { children } = this.props
const { fixed } = this.state
return (
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>

12
smart-hut/src/views/Navbar.js
View file

@ -1,5 +1,5 @@
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 ModalWindow from "../components/modalform";
@ -19,7 +19,14 @@ class Navbar extends Component {
handleClick = (e, {id}) => {
console.log(id);
let obj = undefined;
this.props.rooms.forEach((e) => {
if (e.id === id) {
obj = e;
}
});
this.setState({ activeItem: id,
activeRoom: obj
});
this.props.handleItemClick(id)
}
@ -38,6 +45,7 @@ class Navbar extends Component {
<Menu inverted fluid vertical>
<Menu.Item
key={-1}
id={-1}
name='Home'
active={this.state.activeItem === 'Home'}
onClick={this.handleClick}
@ -103,7 +111,7 @@ class Navbar extends Component {
</Grid>
</Responsive>
<Responsive as={Segment} maxWidth={768}>
//dropdown menu
</Responsive>
</Segment.Group>
</div>

12
smart-hut/src/views/NavbarTest.js
View file

@ -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>
)
}
}

11
smart-hut/src/views/TestHeaderController.js
View file

@ -1,15 +1,6 @@
import _ from "lodash";
import React, { Component } from "react";
import React from "react";
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 {
render () {