Fixed updates on circular inputs

This commit is contained in:
Claudio Maggioni (maggicl) 2020-04-11 22:47:47 +02:00
parent b60a050a70
commit a4b59dc922
4 changed files with 63 additions and 15 deletions

View file

@ -48,9 +48,7 @@ const mapStateToProps = (state, _) => ({
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
console.log(state.active.activeRoom);
const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
console.log(deviceArray);
return deviceArray.map((id) => state.devices[id]);
}
},

View file

@ -60,23 +60,50 @@ export class ButtonDimmerComponent extends Component {
}
export class KnobDimmerComponent extends Component {
setIntensity = (newValue) => {
const val = Math.round(newValue * 100);
constructor(props) {
super(props);
this.state = {
intensity: this.props.device.intensity || 0,
timeout: null
};
this.saveIntensity = this.saveIntensity.bind(this);
this.setIntensity = this.setIntensity.bind(this);
}
setIntensity(intensity) {
intensity *= 100;
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
this.setState({
intensity,
timeout: setTimeout(() => {
this.saveIntensity();
this.setState({
intensity: this.state.intensity,
timeout: null
});
}, 100)
});
}
saveIntensity() {
const val = Math.round(this.state.intensity);
this.props
.knobDimmerDimTo(this.props.id, val)
.catch((err) => console.error("knob dimmer set intensity error", err));
};
get intensity() {
return this.props.device.intensity || 0;
}
render() {
return (
<div style={knobContainer}>
<CircularInput
style={KnobDimmerStyle}
value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
onChange={this.setIntensity}
>
<text
@ -90,7 +117,7 @@ export class KnobDimmerComponent extends Component {
Knob Dimmer
</text>
<CircularProgress
style={{ ...KnobProgress, opacity: this.intensity + 0.1 }}
style={{ ...KnobProgress, opacity: this.state.intensity + 0.1 }}
/>
<CircularThumb style={CircularThumbStyle} />
<ThumbText color={"#1a2849"} />

View file

@ -36,8 +36,12 @@ import { connect } from "react-redux";
class Light extends Component {
constructor(props) {
super(props);
this.state = { intensity: this.props.device.intensity, timeout: null };
this.iconOn = "/img/lightOn.svg";
this.iconOff = "/img/lightOff.svg";
this.setIntensity = this.setIntensity.bind(this);
}
get turnedOn() {
@ -59,8 +63,27 @@ class Light extends Component {
return this.turnedOn ? this.iconOn : this.iconOff;
};
setIntensity = (newValue) => {
const intensity = Math.round(newValue * 100);
setIntensity(intensity) {
intensity *= 100;
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
this.setState({
intensity,
timeout: setTimeout(() => {
this.saveIntensity();
this.setState({
intensity: this.state.intensity,
timeout: null
});
}, 100)
});
}
saveIntensity = () => {
const intensity = Math.round(this.state.intensity);
this.props
.saveDevice({ ...this.props.device, intensity })
.catch((err) => console.error("intensity light update error", err));
@ -71,8 +94,9 @@ class Light extends Component {
<div style={LightDimmerContainer}>
<CircularInput
style={LightDimmerStyle}
value={+(Math.round(this.intensity / 100 + "e+2") + "e-2")}
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
onChange={this.setIntensity}
onMouseUp={this.saveIntensity}
>
<text
style={textStyle}
@ -87,7 +111,7 @@ class Light extends Component {
<CircularProgress
style={{
...KnobProgress,
opacity: this.intensity / 100 + 0.3,
opacity: this.state.intensity / 100 + 0.3,
}}
/>
<CircularThumb style={CircularThumbStyle} />

View file

@ -235,7 +235,6 @@ function reducer(previousState, action) {
}
console.log("new state: ", newState);
console.log("active room: ", newState.active.activeRoom);
return newState;
}