From a44eea520aa4f532ff54c45ebe6a7ec907b05163 Mon Sep 17 00:00:00 2001
From: uwap <me@uwap.name>
Date: Mon, 19 Oct 2020 06:24:04 +0200
Subject: [PATCH] Better sliders! Add marks and value indication. (Fixes #146)

---
 config/uwap-home/index.js        | 5 +++++
 src/components/App.js            | 4 ++--
 src/components/UiItems/Slider.js | 6 ++++--
 src/config/flowtypes.js          | 3 ++-
 src/config/types.js              | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/config/uwap-home/index.js b/config/uwap-home/index.js
index 56490ad..73f94a3 100644
--- a/config/uwap-home/index.js
+++ b/config/uwap-home/index.js
@@ -493,6 +493,11 @@ const config: Config = {
           min: 0,
           max: 255,
           text: "Helligkeit",
+          marks: [
+            { value: 1, label: "Dunkel" },
+            { value: 120, label: "Medium" },
+            { value: 254, label: "Hell" }
+          ],
           icon: svg(icons.mdiBrightness7),
           topic: "livingroombrightness"
         },
diff --git a/src/components/App.js b/src/components/App.js
index b696647..d0dade5 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -125,7 +125,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         const topic = topics[i];
         const stateTopic = this.topics[topic].state;
         const typeConversion = stateTopic?.type?.from ?? stateTopic?.type;
-        const val = (typeConversion ?? ((x) => x.toString()))(message);
+        const val = (typeConversion ?? ((x: Buffer) => x.toString()))(message);
         this.setMqttStateDebounced(
           {mqttState: Object.assign({},
             merge(this.state.mqttState, { [topic]: val}))});
@@ -152,7 +152,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         return;
       }
       const rawTopic = commandTopic.name;
-      const typeConversion = commandTopic.type?.to ?? commandTopic.type;
+      const typeConversion = commandTopic?.type?.to ?? commandTopic.type;
       const value = (typeConversion ?? Buffer.from)(val);
       this.state.mqttSend(rawTopic, value);
     } catch (err) {
diff --git a/src/components/UiItems/Slider.js b/src/components/UiItems/Slider.js
index 5c021da..6565d61 100644
--- a/src/components/UiItems/Slider.js
+++ b/src/components/UiItems/Slider.js
@@ -16,10 +16,12 @@ const BaseComponent = ({Icon, Label}, item, state, changeState) => (
     <Label />
     <SliderComponent
       value={parseFloat(getValue(item, state))}
-      min={item.min || 0} max={item.max || 100}
-      step={item.step || 1}
+      min={item.min ?? 0} max={item.max ?? 100}
+      step={item.step}
+      marks={item.marks ?? false}
       onChange={changeSliderValue(item, changeState)}
       disabled={isDisabled(item, state)}
+      valueLabelDisplay="auto"
       style={{marginLeft: 40}} />
   </React.Fragment>
 );
diff --git a/src/config/flowtypes.js b/src/config/flowtypes.js
index 719b90b..3524b80 100644
--- a/src/config/flowtypes.js
+++ b/src/config/flowtypes.js
@@ -58,9 +58,10 @@ export type UISlider = $ReadOnly<{|
   topic: string,
   icon?: Icon,
   enableCondition?: (s: State) => boolean,
+  marks?: boolean | Array<{ value: number, label: string}>,
   min?: number,
   max?: number,
-  step?: number
+  step?: ?number
 |}>;
 
 export type UISection = $ReadOnly<{|
diff --git a/src/config/types.js b/src/config/types.js
index 7cf4765..fa5621b 100644
--- a/src/config/types.js
+++ b/src/config/types.js
@@ -15,7 +15,7 @@ export const json = (path: string, innerType?: TopicType): TopicType => {
     from: (msg) => parseAgain(Buffer.from(
       at(JSON.parse(msg.toString()), path)[0].toString())),
     to: (msg) => Buffer.from(
-      JSON.serialize(set({}, path, parseFirst(msg).toString())))
+      JSON.stringify(set({}, path, parseFirst(msg).toString())))
   };
 };