smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed scenes

Browse source
This commit is contained in:
britea 2020-04-27 15:47:59 +02:00
parent af0c157205
commit a7f05f0200
9 changed files with 176 additions and 183 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
smart-hut/src/components/dashboard/ScenesPanel.js
View file

@ -8,13 +8,14 @@ import { Grid, Button } from "semantic-ui-react";
class ScenesPanel extends Component {
constructor(props) {
super(props);
this.applyScene = this.applyScene.bind(this);
}
applyScene() {
console.log(this.props.activeScene);
this.props.sceneApply(this.props.activeScene);
this.props.sceneApply(this.props.activeScene).then(() => {
alert("Scene applied.");
});
}
render() {

203
smart-hut/src/components/dashboard/devices/Curtain.js
View file

@ -4,116 +4,123 @@ import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
class Curtain extends Component {
constructor(props) {
super(props);
this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };
this.setIntensity = this.setIntensity.bind(this);
}
//getters
get turnedOn() {
return this.props.stateOrDevice.on;
}
get intensity() {
return this.props.stateOrDevice.intensity || 0;
}
onClickDevice = () => {
const on = !this.turnedOn;
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.stateOrDevice, on })
.catch((err) => console.error("curtains update error", err));
}else{
this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
}
constructor(props) {
super(props);
this.state = {
intensity: this.props.stateOrDevice.intensity,
timeout: null,
};
setIntensity(intensity) {
intensity *= 100;
this.setIntensity = this.setIntensity.bind(this);
}
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
//getters
get turnedOn() {
return this.props.stateOrDevice.on;
}
this.setState({
intensity,
timeout: setTimeout(() => {
this.saveIntensity();
this.setState({
intensity: this.state.intensity,
timeout: null,
});
}, 100),
});
get intensity() {
return this.props.stateOrDevice.intensity || 0;
}
onClickDevice = () => {
const on = !this.turnedOn;
if (this.props.tab === "Devices") {
this.props
.saveDevice({ ...this.props.stateOrDevice, on })
.catch((err) => console.error("curtains update error", err));
} else {
this.props.updateState(
{ id: this.props.stateOrDevice.id, on: on },
this.props.stateOrDevice.kind
);
}
};
setIntensity(intensity) {
intensity *= 100;
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
saveIntensity = () => {
const intensity = Math.round(this.state.intensity);
if(this.props.tab==="Devices"){
this.props
.saveDevice({ ...this.props.stateOrDevice, intensity })
.catch((err) => console.error("curtain update error", err));
}else{
this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
}
};
helper = () => {
if (this.props.device.intensity >= 90) {
this.setIntensity(1);
this.saveIntensity();
} else {
this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
this.saveIntensity();
}
};
///*this took me way too much more time than it should have*/
handleChange = (a) => {
this.setIntensity(a.target.value / 100);
this.setState({
intensity,
timeout: setTimeout(() => {
this.saveIntensity();
};
this.setState({
intensity: this.state.intensity,
timeout: null,
});
}, 100),
});
}
render() {
return (
<div className="container">
<div
className="open-container"
style={{
height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
}}
></div>{" "}
<span className="span-open">
{Math.round(this.props.stateOrDevice.intensity)}%
</span>
<input
onChange={this.handleChange}
value={this.props.stateOrDevice.intensity}
className="slider"
type="range"
min="0"
max="100"
/>
</div>
);
saveIntensity = () => {
const intensity = Math.round(this.state.intensity);
if (this.props.tab === "Devices") {
this.props
.saveDevice({ ...this.props.stateOrDevice, intensity })
.catch((err) => console.error("curtain update error", err));
} else {
this.props.updateState(
{ id: this.props.stateOrDevice.id, intensity: intensity },
this.props.stateOrDevice.kind
);
}
};
helper = () => {
if (this.props.device.intensity >= 90) {
this.setIntensity(1);
this.saveIntensity();
} else {
this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
this.saveIntensity();
}
};
///*this took me way too much more time than it should have*/
handleChange = (a) => {
this.setIntensity(a.target.value / 100);
this.saveIntensity();
};
render() {
return (
<div className="container">
<div
className="open-container"
style={{
height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
}}
></div>{" "}
<span className="span-open">
{Math.round(this.props.stateOrDevice.intensity)}%
</span>
<input
onChange={this.handleChange}
value={this.props.stateOrDevice.intensity}
className="slider"
type="range"
min="0"
max="100"
/>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
return state.devices[ownProps.id];
}else{
return state.sceneStates[ownProps.id];
}
},
//device: state.devices[ownProps.id],
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.sceneStates[ownProps.id];
}
},
//device: state.devices[ownProps.id],
});
const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
export default CurtainContainer;

90
smart-hut/src/components/dashboard/devices/Device.js
View file

