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

81 lines
2.2 KiB
JavaScript
Raw Normal View History

/**
A smart plug is a plug that has a boolean internal state, i.e., that can be turned on or off, either with the
SmartHut interface or by a switch.
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
The user can reset this value.
**/
2020-03-25 16:20:53 +00:00
import React, { Component } from "react";
2020-04-12 15:49:29 +00:00
import { BottomPanel, StyledDiv } from "./styleComponents";
2020-03-26 08:51:25 +00:00
import { Image } from "semantic-ui-react";
2020-03-25 16:20:53 +00:00
import {
energyConsumedStyle,
imageStyle,
kwhStyle,
nameStyle,
} from "./SmartPlugStyle";
2020-04-10 15:25:52 +00:00
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
2020-04-10 15:25:52 +00:00
class SmartPlug extends Component {
2020-03-23 20:24:17 +00:00
constructor(props) {
super(props);
this.iconOn = "/img/smart-plug.svg";
this.iconOff = "/img/smart-plug-off.svg";
}
get turnedOn() {
return this.props.stateOrDevice.on;
}
get energyConsumed() {
return (this.props.stateOrDevice.totalConsumption / 1000).toFixed(3);
2020-03-25 15:04:02 +00:00
}
onClickDevice = () => {
const on = !this.turnedOn;
2020-04-25 13:37:40 +00:00
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.stateOrDevice, on })
2020-04-25 13:37:40 +00:00
.catch((err) => console.error("smart plug update error", err));
}else{
2020-04-25 14:47:53 +00:00
this.props.updateState({ id: this.props.sceneState.id, on: on},this.props.sceneState.kind);
2020-04-25 13:37:40 +00:00
}
2020-03-26 08:36:00 +00:00
};
2020-03-23 20:24:17 +00:00
getIcon = () => {
return this.turnedOn ? this.iconOn : this.iconOff;
2020-03-23 20:24:17 +00:00
};
2020-03-23 20:24:17 +00:00
render() {
return (
2020-04-10 15:25:52 +00:00
<StyledDiv onClick={this.onClickDevice}>
2020-03-23 20:24:17 +00:00
<Image src={this.getIcon()} style={imageStyle} />
2020-04-12 15:49:29 +00:00
<span style={nameStyle}>Smart Plug</span>
2020-03-25 16:20:53 +00:00
<BottomPanel
style={
this.turnedOn
2020-03-25 16:20:53 +00:00
? { backgroundColor: "#505bda" }
: { backgroundColor: "#1a2849" }
}
>
<span style={energyConsumedStyle}>{this.energyConsumed}</span>
2020-03-25 16:20:53 +00:00
<span style={kwhStyle}>KWh</span>
</BottomPanel>
2020-03-23 20:24:17 +00:00
</StyledDiv>
2020-03-25 16:20:53 +00:00
);
2020-03-23 20:24:17 +00:00
}
}
2020-04-10 15:25:52 +00:00
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
2020-04-25 15:45:22 +00:00
return state.sceneStates[ownProps.id];
}
},
2020-04-10 15:25:52 +00:00
});
const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug);
export default SmartPlugContainer;