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

fixed bugs and cleaned code

Browse source
This commit is contained in:
britea 2020-03-22 17:58:27 +01:00
parent 84c963b559
commit c215daf44d
9 changed files with 180 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,7 +29,9 @@ class App extends Component {
try { try {
let userJsonString = localStorage.getItem("token"); let userJsonString = localStorage.getItem("token");
if (userJsonString) { let exp = localStorage.getItem("exp");
let date = new Date().getTime();
if (userJsonString && exp && date < exp) {
loggedIn = true; loggedIn = true;
} }
}catch(exception) { }catch(exception) {
@ -63,6 +65,7 @@ class App extends Component {
.then(res => { .then(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);
localStorage.setItem("exp", new Date().getTime() + (60*60*5))
call.setToken(res.data.jwttoken); call.setToken(res.data.jwttoken);
this.setState( this.setState(
{ {

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

@ -63,7 +63,7 @@ export var call = {
return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } }) return axios.post(config + 'room', data, { headers: { Authorization : "Bearer " + tkn } })
}, },
updateRoom: function(data, headers) { updateRoom: function(data, headers) {
return axios.put(config + 'room/'+data.id) return axios.put(config + 'room?name='+ data.name, data, { headers: { Authorization : "Bearer " + tkn } })
}, },
deleteRoom: function(data, headers) { deleteRoom: function(data, headers) {
return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } }); return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
@ -71,8 +71,12 @@ export var call = {
devicePost: function(data, headers) { devicePost: function(data, headers) {
return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } }) return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
}, },
deviceUpdate: function(data, headers) { deviceUpdate: function(data, typeDevice) {
return axios.put(config + 'device', data, { headers: { Authorization : "Bearer " + tkn } }) let url = 'device';
if (typeDevice) {
url = typeDevice;
}
return axios.put(config + url, data, { headers: { Authorization : "Bearer " + tkn } })
}, },
deviceDelete: function(data, headers) { deviceDelete: function(data, headers) {
return axios.delete(config + data.device + '/' + data.id, {}, { headers: { Authorization : "Bearer " + tkn } }) return axios.delete(config + data.device + '/' + data.id, {}, { headers: { Authorization : "Bearer " + tkn } })

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

@ -68,7 +68,7 @@ export default class DevicePanel extends Component {
console.log(err); console.log(err);
}); });
} else { } else {
call.getAllDevicesByRoom(this.state.settingsDeviceId) call.getAllDevicesByRoom(this.props.activeItem)
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
this.setState({ this.setState({
@ -98,6 +98,7 @@ export default class DevicePanel extends Component {
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
this.getDevices(); this.getDevices();
this.forceUpdate();
} }
}).catch(err => { }).catch(err => {

16
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -12,6 +12,7 @@ import Settings from "./DeviceSettings";
import {Image} from "semantic-ui-react"; import {Image} from "semantic-ui-react";
import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input"; import {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input";
import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle"; import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";
import { call } from '../../../client_server';
export default class Light extends Component { export default class Light extends Component {
constructor(props) { constructor(props) {
@ -28,7 +29,14 @@ export default class Light extends Component {
}; };
setIntensity = (newValue) => { setIntensity = (newValue) => {
this.setState({intensity: newValue}); this.props.device.intensity = Math.round(newValue) <= 1 ? 1 : Math.round(newValue );
console.log(this.props.device.intensity)
call.deviceUpdate(this.props.device, 'dimmableLight')
.then(res => {
if (res.status === 200 ) {
this.setState({intensity: newValue});
}
})
}; };
getIcon = () => { getIcon = () => {
@ -52,7 +60,7 @@ export default class Light extends Component {
render() { render() {
const intensityLightView = ( const intensityLightView = (
<CircularInput <CircularInput
value={this.state.intensity} value={this.props.device.intensity}
onChange={this.setIntensity} onChange={this.setIntensity}
style={style} style={style}
> >
@ -61,7 +69,7 @@ export default class Light extends Component {
<CircularThumb/> <CircularThumb/>
<text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold"> <text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
{Math.round(this.state.intensity * 100)}% {Math.round(this.props.device.intensity)}%
</text> </text>
<text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold"> <text style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
{this.props.device.name} {this.props.device.name}
@ -83,7 +91,7 @@ export default class Light extends Component {
deviceId={this.props.device.id} deviceId={this.props.device.id}
edit={this.props.edit} edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/> onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
{this.state.intensity ? (intensityLightView) : (normalLightView)} {this.props.device.intensity ? (intensityLightView) : (normalLightView)}
</StyledDiv> </StyledDiv>
) )
} }

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

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button, Header, Modal, Form, Input, Icon } from 'semantic-ui-react' import { Button, Header, Modal, Form, Input, Icon, Responsive } from 'semantic-ui-react'
import SelectIcons from "./SelectIcons"; import SelectIcons from "./SelectIcons";
export default class ModalWindow extends Component { export default class ModalWindow extends Component {
@ -22,7 +22,7 @@ export default class ModalWindow extends Component {
let data = { let data = {
"icon" : this.state.selectedIcon, "icon" : this.state.selectedIcon,
"name" : this.state.name, "name" : this.state.name,
"images" : this.state.img "image" : this.state.img
} }
this.props.addRoom(data); this.props.addRoom(data);
this.closeModal(); this.closeModal();
@ -30,9 +30,9 @@ export default class ModalWindow extends Component {
modifyRoomModal = (e) => { modifyRoomModal = (e) => {
let data = { let data = {
"icon" : this.state.selectedIcon, "icon" : this.state.selectedIcon === "" ? this.props.idRoom.icon : this.state.selectedIcon ,
"name" : this.state.name, "name" : this.state.name === ""? this.props.idRoom.name : this.state.name,
"images" : this.state.img "image" : this.state.img
} }
this.props.updateRoom(data); this.props.updateRoom(data);
this.closeModal(); this.closeModal();
@ -44,6 +44,7 @@ export default class ModalWindow extends Component {
} }
changeSomething = (event) => { changeSomething = (event) => {
let nam = event.target.name; let nam = event.target.name;
let val = event.target.value; let val = event.target.value;
this.setState({[nam]: val}); this.setState({[nam]: val});
@ -73,15 +74,30 @@ export default class ModalWindow extends Component {
return ( return (
<div> <div>
<Responsive minWidth={768} >
{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>
: :
null <Icon name='pencil' size='small' onClick={this.openModal} />
} }
</Responsive>
<Responsive maxWidth={768} >
{
this.props.type === "new" ?
<Button icon fluid labelPosition='left' onClick={this.openModal}>
<Icon name='plus' size='small'/>
ADD ROOM
</Button>
:
<Button icon fluid labelPosition='left' onClick={this.openModal}>
<Icon name='pencil' size='small'/>
EDIT ROOM
</Button>
}
</Responsive>
<Modal <Modal
onClose={this.closeModal} onClose={this.closeModal}
@ -92,12 +108,12 @@ export default class ModalWindow extends Component {
<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" && this.props.idRoom !== -1 ? 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" && this.props.idRoom !== -1 ? null : this.props.idRoom.images }/>
</Form.Field> </Form.Field>
</Form> </Form>

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

@ -4,7 +4,7 @@ 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 { Grid } from 'semantic-ui-react' import { Grid, Responsive } from 'semantic-ui-react'
/* /*
rooms -> actual rooms rooms -> actual rooms
activeItem -> the current room in view activeItem -> the current room in view
@ -26,40 +26,58 @@ 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.deleteRoom = this.deleteRoom.bind(this);
this.updateRoom = this.updateRoom.bind(this);
this.addDevice = this.addDevice.bind(this); this.addDevice = this.addDevice.bind(this);
this.handleItemClick = this.handleItemClick.bind(this); this.handleItemClick = this.handleItemClick.bind(this);
} }
getDevices() {
if (this.state.activeItem === -1) {
call.getAllDevices()
.then(res => {
if ( res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
console.log(err);
});
} else {
call.getAllDevicesByRoom(this.state.activeItem)
.then(res => {
if (res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
});
}
}
getRooms() {
call.getAllRooms(this.props.tkn)
.then(res => {
this.setState({
rooms: res.data
})
}).catch(err => {
});
}
componentDidMount() { componentDidMount() {
call.getAllRooms(this.props.tkn) this.getRooms();
.then(res => { this.getDevices();
if (res.status === 200){
this.setState({
rooms: res.data
});
}
}).catch(err => {
console.log(err);
});
call.getAllDevices(this.props.tkn)
.then(res => {
if (res.status === 200) {
this.setState({
devices: res.data
});
}
}).catch(err => {
console.log(err);
});
} }
addRoom(data) { addRoom(data) {
call.createRoom(data) call.createRoom(data)
.then(res => { .then(res => {
if (res.status === 200 && res.data) { if (res.status === 200 && res.data) {
this.setState(state => ({ this.getRooms();
rooms: state.rooms.concat([res.data])
}));
} }
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
@ -73,11 +91,25 @@ export default class Dashboard extends Component{
call.deleteRoom(data) call.deleteRoom(data)
.then(res => { .then(res => {
//remove room in state.rooms //remove room in state.rooms
this.getRooms();
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}); });
} }
updateRoom(data) {
console.log(data)
call.updateRoom(data)
.then(res => {
if (res.status === 200 && res.data) {
this.getRooms();
this.forceUpdate();
}
}).catch(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
@ -99,10 +131,10 @@ export default class Dashboard extends Component{
call.getAllDevicesByRoom(id, this.props.tkn) call.getAllDevicesByRoom(id, this.props.tkn)
.then(res => { .then(res => {
if (res.status === 200) { if (res.status === 200) {
console.log(res.data);
this.setState({ this.setState({
devices: res.data devices: res.data
}); });
this.forceUpdate();
} }
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
@ -127,22 +159,43 @@ export default class Dashboard extends Component{
render () { render () {
return( return(
<div style={{height : "110vh", background: '#1b1c1d'}}> <div style={{height : "110vh", background: '#1b1c1d'}}>
<Grid > <Responsive minWidth={768} >
<Grid.Row color='black'> <Grid >
<Grid.Column> <Grid.Row color='black'>
<MyHeader logout={this.props.logout} /> <Grid.Column>
</Grid.Column> <MyHeader logout={this.props.logout} />
</Grid.Row> </Grid.Column>
<Grid.Row color='black'> </Grid.Row>
<Grid.Column width={3}> <Grid.Row color='black'>
<Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/> <Grid.Column width={3}>
</Grid.Column> <Navbar addRoom={this.addRoom} updateRoom={this.updateRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
</Grid.Column>
<Grid.Column width={13}> <Grid.Column width={13}>
<DevicePanel tkn={this.props.tkn} activeItem={this.state.activeItem} addDevice={this.addDevice} devices={this.state.devices} /> <DevicePanel tkn={this.props.tkn} activeItem={this.state.activeItem} addDevice={this.addDevice} devices={this.state.devices} />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Responsive>
<Responsive maxWidth={768} >
<Grid inverted>
<Grid.Row color='black'>
<Grid.Column>
<MyHeader logout={this.props.logout} />
</Grid.Column>
</Grid.Row>
<Grid.Row color='black'>
<Grid.Column color='black'>
<Navbar addRoom={this.addRoom} deleteRoom={this.deleteRoom} rooms={this.state.rooms} handleItemClick={this.handleItemClick}/>
</Grid.Column>
</Grid.Row>
<Grid.Row >
<Grid.Column >
<DevicePanel tkn={this.props.tkn} activeItem={this.state.activeItem} addDevice={this.addDevice} devices={this.state.devices} />
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</div> </div>
) )
} }

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

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import { Header, Grid, Message, Button, Segment, Responsive, Image} from 'semantic-ui-react'; import { Grid, Button, Segment, Responsive, Image} from 'semantic-ui-react';
import {Link } from "react-router-dom"; import {Link } from "react-router-dom";
import MyHeader from '../components/HeaderController' import MyHeader from '../components/HeaderController'

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

@ -1,16 +1,9 @@
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, Container,
Icon,
Image,
Menu,
Sidebar,
Responsive,
Header, Header,
Divider, Divider,
Message,
Grid Grid
} from "semantic-ui-react"; } from "semantic-ui-react";

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

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Menu, Grid, Icon, Button, Header, Image, Modal, Responsive, Segment, Dropdown } from "semantic-ui-react"; import { Menu, Grid, Icon, Responsive, Segment, Dropdown } 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";
@ -7,8 +7,8 @@ class Navbar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
activeItem: 'Home',
activeItemName: 'Home', activeItemName: 'Home',
activeItem: -1,
edited: "", edited: "",
editMode : false editMode : false
} }
@ -24,18 +24,19 @@ class Navbar extends Component {
obj = e; obj = e;
} }
}); });
this.setState({ this.setState({
activeItem: id, activeItem: id,
activeItemName: name, activeRoom: obj,
activeRoom: obj activeItemName: name
}); });
this.props.handleItemClick(id) this.props.handleItemClick(id)
} }
render(){ render(){
//const { activeItem } = this.state //const { activeItem } = this.state
return ( return (
<div> <div style={{background: '#1b1c1d'}}>
<Segment.Group> <Segment.Group>
<Responsive as={Segment} minWidth={768}> <Responsive as={Segment} minWidth={768}>
<Grid> <Grid>
@ -48,7 +49,7 @@ class Navbar extends Component {
key={-1} key={-1}
id={-1} id={-1}
name='Home' name='Home'
active={this.state.activeItem === 'Home'} active={this.state.activeItem === -1}
onClick={this.handleClick} onClick={this.handleClick}
> >
<Grid> <Grid>
@ -83,10 +84,10 @@ class Navbar extends Component {
{e.name} {e.name}
</Grid.Column> </Grid.Column>
<Grid.Column floated="right"> <Grid.Column floated="right">
{this.state.editMode ? {this.state.editMode ?
<ModalWindow type="modify" idRoom={e} modifyRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/> <ModalWindow type="modify" idRoom={e} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
: null : null
} }
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
@ -162,23 +163,21 @@ class Navbar extends Component {
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</Menu> </Menu>
{
<Grid> this.state.activeItem !== -1 ?
<Grid.Row> <Grid>
<Grid.Column width={8}> <Grid.Row>
<Button icon fluid labelPosition='left'> <Grid.Column width={8}>
<Icon name='plus' size='small'/> <ModalWindow type="new" idRoom={this.state.activeItem === -1? -1 : this.state.activeRoom} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
ADD ROOM </Grid.Column>
</Button> <Grid.Column width={8}>
</Grid.Column> <ModalWindow type="modify" idRoom={this.state.activeItem === -1? -1 : this.state.activeRoom} updateRoom={this.props.updateRoom} deleteRoom={this.props.deleteRoom}/>
<Grid.Column width={8}> </Grid.Column>
<Button icon fluid labelPosition='left'> </Grid.Row>
<Icon name='pencil' size='small'/> </Grid>
EDIT ROOM :
</Button> null
</Grid.Column> }
</Grid.Row>
</Grid>
</Responsive> </Responsive>
</Segment.Group> </Segment.Group>