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

Merge branch 'curtains-fix' into 'dev'

Browse source 
Curtains style fix

See merge request sa4-2020/the-sanmarinoes/frontend!96
This commit is contained in:
Claudio Maggioni 2020-04-27 14:14:32 +02:00
commit a09b1dac57
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"; 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,
this.setIntensity = this.setIntensity.bind(this); timeout: null,
}
//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);
}
}; };
setIntensity(intensity) { this.setIntensity = this.setIntensity.bind(this);
intensity *= 100; }
if (this.state.timeout) { //getters
clearTimeout(this.state.timeout); get turnedOn() {
} return this.props.stateOrDevice.on;
}
this.setState({ get intensity() {
intensity, return this.props.stateOrDevice.intensity || 0;
timeout: setTimeout(() => { }
this.saveIntensity();
this.setState({ onClickDevice = () => {
intensity: this.state.intensity, const on = !this.turnedOn;
timeout: null, if (this.props.tab === "Devices") {
}); this.props
}, 100), .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 = () => { this.setState({
const intensity = Math.round(this.state.intensity); intensity,
if(this.props.tab==="Devices"){ timeout: setTimeout(() => {
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(); this.saveIntensity();
}; this.setState({
intensity: this.state.intensity,
timeout: null,
});
}, 100),
});
}
render() { saveIntensity = () => {
return ( const intensity = Math.round(this.state.intensity);
<div className="container"> if (this.props.tab === "Devices") {
<div this.props
className="open-container" .saveDevice({ ...this.props.stateOrDevice, intensity })
style={{ .catch((err) => console.error("curtain update error", err));
height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem", } else {
}} this.props.updateState(
></div>{" "} { id: this.props.sceneState.id, intensity: intensity },
<span className="span-open"> this.props.sceneState.kind
{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>
);
} }
};
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) => ({ 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];
} }
}, },
//device: state.devices[ownProps.id], //device: state.devices[ownProps.id],
}); });
const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain); const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
export default CurtainContainer; export default CurtainContainer;

2
smart-hut/src/components/dashboard/devices/Curtains.css
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;