127 lines
4.7 KiB
JavaScript
127 lines
4.7 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 Videocam from "./Videocam";
|
|
import Curtains from "./Curtain";
|
|
import Thermostat from "./Thermostats";
|
|
import { Segment, Grid, Header, Button, Icon } 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
|
|
.smartPlugReset(this.props.id)
|
|
.catch((err) => console.error(`Smart plug reset error`, err));
|
|
}
|
|
|
|
renderDeviceComponent() {
|
|
console.log("check here")
|
|
console.log(this.props.stateOrDevice.kind)
|
|
switch (this.props.stateOrDevice.kind) {
|
|
case "curtains":
|
|
return <Curtains tab={this.props.tab} id={this.props.id} />;
|
|
case "thermostat":
|
|
return <Thermostat tab={this.props.tab} id={this.props.id} />;
|
|
case "regularLight":
|
|
return <Light tab={this.props.tab} id={this.props.id} />;
|
|
case "sensor":
|
|
return <Sensor tab={this.props.tab} id={this.props.id} />;
|
|
case "motionSensor":
|
|
return <Sensor tab={this.props.tab} id={this.props.id} />;
|
|
case "buttonDimmer":
|
|
return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
|
|
case "knobDimmer":
|
|
return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
|
|
case "smartPlug":
|
|
return <SmartPlug tab={this.props.tab} id={this.props.id} />;
|
|
case "switch":
|
|
return <Switcher tab={this.props.tab} id={this.props.id} />;
|
|
case "dimmableLight":
|
|
return <Light id={this.props.id} />;
|
|
case "securityCamera":
|
|
return <Videocam id={this.props.id} />;
|
|
default:
|
|
throw new Error("Device type unknown");
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Segment>
|
|
<Grid columns={2}>
|
|
<Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
|
|
{this.props.tab === "Devices" ? (
|
|
<Grid.Column textAlign="center">
|
|
<Header as="h3">
|
|
{this.props.stateOrDevice.name}
|
|
</Header>
|
|
<Button
|
|
color="blue"
|
|
icon
|
|
onClick={this.edit}
|
|
labelPosition="left"
|
|
>
|
|
<Icon name="pencil" />
|
|
Edit
|
|
</Button>
|
|
{this.props.stateOrDevice.kind === "smartPlug" ? (
|
|
<Button
|
|
color="orange"
|
|
icon
|
|
onClick={this.resetSmartPlug}
|
|
labelPosition="left"
|
|
>
|
|
<Icon name="undo" />
|
|
Reset
|
|
</Button>
|
|
) : null}
|
|
</Grid.Column>
|
|
) : (
|
|
<Grid.Column textAlign="center">
|
|
<Header as="h3">
|
|
{this.props.stateOrDevice.name}
|
|
</Header>
|
|
</Grid.Column>
|
|
)}
|
|
|
|
<DeviceSettingsModal
|
|
ref={this.modalRef}
|
|
id={this.props.id}
|
|
/>
|
|
</Grid>
|
|
</Segment>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
get stateOrDevice() {
|
|
if (state.active.activeTab === "Devices") {
|
|
return state.devices[ownProps.id];
|
|
} else {
|
|
const sceneState = state.sceneStates[ownProps.id];
|
|
return state.devices[sceneState];
|
|
}
|
|
},
|
|
});
|
|
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
|
|
export default DeviceContainer;
|