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