76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
|
import React from "react";
|
||
|
|
import Light from "./Light";
|
||
|
|
import SmartPlug from "./SmartPlug";
|
||
|
|
import Sensor from "./Sensor";
|
||
|
|
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
|
||
|
|
import Switcher from "./Switch";
|
||
|
|
import { Segment } from "semantic-ui-react";
|
||
|
|
import { RemoteService } from "../../../remote";
|
||
|
|
import { connect } from "react-redux";
|
||
|
|
import DeviceSettingsModal from "./DeviceSettingsModal";
|
||
|
|
|
||
|
|
class Device extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.modalRef = React.createRef();
|
||
|
|
this.edit = this.edit.bind(this);
|
||
|
|
this.resetSmartPlug = this.resetSmartPlug.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
edit() {
|
||
|
|
console.log("editing device with id=" + this.props.id);
|
||
|
|
this.modalRef.current.openModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
resetSmartPlug() {
|
||
|
|
this.props
|
||
|
|
.resetSmartPlug(this.props.id)
|
||
|
|
.catch((err) => console.error(`Smart plug reset error`, err));
|
||
|
|
}
|
||
|
|
|
||
|
|
renderDeviceComponent() {
|
||
|
|
switch (this.props.device.kind) {
|
||
|
|
case "regularLight":
|
||
|
|
return <Light id={this.props.id} />;
|
||
|
|
case "sensor":
|
||
|
|
return <Sensor id={this.props.id} />;
|
||
|
|
case "motionSensor":
|
||
|
|
return <Sensor id={this.props.id} />;
|
||
|
|
case "buttonDimmer":
|
||
|
|
return <ButtonDimmer id={this.props.id} />;
|
||
|
|
case "knobDimmer":
|
||
|
|
return <KnobDimmer id={this.props.id} />;
|
||
|
|
case "smartPlug":
|
||
|
|
return <SmartPlug id={this.props.id} />;
|
||
|
|
case "switch":
|
||
|
|
return <Switcher id={this.props.id} />;
|
||
|
|
case "dimmableLight":
|
||
|
|
return <Light id={this.props.id} />;
|
||
|
|
default:
|
||
|
|
throw new Error("Device type unknown");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Segment>
|
||
|
|
{this.renderDeviceComponent()}
|
||
|
|
<h3>{this.props.device.name}</h3>
|
||
|
|
<button onClick={this.edit}>Edit</button>
|
||
|
|
{this.props.device.type === "smartPlug" ? (
|
||
|
|
<button onClick={this.resetSmartPlug}></button>
|
||
|
|
) : null}
|
||
|
|
|
||
|
|
<DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
|
||
|
|
</Segment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = (state, ownProps) => ({
|
||
|
|
device: state.devices[ownProps.id],
|
||
|
|
});
|
||
|
|
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
|
||
|
|
export default DeviceContainer;
|