Curtains style fix

This commit is contained in:
Claudio Maggioni (maggicl) 2020-04-27 14:14:11 +02:00
parent a54df637cd
commit 29d2815a77
2 changed files with 106 additions and 99 deletions

View file

@ -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];
} }
}, },

View file

@ -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;