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-22 12:25:24 +00:00
|
|
|
import Videocam from "./Videocam";
|
2020-04-23 14:02:02 +00:00
|
|
|
import Curtains from "./Curtain";
|
|
|
|
import Thermostat from "./Thermostats";
|
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 {
|
2020-04-25 15:46:04 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-04-10 15:25:52 +00:00
|
|
|
|
2020-04-25 15:46:04 +00:00
|
|
|
this.modalRef = React.createRef();
|
|
|
|
this.edit = this.edit.bind(this);
|
|
|
|
this.resetSmartPlug = this.resetSmartPlug.bind(this);
|
2020-04-25 16:44:54 +00:00
|
|
|
this.deleteState=this.deleteState.bind(this);
|
2020-04-25 15:46:04 +00:00
|
|
|
}
|
2020-04-10 15:25:52 +00:00
|
|
|
|
2020-04-25 15:46:04 +00:00
|
|
|
edit() {
|
|
|
|
console.log("editing device with id=" + this.props.id);
|
|
|
|
this.modalRef.current.openModal();
|
|
|
|
}
|
2020-04-10 15:25:52 +00:00
|
|
|
|
2020-04-25 15:46:04 +00:00
|
|
|
resetSmartPlug() {
|
|
|
|
this.props
|
|
|
|
.smartPlugReset(this.props.id)
|
|
|
|
.catch((err) => console.error(`Smart plug reset error`, err));
|
|
|
|
}
|
2020-04-10 15:25:52 +00:00
|
|
|
|
2020-04-25 16:27:09 +00:00
|
|
|
deleteState() {
|
2020-04-25 16:44:54 +00:00
|
|
|
//console.log("alpaca "+this.props);
|
2020-04-25 16:27:09 +00:00
|
|
|
this.props.deleteState(this.props.id, this.props.type);
|
|
|
|
}
|
|
|
|
|
2020-04-25 15:46:04 +00:00
|
|
|
renderDeviceComponent() {
|
|
|
|
switch (
|
|
|
|
this.props.tab === "Devices"
|
|
|
|
? this.props.stateOrDevice.kind
|
|
|
|
: this.props.type
|
|
|
|
) {
|
|
|
|
case "curtains":
|
2020-04-23 14:55:44 +00:00
|
|
|
return (
|
2020-04-25 15:46:04 +00:00
|
|
|
<Curtains
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "thermostat":
|
|
|
|
return (
|
|
|
|
<Thermostat
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneStat}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "regularLight":
|
|
|
|
return (
|
|
|
|
<Light
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "sensor":
|
|
|
|
return (
|
|
|
|
<Sensor
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "motionSensor":
|
|
|
|
return (
|
|
|
|
<Sensor
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "buttonDimmer":
|
|
|
|
return (
|
|
|
|
<ButtonDimmer
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "knobDimmer":
|
|
|
|
return (
|
|
|
|
<KnobDimmer
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "smartPlug":
|
|
|
|
return (
|
|
|
|
<SmartPlug
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "switch":
|
|
|
|
return (
|
|
|
|
<Switcher
|
|
|
|
tab={this.props.tab}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "dimmableLight":
|
|
|
|
return (
|
|
|
|
<Light
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
tab={this.props.tab}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case "securityCamera":
|
|
|
|
return (
|
|
|
|
<Videocam
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
sceneState={this.props.sceneState}
|
|
|
|
tab={this.props.tab}
|
|
|
|
/>
|
2020-04-23 14:55:44 +00:00
|
|
|
);
|
2020-04-25 15:46:04 +00:00
|
|
|
default:
|
2020-04-25 16:23:40 +00:00
|
|
|
//throw new Error("Device type unknown");
|
|
|
|
return undefined;
|
2020-04-23 14:55:44 +00:00
|
|
|
}
|
2020-04-25 15:46:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-04-25 16:23:40 +00:00
|
|
|
{
|
|
|
|
if (this.props.type !== "") {
|
|
|
|
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
|
|
|
|
? this.props.stateOrDevice.name
|
|
|
|
: ""}
|
|
|
|
</Header>
|
2020-04-25 16:27:09 +00:00
|
|
|
<Button
|
|
|
|
color="red"
|
|
|
|
icon
|
|
|
|
onClick={this.deleteState}
|
|
|
|
labelPosition="left"
|
|
|
|
>
|
|
|
|
<Icon name="undo" />
|
|
|
|
Delete
|
|
|
|
</Button>
|
2020-04-25 16:23:40 +00:00
|
|
|
</Grid.Column>
|
|
|
|
)}
|
|
|
|
</Grid>
|
|
|
|
</Segment>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
2020-04-25 15:46:04 +00:00
|
|
|
}
|
2020-04-10 15:25:52 +00:00
|
|
|
}
|
2020-04-25 15:46:04 +00:00
|
|
|
/*
|
2020-04-10 15:25:52 +00:00
|
|
|
|
2020-04-25 15:46:04 +00:00
|
|
|
{this.props.stateOrDevice ?
|
|
|
|
<DeviceSettingsModal
|
|
|
|
ref={this.modalRef}
|
|
|
|
id={this.props.stateOrDevice.id}
|
|
|
|
/> :
|
|
|
|
""
|
|
|
|
}
|
|
|
|
*/
|
2020-04-10 15:25:52 +00:00
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
2020-04-25 15:46:04 +00:00
|
|
|
get stateOrDevice() {
|
|
|
|
if (state.active.activeTab === "Devices") {
|
|
|
|
return state.devices[ownProps.id];
|
|
|
|
} else {
|
|
|
|
console.log(
|
|
|
|
state.sceneStates,
|
|
|
|
ownProps.id,
|
|
|
|
state.sceneStates[ownProps.id]
|
|
|
|
);
|
|
|
|
return state.sceneStates[ownProps.id];
|
|
|
|
}
|
|
|
|
},
|
|
|
|
get sceneState() {
|
|
|
|
if (state.active.activeTab === "Scenes") {
|
|
|
|
const array = [
|
|
|
|
...state.scenes[state.active.activeScene].sceneStates,
|
|
|
|
].sort();
|
|
|
|
const deviceState = array.filter((e) => e.id === ownProps.id)[0];
|
|
|
|
return deviceState;
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
get type() {
|
|
|
|
if (state.active.activeTab === "Scenes") {
|
2020-04-25 16:23:40 +00:00
|
|
|
if (state.sceneStates[ownProps.id]) {
|
|
|
|
console.log(state.sceneStates[ownProps.id], ownProps.id);
|
|
|
|
const id = state.sceneStates[ownProps.id].deviceId;
|
|
|
|
console.log(id, state.devices[id].kind);
|
|
|
|
return state.devices[id].kind;
|
|
|
|
} else {
|
|
|
|
return "";
|
|
|
|
}
|
2020-04-25 15:46:04 +00:00
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
},
|
2020-04-10 15:25:52 +00:00
|
|
|
});
|
|
|
|
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
|
|
|
|
export default DeviceContainer;
|