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

90 lines
2.6 KiB
JavaScript
Raw Normal View History

2020-04-10 15:25:52 +00:00
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";
2020-04-10 21:13:23 +00:00
import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
2020-04-10 15:25:52 +00:00
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
2020-04-10 21:13:23 +00:00
.smartPlugReset(this.props.id)
2020-04-10 15:25:52 +00:00
.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>
2020-04-10 21:13:23 +00:00
<Grid columns={2}>
2020-04-12 15:49:29 +00:00
<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" />
2020-04-10 21:13:23 +00:00
Edit
</Button>
{this.props.device.kind === "smartPlug" ? (
2020-04-12 15:49:29 +00:00
<Button
color="orange"
icon
onClick={this.resetSmartPlug}
labelPosition="left"
>
<Icon name="undo" />
2020-04-10 21:13:23 +00:00
Reset
</Button>
) : null}
</Grid.Column>
<DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
</Grid>
2020-04-10 15:25:52 +00:00
</Segment>
);
}
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
});
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
export default DeviceContainer;