Merge branch 'dev' into 'fix-mobile'
# Conflicts: # smart-hut/src/views/Navbar.js
This commit is contained in:
commit
c9b4f22896
8 changed files with 109 additions and 37 deletions
42
smart-hut/public/img/refresh.svg
Normal file
42
smart-hut/public/img/refresh.svg
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 341.333 341.333" style="enable-background:new 0 0 341.333 341.333;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M341.227,149.333V0l-50.133,50.133C260.267,19.2,217.707,0,170.56,0C76.267,0,0.107,76.373,0.107,170.667
|
||||||
|
s76.16,170.667,170.453,170.667c79.467,0,146.027-54.4,164.907-128h-44.373c-17.6,49.707-64.747,85.333-120.533,85.333
|
||||||
|
c-70.72,0-128-57.28-128-128s57.28-128,128-128c35.307,0,66.987,14.72,90.133,37.867l-68.8,68.8H341.227z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 912 B |
|
@ -277,4 +277,9 @@ export var call = {
|
||||||
deviceGetAll: function (data, headers) {
|
deviceGetAll: function (data, headers) {
|
||||||
return axios.get(config + data.device);
|
return axios.get(config + data.device);
|
||||||
},
|
},
|
||||||
|
smartPlugReset: function (id) {
|
||||||
|
return axios.delete(config + "smartPlug/" + id + "/meter", {
|
||||||
|
headers: { Authorization: "Bearer " + tkn },
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,21 +1,8 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import {
|
import { Grid, Divider, Button, Label, Responsive } from "semantic-ui-react";
|
||||||
Dropdown,
|
|
||||||
Icon,
|
|
||||||
Grid,
|
|
||||||
Divider,
|
|
||||||
Button,
|
|
||||||
Label,
|
|
||||||
Responsive,
|
|
||||||
} from "semantic-ui-react";
|
|
||||||
import { Segment, Image } from "semantic-ui-react";
|
import { Segment, Image } from "semantic-ui-react";
|
||||||
import { BrowserView, MobileView } from "react-device-detect";
|
|
||||||
import { call } from "../client_server";
|
import { call } from "../client_server";
|
||||||
|
|
||||||
const AvatarImage = () => (
|
|
||||||
<Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
|
|
||||||
);
|
|
||||||
|
|
||||||
const IconHomeImage = () => (
|
const IconHomeImage = () => (
|
||||||
<Image
|
<Image
|
||||||
src="smart-home.png"
|
src="smart-home.png"
|
||||||
|
|
|
@ -5,7 +5,12 @@
|
||||||
The user can reset this value.
|
The user can reset this value.
|
||||||
**/
|
**/
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
import {
|
||||||
|
BottomPanel,
|
||||||
|
StyledDiv,
|
||||||
|
editModeIconStyle,
|
||||||
|
editModeStyleLeft,
|
||||||
|
} from "./styleComponents";
|
||||||
import Settings from "./DeviceSettings";
|
import Settings from "./DeviceSettings";
|
||||||
import { Image } from "semantic-ui-react";
|
import { Image } from "semantic-ui-react";
|
||||||
import {
|
import {
|
||||||
|
@ -50,6 +55,16 @@ export default class SmartPlug extends Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
resetSmartPlug = () => {
|
||||||
|
call.smartPlugReset(this.props.device.id).then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
energyConsumed: (res.data.totalConsumption / 1000).toFixed(3),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
getIcon = () => {
|
getIcon = () => {
|
||||||
if (this.state.turnedOn) {
|
if (this.state.turnedOn) {
|
||||||
return this.iconOn;
|
return this.iconOn;
|
||||||
|
@ -60,7 +75,7 @@ export default class SmartPlug extends Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.setState({
|
this.setState({
|
||||||
turnedOn: this.props.device.on,
|
turnedOn: this.props.device.on,
|
||||||
energyConsumed: this.props.device.totalConsumption,
|
energyConsumed: (this.props.device.totalConsumption / 1000).toFixed(3),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,6 +89,13 @@ export default class SmartPlug extends Component {
|
||||||
this.props.onChangeData(id, newSettings)
|
this.props.onChangeData(id, newSettings)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
{this.props.edit.mode ? (
|
||||||
|
<span style={editModeStyleLeft} onClick={this.resetSmartPlug}>
|
||||||
|
<img src="/img/refresh.svg" alt="" style={editModeIconStyle} />
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
<Image src={this.getIcon()} style={imageStyle} />
|
<Image src={this.getIcon()} style={imageStyle} />
|
||||||
<span style={nameStyle}>
|
<span style={nameStyle}>
|
||||||
{this.props.device.name} ({this.props.device.id})
|
{this.props.device.name} ({this.props.device.id})
|
||||||
|
|
|
@ -37,6 +37,18 @@ export const editModeStyle = {
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const editModeStyleLeft = {
|
||||||
|
position: "absolute",
|
||||||
|
top: "15%",
|
||||||
|
left: "0",
|
||||||
|
width: "1.5rem",
|
||||||
|
height: "1.5rem",
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderRadius: "100%",
|
||||||
|
zIndex: "1000",
|
||||||
|
cursor: "pointer",
|
||||||
|
};
|
||||||
|
|
||||||
export const editModeIconStyle = {
|
export const editModeIconStyle = {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "50%",
|
top: "50%",
|
||||||
|
|
|
@ -38,21 +38,21 @@ export default class Dashboard extends Component {
|
||||||
.getAllDevices()
|
.getAllDevices()
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
console.log(res.data);
|
//console.log(res.data);
|
||||||
this.setState({
|
this.setState({
|
||||||
devices: res.data,
|
devices: res.data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
//console.log(err);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
call
|
call
|
||||||
.getAllDevicesByRoom(this.state.activeItem)
|
.getAllDevicesByRoom(this.state.activeItem)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
console.log(res.data);
|
//console.log(res.data);
|
||||||
this.setState({
|
this.setState({
|
||||||
devices: res.data,
|
devices: res.data,
|
||||||
});
|
});
|
||||||
|
@ -88,7 +88,7 @@ export default class Dashboard extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
//console.log(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,7 +107,7 @@ export default class Dashboard extends Component {
|
||||||
this.handleItemClick(-1);
|
this.handleItemClick(-1);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
//console.log(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -139,7 +139,7 @@ export default class Dashboard extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
//console.log(err);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
call
|
call
|
||||||
|
@ -153,7 +153,7 @@ export default class Dashboard extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
//console.log(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.state.rooms.forEach((item) => {
|
this.state.rooms.forEach((item) => {
|
||||||
|
|
|
@ -20,6 +20,7 @@ export default class ChangePass extends Component {
|
||||||
state: false,
|
state: false,
|
||||||
message: "",
|
message: "",
|
||||||
},
|
},
|
||||||
|
success: false,
|
||||||
};
|
};
|
||||||
this.handleChangePassword = this.handleChangePassword.bind(this);
|
this.handleChangePassword = this.handleChangePassword.bind(this);
|
||||||
}
|
}
|
||||||
|
@ -30,8 +31,12 @@ export default class ChangePass extends Component {
|
||||||
this.setState({ [nam]: val });
|
this.setState({ [nam]: val });
|
||||||
};
|
};
|
||||||
|
|
||||||
checkpassword = (e) => {
|
handleChangePassword = (e) => {
|
||||||
if (e.target.value !== this.state.password) {
|
const params = {
|
||||||
|
confirmationToken: this.props.query.token,
|
||||||
|
password: this.state.password,
|
||||||
|
};
|
||||||
|
if (this.state.confirmPassword !== this.state.password) {
|
||||||
this.setState({
|
this.setState({
|
||||||
error: {
|
error: {
|
||||||
state: true,
|
state: true,
|
||||||
|
@ -39,22 +44,15 @@ export default class ChangePass extends Component {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
handleChangePassword = (e) => {
|
|
||||||
const params = {
|
|
||||||
confirmationToken: this.props.query.token,
|
|
||||||
password: this.state.password,
|
|
||||||
};
|
|
||||||
call
|
call
|
||||||
.resetPassword(params)
|
.resetPassword(params)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.status !== 200) {
|
if (res.status === 200) {
|
||||||
this.setState({ error: { state: true, message: "Errore" } });
|
this.setState({ success: true });
|
||||||
} else {
|
} else {
|
||||||
return <Redirect to="/" />;
|
this.setState({ error: { state: true, message: "Errore" } });
|
||||||
}
|
}
|
||||||
// else set a message that an email has been sent
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
|
@ -62,6 +60,9 @@ export default class ChangePass extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
if (this.state.success) {
|
||||||
|
return <Redirect to="/login" />;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Button circular style={{ margin: "2em" }} href="/">
|
<Button circular style={{ margin: "2em" }} href="/">
|
||||||
|
@ -100,9 +101,9 @@ export default class ChangePass extends Component {
|
||||||
icon="address card outline"
|
icon="address card outline"
|
||||||
iconPosition="left"
|
iconPosition="left"
|
||||||
placeholder="Confirm Password"
|
placeholder="Confirm Password"
|
||||||
name="confirm-password"
|
name="confirmPassword"
|
||||||
type="password"
|
type="password"
|
||||||
onChange={this.checkpassword}
|
onChange={this.onChangeHandler}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -38,10 +38,13 @@ class Navbar extends Component {
|
||||||
|
|
||||||
handleClick = (e, { id, name }) => {
|
handleClick = (e, { id, name }) => {
|
||||||
const room = this.props.rooms.filter((d) => d.id === id)[0];
|
const room = this.props.rooms.filter((d) => d.id === id)[0];
|
||||||
|
//console.log(room);
|
||||||
this.setState({
|
this.setState({
|
||||||
activeItem: id,
|
activeItem: id,
|
||||||
activeItemName: name,
|
activeItemName: name,
|
||||||
});
|
});
|
||||||
|
this.activeRoom = room;
|
||||||
|
//console.log(this.activeRoom);
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
this.props.handleItemClick(id);
|
this.props.handleItemClick(id);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue