Merge branch 'add-reset-smartplug' into 'dev'
added reset smartplug See merge request sa4-2020/the-sanmarinoes/frontend!75
This commit is contained in:
commit
e231425a94
4 changed files with 83 additions and 2 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) {
|
||||
return axios.get(config + data.device);
|
||||
},
|
||||
smartPlugReset: function (id) {
|
||||
return axios.delete(config + "smartPlug/" + id + "/meter", {
|
||||
headers: { Authorization: "Bearer " + tkn },
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
@ -5,9 +5,14 @@
|
|||
The user can reset this value.
|
||||
**/
|
||||
import React, { Component } from "react";
|
||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import {
|
||||
BottomPanel,
|
||||
StyledDiv,
|
||||
editModeIconStyle,
|
||||
editModeStyleLeft,
|
||||
} from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { Image, Icon } from "semantic-ui-react";
|
||||
import {
|
||||
energyConsumedStyle,
|
||||
imageStyle,
|
||||
|
@ -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 = () => {
|
||||
if (this.state.turnedOn) {
|
||||
return this.iconOn;
|
||||
|
@ -74,6 +89,13 @@ export default class SmartPlug extends Component {
|
|||
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} />
|
||||
<span style={nameStyle}>
|
||||
{this.props.device.name} ({this.props.device.id})
|
||||
|
|
|
@ -37,6 +37,18 @@ export const editModeStyle = {
|
|||
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 = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
|
|
Loading…
Reference in a new issue