btn-dimmer and knob-dimmer update
This commit is contained in:
parent
9fa9a2f90f
commit
67496b11a0
4 changed files with 67 additions and 15 deletions
|
@ -211,15 +211,19 @@ export var call = {
|
||||||
headers: { Authorization: "Bearer " + tkn },
|
headers: { Authorization: "Bearer " + tkn },
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.status === 200 && data.device === "switch") {
|
if (
|
||||||
|
res.status === 200 &&
|
||||||
|
(data.device === "switch" ||
|
||||||
|
data.device === "buttonDimmer" ||
|
||||||
|
data.device === "knobDimmer")
|
||||||
|
) {
|
||||||
|
let type = "lightId=";
|
||||||
|
if (data.device === "switch") {
|
||||||
|
type = "switchableId=";
|
||||||
|
}
|
||||||
data.params.lights.forEach((e) => {
|
data.params.lights.forEach((e) => {
|
||||||
let urlUp =
|
let urlUp =
|
||||||
config +
|
config + data.device + "/" + res.data.id + "/lights?" + type + e;
|
||||||
data.device +
|
|
||||||
"/" +
|
|
||||||
res.data.id +
|
|
||||||
"/lights?switchableId=" +
|
|
||||||
e;
|
|
||||||
axios.post(
|
axios.post(
|
||||||
urlUp,
|
urlUp,
|
||||||
{},
|
{},
|
||||||
|
@ -239,7 +243,11 @@ export var call = {
|
||||||
headers: { Authorization: "Bearer " + tkn },
|
headers: { Authorization: "Bearer " + tkn },
|
||||||
});
|
});
|
||||||
// also for btn/knob dimmer
|
// also for btn/knob dimmer
|
||||||
if (typeDevice === "switch/operate") {
|
if (
|
||||||
|
typeDevice === "switch/operate" ||
|
||||||
|
typeDevice === "buttonDimmer/dim" ||
|
||||||
|
typeDevice === "knobDimmer/dimTo"
|
||||||
|
) {
|
||||||
promiseRes = promiseRes.then((e) => {
|
promiseRes = promiseRes.then((e) => {
|
||||||
if (e.status === 200) {
|
if (e.status === 200) {
|
||||||
e.data.forEach((device) => socket.invokeCallbacks(device));
|
e.data.forEach((device) => socket.invokeCallbacks(device));
|
||||||
|
|
|
@ -29,6 +29,8 @@ import {
|
||||||
knobContainer,
|
knobContainer,
|
||||||
} from "./DimmerStyle";
|
} from "./DimmerStyle";
|
||||||
|
|
||||||
|
import { call } from "../../../client_server";
|
||||||
|
|
||||||
export class ButtonDimmer extends Component {
|
export class ButtonDimmer extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -36,10 +38,24 @@ export class ButtonDimmer extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
increaseIntensity = () => {
|
increaseIntensity = () => {
|
||||||
console.log("Increase!");
|
let data = {
|
||||||
|
dimType: "UP",
|
||||||
|
id: this.props.device.id,
|
||||||
|
};
|
||||||
|
call.deviceUpdate(data, "buttonDimmer/dim").then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
decreaseIntensity = () => {
|
decreaseIntensity = () => {
|
||||||
console.log("Decrease!");
|
let data = {
|
||||||
|
dimType: "DOWN",
|
||||||
|
id: this.props.device.id,
|
||||||
|
};
|
||||||
|
call.deviceUpdate(data, "buttonDimmer/dim").then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {}
|
componentDidMount() {}
|
||||||
|
@ -56,10 +72,10 @@ export class ButtonDimmer extends Component {
|
||||||
/>
|
/>
|
||||||
<img alt="icon" src="/img/buttonDimmer.svg" />
|
<img alt="icon" src="/img/buttonDimmer.svg" />
|
||||||
<span className="knob">{this.props.device.name}</span>
|
<span className="knob">{this.props.device.name}</span>
|
||||||
<PlusPanel onClick={this.increaseIntensity}>
|
<PlusPanel name="UP" onClick={this.increaseIntensity}>
|
||||||
<span>+</span>
|
<span>+</span>
|
||||||
</PlusPanel>
|
</PlusPanel>
|
||||||
<MinusPanel onClick={this.decreaseIntensity}>
|
<MinusPanel name="DOWN" onClick={this.decreaseIntensity}>
|
||||||
<span>−</span>
|
<span>−</span>
|
||||||
</MinusPanel>
|
</MinusPanel>
|
||||||
</ButtonDimmerContainer>
|
</ButtonDimmerContainer>
|
||||||
|
@ -76,7 +92,26 @@ export class KnobDimmer extends Component {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {}
|
setIntensity = (newValue) => {
|
||||||
|
let val = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
|
||||||
|
let data = {
|
||||||
|
id: this.props.device.id,
|
||||||
|
intensity: val,
|
||||||
|
};
|
||||||
|
call.deviceUpdate(data, "knobDimmer/dimTo").then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.setState({
|
||||||
|
value: val,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.setState({
|
||||||
|
value: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
@ -90,8 +125,8 @@ export class KnobDimmer extends Component {
|
||||||
/>
|
/>
|
||||||
<CircularInput
|
<CircularInput
|
||||||
style={KnobDimmerStyle}
|
style={KnobDimmerStyle}
|
||||||
value={this.state.value}
|
value={+(Math.round(this.state.value / 100 + "e+2") + "e-2")}
|
||||||
onChange={(value) => this.setState({ value: value })}
|
onChange={this.setIntensity}
|
||||||
>
|
>
|
||||||
<text
|
<text
|
||||||
style={textStyle}
|
style={textStyle}
|
||||||
|
|
|
@ -107,6 +107,12 @@ export default class NewDevice extends Component {
|
||||||
case "switch":
|
case "switch":
|
||||||
data.params["lights"] = this.state.lightsAttached;
|
data.params["lights"] = this.state.lightsAttached;
|
||||||
break;
|
break;
|
||||||
|
case "buttonDimmer":
|
||||||
|
data.params["lights"] = this.state.lightsAttached;
|
||||||
|
break;
|
||||||
|
case "knobDimmer":
|
||||||
|
data.params["lights"] = this.state.lightsAttached;
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,6 +40,9 @@ export default class ModalWindow extends Component {
|
||||||
image: this.state.img,
|
image: this.state.img,
|
||||||
};
|
};
|
||||||
this.props.addRoom(data);
|
this.props.addRoom(data);
|
||||||
|
this.setState({
|
||||||
|
name: "Device",
|
||||||
|
});
|
||||||
this.closeModal();
|
this.closeModal();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue