Curtains style fix
This commit is contained in:
parent
a54df637cd
commit
29d2815a77
2 changed files with 106 additions and 99 deletions
|
@ -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.sceneState.id, on: on },
|
||||||
|
this.props.sceneState.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.sceneState.id, intensity: intensity },
|
||||||
|
this.props.sceneState.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) => {
|
||||||
|
@ -81,7 +89,7 @@ class Curtain extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container curtain-container">
|
||||||
<div
|
<div
|
||||||
className="open-container"
|
className="open-container"
|
||||||
style={{
|
style={{
|
||||||
|
@ -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];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container.curtain-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 10%;
|
margin-top: 10%;
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
|
|
Loading…
Reference in a new issue