uwap/mqtt-control-map
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Debounce all outgoing ui events (Also Fixes 44)

Browse source
This commit is contained in:
uwap 2018-07-08 21:52:13 +02:00
parent 0bc208b84e
commit e5cf1b2f9e
3 changed files with 27 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

45
config/rzl.js
View file

@ -759,8 +759,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: "kitchen_light_brightness", topic: "kitchen_light_brightness"
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -768,8 +767,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: "kitchen_light_color", topic: "kitchen_light_color"
delayedApply: true
}, },
{ {
type: "section", type: "section",
@ -781,8 +779,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: floalt.brightness("65537"), topic: floalt.brightness("65537")
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -790,8 +787,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: floalt.color("65537"), topic: floalt.color("65537")
delayedApply: true
}, },
{ {
type: "section", type: "section",
@ -803,8 +799,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: floalt.brightness("65538"), topic: floalt.brightness("65538")
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -812,8 +807,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: floalt.color("65538"), topic: floalt.color("65538")
delayedApply: true
}, },
{ {
type: "section", type: "section",
@ -825,8 +819,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: floalt.brightness("65539"), topic: floalt.brightness("65539")
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -834,8 +827,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: floalt.color("65539"), topic: floalt.color("65539")
delayedApply: true
}, },
{ {
type: "section", type: "section",
@ -847,8 +839,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: floalt.brightness("65540"), topic: floalt.brightness("65540")
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -856,8 +847,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: floalt.color("65540"), topic: floalt.color("65540")
delayedApply: true
} }
] ]
}, },
@ -881,8 +871,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: "kitchen_sink_light_brightness", topic: "kitchen_sink_light_brightness"
delayedApply: true
} }
] ]
}, },
@ -901,8 +890,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: floalt.brightness("65544"), topic: floalt.brightness("65544")
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -910,8 +898,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: floalt.color("65544"), topic: floalt.color("65544")
delayedApply: true
}, },
{ {
type: "section", type: "section",
@ -923,8 +910,7 @@ const config : Config = {
max: 100, max: 100,
text: "Helligkeit", text: "Helligkeit",
icon: mdi("brightness-7"), icon: mdi("brightness-7"),
topic: floalt.brightness("65543"), topic: floalt.brightness("65543")
delayedApply: true
}, },
{ {
type: "slider", type: "slider",
@ -932,8 +918,7 @@ const config : Config = {
max: 100, max: 100,
text: "Farbtemperatur", text: "Farbtemperatur",
icon: mdi("weather-sunset-down"), icon: mdi("weather-sunset-down"),
topic: floalt.color("65543"), topic: floalt.color("65543")
delayedApply: true
} }
] ]
}, },

16
src/components/UiItemList/UiItem.js
View file

@ -2,6 +2,7 @@
import React from "react"; import React from "react";
import keys from "lodash/keys"; import keys from "lodash/keys";
import map from "lodash/map"; import map from "lodash/map";
import debounce from "lodash/debounce";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText"; import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader"; import ListSubheader from "@material-ui/core/ListSubheader";
@ -71,9 +72,15 @@ export class UiControl<I: UIControl> extends UiItem<I> {
`Missing topic in ${this.props.item.type} "${this.props.item.text}"` `Missing topic in ${this.props.item.type} "${this.props.item.text}"`
); );
} }
this.props.onChangeState(this.props.item.topic, next); this.debouncedChange(next);
} }
debouncedChange = debounce((next: string) =>
this.props.onChangeState(this.props.item.topic, next), 50, {
leading: true,
trailing: true
});
getValue() { getValue() {
const control = this.props.item; const control = this.props.item;
const topic: string = control.topic || ""; const topic: string = control.topic || "";
@ -181,10 +188,9 @@ export class Slider extends UiControl<UISlider> {
value={parseFloat(this.getValue())} value={parseFloat(this.getValue())}
min={this.props.item.min || 0} max={this.props.item.max || 0} min={this.props.item.min || 0} max={this.props.item.max || 0}
step={this.props.item.step || 1} step={this.props.item.step || 1}
onChange={(e, v) => onChange={this.runPrimaryAction}
this.props.item.delayedApply || this.runPrimaryAction(e, v)} disabled={!this.isEnabled()}
onDragEnd={this.runPrimaryAction} style={{marginLeft: 40}} />
disabled={!this.isEnabled()} />
]; ];
} }
} }

3
src/config/flowtypes.js
View file

@ -55,8 +55,7 @@ export type UISlider = $ReadOnly<{|
enableCondition?: (s: State) => boolean, enableCondition?: (s: State) => boolean,
min?: number, min?: number,
max?: number, max?: number,
step?: number, step?: number
delayedApply?: boolean
|}>; |}>;
export type UISection = $ReadOnly<{| export type UISection = $ReadOnly<{|