@ -77,60 +77,28 @@ class Device extends React.Component {
/>
);
case "motionSensor":
return (
<Sensor
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
);
return <Sensor tab={this.props.tab} id={this.props.stateOrDevice.id} />;
case "buttonDimmer":
return (
<ButtonDimmer
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
<ButtonDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "knobDimmer":
return (
<KnobDimmer
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
<KnobDimmer tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "smartPlug":
return (
<SmartPlug
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
<SmartPlug tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "switch":
return (
<Switcher
tab={this.props.tab}
sceneState={this.props.sceneState}
id={this.props.stateOrDevice.id}
/>
<Switcher tab={this.props.tab} id={this.props.stateOrDevice.id} />
);
case "dimmableLight":
return (
<Light
id={this.props.stateOrDevice.id}
sceneState={this.props.sceneState}
tab={this.props.tab}
/>
);
return <Light id={this.props.stateOrDevice.id} tab={this.props.tab} />;
case "securityCamera":
return (
<Videocam
id={this.props.stateOrDevice.id}
sceneState={this.props.sceneState}
tab={this.props.tab}
/>
<Videocam id={this.props.stateOrDevice.id} tab={this.props.tab} />
);
default:
//throw new Error("Device type unknown");
@ -171,11 +139,12 @@ class Device extends React.Component {
</Grid.Column>
) : (
<Grid.Column textAlign="center">
<Header as="h3">
{this.props.stateOrDevice
? this.props.stateOrDevice.name
: ""}
</Header>
<Header as="h3">{this.props.device.name}</Header>
{this.props.tab === "Scenes" ? (
<Header as="h4">{this.props.roomName}</Header>
) : (
""
)}
<Button
color="red"
icon
@ -188,6 +157,14 @@ class Device extends React.Component {
</Grid.Column>
)}
</Grid>
{this.props.stateOrDevice ? (
<DeviceSettingsModal
ref={this.modalRef}
id={this.props.stateOrDevice.id}
/>
) : (
""
)}
</Segment>
);
} else {
@ -211,23 +188,22 @@ const mapStateToProps = (state, ownProps) => ({
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;
get device() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} 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() {

4
smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
View file

@ -66,6 +66,7 @@ class DeviceSettingsModal extends Component {
super(props);
this.state = {
open: false,
name: this.props.device.name,
};
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.Content>
<SettingsForm
name={this.props.device.name}
type={this.props.device.type}
name={this.state.name}
removeDevice={this.deleteDevice}
saveFunction={this.updateDevice}
/>

4
smart-hut/src/components/dashboard/devices/Light.js
View file

@ -118,8 +118,8 @@ class Light extends Component {
.catch((err) => console.error("regular light update error", err));
} else {
this.props.updateState(
{ id: this.props.sceneState.id, intensity: intensity },
this.props.sceneState.kind
{ id: this.props.stateOrDevice.id, intensity: intensity },
this.props.stateOrDevice.kind
);
}
};

13
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -73,13 +73,16 @@ class Sensor extends Component {
this.props.stateOrDevice.kind === "motionSensor" &&
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() {
if (this.props.stateOrDevice.kind === "sensor") {
switch (this.props.device.sensor) {
switch (this.props.stateOrDevice.sensor) {
case "TEMPERATURE":
this.units = "ºC";
this.colors = temperatureSensorColors;
@ -192,10 +195,10 @@ class Sensor extends Component {
}
const mapStateToProps = (state, ownProps) => ({
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
}else{
} else {
return state.sceneStates[ownProps.id];
}
},

19
smart-hut/src/components/dashboard/devices/SmartPlug.js
View file

@ -33,12 +33,15 @@ class SmartPlug extends Component {
onClickDevice = () => {
const on = !this.turnedOn;
if(this.props.tab==="Devices"){
if (this.props.tab === "Devices") {
this.props
.saveDevice({ ...this.props.stateOrDevice, on })
.catch((err) => console.error("smart plug update error", err));
}else{
this.props.updateState({ id: this.props.sceneState.id, on: on},this.props.sceneState.kind);
.saveDevice({ ...this.props.stateOrDevice, on })
.catch((err) => console.error("smart plug update error", err));
} else {
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) => ({
get stateOrDevice(){
if(state.active.activeTab==="Devices"){
get stateOrDevice() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
}else{
} else {
return state.sceneStates[ownProps.id];
}
},

19
smart-hut/src/components/dashboard/devices/Thermostats.js
View file

@ -70,8 +70,8 @@ class Thermostats extends Component {
.catch((err) => console.error("thermostat update error", err));
} else {
this.props.updateState(
{ id: this.props.sceneState.id, turnOn: turnOn },
this.props.sceneState.kind
{ id: this.props.stateOrDevice.id, turnOn: turnOn },
this.props.stateOrDevice.kind
);
}
}
@ -84,8 +84,8 @@ class Thermostats extends Component {
.catch((err) => console.error("thermostat update error", err));
} else {
this.props.updateState(
{ id: this.props.sceneState.id, on: on },
this.props.sceneState.kind
{ id: this.props.stateOrDevice.id, on: on },
this.props.stateOrDevice.kind
);
}
};
@ -98,8 +98,11 @@ class Thermostats extends Component {
.catch((err) => console.error("thermostat update error", err));
} else {
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 {
this.props.updateState(
{
id: this.props.sceneState.id,
id: this.props.stateOrDevice.id,
internalSensorTemperature: internalSensorTemperature,
},
this.props.sceneState.kind
this.props.stateOrDevice.kind
);
}
}

2
smart-hut/src/remote.js
View file

@ -418,7 +418,7 @@ export const RemoteService = {
let url = `/scene/${id}/apply`;
return Endpoint.post(url)
.then((res) => dispatch(actions.sceneApply(res.data)))
.then((res) => dispatch(actions.deviceOperationUpdate(res.data)))
.catch((err) => {
console.warn("scene apply error", err);
throw new RemoteError(["Network error"]);