88 lines
2.6 KiB
JavaScript
88 lines
2.6 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, 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() {
|
|
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>
|
|
<Grid columns={2}>
|
|
<Grid.Column>
|
|
{this.renderDeviceComponent()}
|
|
</Grid.Column>
|
|
<Grid.Column textAlign='center'>
|
|
<Header as='h3'>{this.props.device.name}</Header>
|
|
<Button color='blue' icon onClick={this.edit} labelPosition='left'>
|
|
<Icon name='pencil' />
|
|
Edit
|
|
</Button>
|
|
{this.props.device.kind === "smartPlug" ? (
|
|
<Button color='orange' icon onClick={this.resetSmartPlug}
|
|
labelPosition='left'>
|
|
<Icon name='undo' />
|
|
Reset
|
|
</Button>
|
|
) : null}
|
|
</Grid.Column>
|
|
<DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
|
|
</Grid>
|
|
</Segment>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
device: state.devices[ownProps.id],
|
|
});
|
|
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
|
|
export default DeviceContainer;
|