Merge branch '47-fixed-bugs' into 'dev'
fixed bugs and cleaned code Closes #47 See merge request sa4-2020/the-sanmarinoes/frontend!48
This commit is contained in:
commit
d4cec8a1fc
9 changed files with 180 additions and 103 deletions
|
@ -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(
|
||||
{
|
||||
|
|
|
@ -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 } })
|
||||
|
|
|
@ -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 => {
|
||||
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue