Merge branch 'add-reset-smartplug' into 'dev'

added reset smartplug

See merge request sa4-2020/the-sanmarinoes/frontend!75

smart-hut/public/img/refresh.svg

@@ -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>

smart-hut/src/client_server.js

@@ -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 },
+    });
+  },
 };

smart-hut/src/components/dashboard/devices/SmartPlug.js

@@ -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})

smart-hut/src/components/dashboard/devices/styleComponents.js

@@ -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%",