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

Curtains style fix

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

2
smart-hut/src/components/dashboard/devices/Curtains.css
View File

@ -4,7 +4,7 @@
box-sizing: border-box;
}
.container {
.container.curtain-container {
position: relative;
margin-top: 10%;
width: 18rem;