fixed scenes
This commit is contained in:
parent
af0c157205
commit
a7f05f0200
9 changed files with 176 additions and 183 deletions
|
@ -8,13 +8,14 @@ import { Grid, Button } from "semantic-ui-react";
|
||||||
class ScenesPanel extends Component {
|
class ScenesPanel extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.applyScene = this.applyScene.bind(this);
|
this.applyScene = this.applyScene.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
applyScene() {
|
applyScene() {
|
||||||
console.log(this.props.activeScene);
|
console.log(this.props.activeScene);
|
||||||
this.props.sceneApply(this.props.activeScene);
|
this.props.sceneApply(this.props.activeScene).then(() => {
|
||||||
|
alert("Scene applied.");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -6,7 +6,10 @@ import { connect } from "react-redux";
|
||||||
class Curtain extends Component {
|
class Curtain extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
|
this.state = {
|
||||||
|
intensity: this.props.stateOrDevice.intensity,
|
||||||
|
timeout: null,
|
||||||
|
};
|
||||||
|
|
||||||
this.setIntensity = this.setIntensity.bind(this);
|
this.setIntensity = this.setIntensity.bind(this);
|
||||||
}
|
}
|
||||||
|
@ -22,12 +25,15 @@ class Curtain extends Component {
|
||||||
|
|
||||||
onClickDevice = () => {
|
onClickDevice = () => {
|
||||||
const on = !this.turnedOn;
|
const on = !this.turnedOn;
|
||||||
if(this.props.tab==="Devices"){
|
if (this.props.tab === "Devices") {
|
||||||
this.props
|
this.props
|
||||||
.saveDevice({ ...this.props.stateOrDevice, on })
|
.saveDevice({ ...this.props.stateOrDevice, on })
|
||||||
.catch((err) => console.error("curtains update error", err));
|
.catch((err) => console.error("curtains update error", err));
|
||||||
}else{
|
} else {
|
||||||
this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
|
this.props.updateState(
|
||||||
|
{ id: this.props.stateOrDevice.id, on: on },
|
||||||
|
this.props.stateOrDevice.kind
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -52,12 +58,15 @@ class Curtain extends Component {
|
||||||
|
|
||||||
saveIntensity = () => {
|
saveIntensity = () => {
|
||||||
const intensity = Math.round(this.state.intensity);
|
const intensity = Math.round(this.state.intensity);
|
||||||
if(this.props.tab==="Devices"){
|
if (this.props.tab === "Devices") {
|
||||||
this.props
|
this.props
|
||||||
.saveDevice({ ...this.props.stateOrDevice, intensity })
|
.saveDevice({ ...this.props.stateOrDevice, intensity })
|
||||||
.catch((err) => console.error("curtain update error", err));
|
.catch((err) => console.error("curtain update error", err));
|
||||||
}else{
|
} else {
|
||||||
this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
|
this.props.updateState(
|
||||||
|
{ id: this.props.stateOrDevice.id, intensity: intensity },
|
||||||
|
this.props.stateOrDevice.kind
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -71,7 +80,6 @@ class Curtain extends Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
///*this took me way too much more time than it should have*/
|
///*this took me way too much more time than it should have*/
|
||||||
|
|
||||||
handleChange = (a) => {
|
handleChange = (a) => {
|
||||||
|
@ -100,16 +108,15 @@ class Curtain extends Component {
|
||||||
max="100"
|
max="100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => ({
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
get stateOrDevice(){
|
get stateOrDevice() {
|
||||||
if(state.active.activeTab==="Devices"){
|
if (state.active.activeTab === "Devices") {
|
||||||
return state.devices[ownProps.id];
|
return state.devices[ownProps.id];
|
||||||
}else{
|
} else {
|
||||||
return state.sceneStates[ownProps.id];
|
return state.sceneStates[ownProps.id];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -77,60 +77,28 @@ class Device extends React.Component {
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
case "motionSensor":
|
case "motionSensor":
|
||||||
return (
|
return <Sensor tab={this.props.tab} id={this.props.stateOrDevice.id} />;
|
||||||
<Sensor
|
|
||||||
tab={this.props.tab}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "buttonDimmer":
|
case "buttonDimmer":
|
||||||
return (
|
return (
|
||||||
<ButtonDimmer
|
<ButtonDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
|
||||||
tab={this.props.tab}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
case "knobDimmer":
|
case "knobDimmer":
|
||||||
return (
|
return (
|
||||||
<KnobDimmer
|
<KnobDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
|
||||||
tab={this.props.tab}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
case "smartPlug":
|
case "smartPlug":
|
||||||
return (
|
return (
|
||||||
<SmartPlug
|
<SmartPlug tab={this.props.tab} id={this.props.stateOrDevice.id} />
|
||||||
tab={this.props.tab}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
case "switch":
|
case "switch":
|
||||||
return (
|
return (
|
||||||
<Switcher
|
<Switcher tab={this.props.tab} id={this.props.stateOrDevice.id} />
|
||||||
tab={this.props.tab}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
case "dimmableLight":
|
case "dimmableLight":
|
||||||
return (
|
return <Light id={this.props.stateOrDevice.id} tab={this.props.tab} />;
|
||||||
<Light
|
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
tab={this.props.tab}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case "securityCamera":
|
case "securityCamera":
|
||||||
return (
|
return (
|
||||||
<Videocam
|
<Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
|
||||||
id={this.props.stateOrDevice.id}
|
|
||||||
sceneState={this.props.sceneState}
|
|
||||||
tab={this.props.tab}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
//throw new Error("Device type unknown");
|
//throw new Error("Device type unknown");
|
||||||
|
@ -171,11 +139,12 @@ class Device extends React.Component {
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
) : (
|
) : (
|
||||||
<Grid.Column textAlign="center">
|
<Grid.Column textAlign="center">
|
||||||
<Header as="h3">
|
<Header as="h3">{this.props.device.name}</Header>
|
||||||
{this.props.stateOrDevice
|
{this.props.tab === "Scenes" ? (
|
||||||
? this.props.stateOrDevice.name
|
<Header as="h4">{this.props.roomName}</Header>
|
||||||
: ""}
|
) : (
|
||||||
</Header>
|
""
|
||||||
|
)}
|
||||||
<Button
|
<Button
|
||||||
color="red"
|
color="red"
|
||||||
icon
|
icon
|
||||||
|
@ -188,6 +157,14 @@ class Device extends React.Component {
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
)}
|
)}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
{this.props.stateOrDevice ? (
|
||||||
|
<DeviceSettingsModal
|
||||||
|
ref={this.modalRef}
|
||||||
|
id={this.props.stateOrDevice.id}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
</Segment>
|
</Segment>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
@ -211,23 +188,22 @@ const mapStateToProps = (state, ownProps) => ({
|
||||||
if (state.active.activeTab === "Devices") {
|
if (state.active.activeTab === "Devices") {
|
||||||
return state.devices[ownProps.id];
|
return state.devices[ownProps.id];
|
||||||
} else {
|
} else {
|
||||||
/*console.log(
|
|
||||||
state.sceneStates,
|
|
||||||
ownProps.id,
|
|
||||||
state.sceneStates[ownProps.id]
|
|
||||||
);*/
|
|
||||||
return state.sceneStates[ownProps.id];
|
return state.sceneStates[ownProps.id];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
get sceneState() {
|
get device() {
|
||||||
if (state.active.activeTab === "Scenes") {
|
if (state.active.activeTab === "Devices") {
|
||||||
const array = [
|
return state.devices[ownProps.id];
|
||||||
...state.scenes[state.active.activeScene].sceneStates,
|
|
||||||
].sort();
|
|
||||||
const deviceState = array.filter((e) => e.id === ownProps.id)[0];
|
|
||||||
return deviceState;
|
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return state.devices[state.sceneStates[ownProps.id].deviceId];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
get roomName() {
|
||||||
|
if (state.active.activeTab === "Scenes") {
|
||||||
|
const device = state.devices[state.sceneStates[ownProps.id].deviceId];
|
||||||
|
return state.rooms[device.roomId].name;
|
||||||
|
} else {
|
||||||
|
return "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
get type() {
|
get type() {
|
||||||
|
|
|
@ -66,6 +66,7 @@ class DeviceSettingsModal extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
open: false,
|
open: false,
|
||||||
|
name: this.props.device.name,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.updateDevice = this.updateDevice.bind(this);
|
this.updateDevice = this.updateDevice.bind(this);
|
||||||
|
@ -111,8 +112,7 @@ class DeviceSettingsModal extends Component {
|
||||||
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
|
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
|
||||||
<Modal.Content>
|
<Modal.Content>
|
||||||
<SettingsForm
|
<SettingsForm
|
||||||
name={this.props.device.name}
|
name={this.state.name}
|
||||||
type={this.props.device.type}
|
|
||||||
removeDevice={this.deleteDevice}
|
removeDevice={this.deleteDevice}
|
||||||
saveFunction={this.updateDevice}
|
saveFunction={this.updateDevice}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -118,8 +118,8 @@ class Light extends Component {
|
||||||
.catch((err) => console.error("regular light update error", err));
|
.catch((err) => console.error("regular light update error", err));
|
||||||
} else {
|
} else {
|
||||||
this.props.updateState(
|
this.props.updateState(
|
||||||
{ id: this.props.sceneState.id, intensity: intensity },
|
{ id: this.props.stateOrDevice.id, intensity: intensity },
|
||||||
this.props.sceneState.kind
|
this.props.stateOrDevice.kind
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -73,13 +73,16 @@ class Sensor extends Component {
|
||||||
this.props.stateOrDevice.kind === "motionSensor" &&
|
this.props.stateOrDevice.kind === "motionSensor" &&
|
||||||
this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
|
this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
|
||||||
) {
|
) {
|
||||||
this.setState({ motion: true, detected: this.props.stateOrDevice.detected });
|
this.setState({
|
||||||
|
motion: true,
|
||||||
|
detected: this.props.stateOrDevice.detected,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
if (this.props.stateOrDevice.kind === "sensor") {
|
if (this.props.stateOrDevice.kind === "sensor") {
|
||||||
switch (this.props.device.sensor) {
|
switch (this.props.stateOrDevice.sensor) {
|
||||||
case "TEMPERATURE":
|
case "TEMPERATURE":
|
||||||
this.units = "ºC";
|
this.units = "ºC";
|
||||||
this.colors = temperatureSensorColors;
|
this.colors = temperatureSensorColors;
|
||||||
|
@ -192,10 +195,10 @@ class Sensor extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => ({
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
get stateOrDevice(){
|
get stateOrDevice() {
|
||||||
if(state.active.activeTab==="Devices"){
|
if (state.active.activeTab === "Devices") {
|
||||||
return state.devices[ownProps.id];
|
return state.devices[ownProps.id];
|
||||||
}else{
|
} else {
|
||||||
return state.sceneStates[ownProps.id];
|
return state.sceneStates[ownProps.id];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -33,12 +33,15 @@ class SmartPlug extends Component {
|
||||||
|
|
||||||
onClickDevice = () => {
|
onClickDevice = () => {
|
||||||
const on = !this.turnedOn;
|
const on = !this.turnedOn;
|
||||||
if(this.props.tab==="Devices"){
|
if (this.props.tab === "Devices") {
|
||||||
this.props
|
this.props
|
||||||
.saveDevice({ ...this.props.stateOrDevice, on })
|
.saveDevice({ ...this.props.stateOrDevice, on })
|
||||||
.catch((err) => console.error("smart plug update error", err));
|
.catch((err) => console.error("smart plug update error", err));
|
||||||
}else{
|
} else {
|
||||||
this.props.updateState({ id: this.props.sceneState.id, on: on},this.props.sceneState.kind);
|
this.props.updateState(
|
||||||
|
{ id: this.props.stateOrDevice.id, on: on },
|
||||||
|
this.props.stateOrDevice.kind
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -68,10 +71,10 @@ class SmartPlug extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => ({
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
get stateOrDevice(){
|
get stateOrDevice() {
|
||||||
if(state.active.activeTab==="Devices"){
|
if (state.active.activeTab === "Devices") {
|
||||||
return state.devices[ownProps.id];
|
return state.devices[ownProps.id];
|
||||||
}else{
|
} else {
|
||||||
return state.sceneStates[ownProps.id];
|
return state.sceneStates[ownProps.id];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -70,8 +70,8 @@ class Thermostats extends Component {
|
||||||
.catch((err) => console.error("thermostat update error", err));
|
.catch((err) => console.error("thermostat update error", err));
|
||||||
} else {
|
} else {
|
||||||
this.props.updateState(
|
this.props.updateState(
|
||||||
{ id: this.props.sceneState.id, turnOn: turnOn },
|
{ id: this.props.stateOrDevice.id, turnOn: turnOn },
|
||||||
this.props.sceneState.kind
|
this.props.stateOrDevice.kind
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -84,8 +84,8 @@ class Thermostats extends Component {
|
||||||
.catch((err) => console.error("thermostat update error", err));
|
.catch((err) => console.error("thermostat update error", err));
|
||||||
} else {
|
} else {
|
||||||
this.props.updateState(
|
this.props.updateState(
|
||||||
{ id: this.props.sceneState.id, on: on },
|
{ id: this.props.stateOrDevice.id, on: on },
|
||||||
this.props.sceneState.kind
|
this.props.stateOrDevice.kind
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -98,8 +98,11 @@ class Thermostats extends Component {
|
||||||
.catch((err) => console.error("thermostat update error", err));
|
.catch((err) => console.error("thermostat update error", err));
|
||||||
} else {
|
} else {
|
||||||
this.props.updateState(
|
this.props.updateState(
|
||||||
{ id: this.props.sceneState.id, targetTemperature: targetTemperature },
|
{
|
||||||
this.props.sceneState.kind
|
id: this.props.stateOrDevice.id,
|
||||||
|
targetTemperature: targetTemperature,
|
||||||
|
},
|
||||||
|
this.props.stateOrDevice.kind
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -130,10 +133,10 @@ class Thermostats extends Component {
|
||||||
} else {
|
} else {
|
||||||
this.props.updateState(
|
this.props.updateState(
|
||||||
{
|
{
|
||||||
id: this.props.sceneState.id,
|
id: this.props.stateOrDevice.id,
|
||||||
internalSensorTemperature: internalSensorTemperature,
|
internalSensorTemperature: internalSensorTemperature,
|
||||||
},
|
},
|
||||||
this.props.sceneState.kind
|
this.props.stateOrDevice.kind
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -418,7 +418,7 @@ export const RemoteService = {
|
||||||
let url = `/scene/${id}/apply`;
|
let url = `/scene/${id}/apply`;
|
||||||
|
|
||||||
return Endpoint.post(url)
|
return Endpoint.post(url)
|
||||||
.then((res) => dispatch(actions.sceneApply(res.data)))
|
.then((res) => dispatch(actions.deviceOperationUpdate(res.data)))
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.warn("scene apply error", err);
|
console.warn("scene apply error", err);
|
||||||
throw new RemoteError(["Network error"]);
|
throw new RemoteError(["Network error"]);
|
||||||
|
|
Loading…
Reference in a new issue