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 {
let userJsonString = localStorage.getItem("token");
if (userJsonString) {
let exp = localStorage.getItem("exp");
let date = new Date().getTime();
if (userJsonString && exp && date < exp) {
loggedIn = true;
}
}catch(exception) {
@ -63,6 +65,7 @@ class App extends Component {
.then(res => {
if (res.data && res.status === 200) {
localStorage.setItem("token", res.data.jwttoken);
localStorage.setItem("exp", new Date().getTime() + (60*60*5))
call.setToken(res.data.jwttoken);
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 } })
},
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) {
return axios.delete(config + 'room/'+data.id, { headers: { Authorization : "Bearer " + tkn } });
@ -71,8 +71,12 @@ export var call = {
devicePost: function(data, headers) {
return axios.post(config + data.device, data.params, { headers: { Authorization : "Bearer " + tkn } })
},
deviceUpdate: function(data, headers) {
return axios.put(config + 'device', data, { headers: { Authorization : "Bearer " + tkn } })
deviceUpdate: function(data, typeDevice) {
let url = 'device';
if (typeDevice) {
url = typeDevice;
}
return axios.put(config + url, data, { headers: { Authorization : "Bearer " + tkn } })
},
deviceDelete: function(data, headers) {
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);
});
} else {
call.getAllDevicesByRoom(this.state.settingsDeviceId)
call.getAllDevicesByRoom(this.props.activeItem)
.then(res => {
if (res.status === 200) {
this.setState({
@ -98,6 +98,7 @@ export default class DevicePanel extends Component {
.then(res => {
if (res.status === 200) {
this.getDevices();
this.forceUpdate();
}
}).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 {CircularInput, CircularProgress, CircularThumb, CircularTrack} from "react-circular-input";
import {valueStyle, intensityLightStyle, style, nameStyle} from "./LightStyle";
import { call } from '../../../client_server';
export default class Light extends Component {
constructor(props) {
@ -28,7 +29,14 @@ export default class Light extends Component {
};
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 = () => {
@ -52,7 +60,7 @@ export default class Light extends Component {
render() {
const intensityLightView = (
<CircularInput
value={this.state.intensity}
value={this.props.device.intensity}
onChange={this.setIntensity}
style={style}
>
@ -61,7 +69,7 @@ export default class Light extends Component {
<CircularThumb/>
<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 style={intensityLightStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
{this.props.device.name}
@ -83,7 +91,7 @@ export default class Light extends Component {
deviceId={this.props.device.id}
edit={this.props.edit}
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)}/>
{this.state.intensity ? (intensityLightView) : (normalLightView)}
{this.props.device.intensity ? (intensityLightView) : (normalLightView)}
</StyledDiv>
)
}

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

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

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

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

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

@ -1,5 +1,5 @@
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 MyHeader from '../components/HeaderController'

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

@ -1,16 +1,9 @@
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
} from "semantic-ui-react";

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