From b86af0abea8231098cba2d5459e542f45db8f969 Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Wed, 27 Mar 2019 23:23:01 +0200
Subject: [PATCH] added vuex to range slider

---
 .../src/components/ThresholdTab.vue           |  9 +++------
 chameleon-client/src/components/ch-range.vue  | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/chameleon-client/src/components/ThresholdTab.vue b/chameleon-client/src/components/ThresholdTab.vue
index 52355002e..f993ca859 100644
--- a/chameleon-client/src/components/ThresholdTab.vue
+++ b/chameleon-client/src/components/ThresholdTab.vue
@@ -1,8 +1,8 @@
 <template>
     <div id="Threshold">
-        <chrange class="spacing" title="Hue" :parentData="$store.getters.hue" @input="onChange('hue',$event)"></chrange>
-        <chrange class="spacing" title="Saturation" :parentData="$store.getters.saturation" @input="onChange('saturation',$event)"></chrange>
-        <chrange class="spacing" title="Value" :parentData="$store.getters.value" @input="onChange('value',$event)"></chrange>
+        <chrange class="spacing" title="Hue" Xkey="hue"></chrange>
+        <chrange class="spacing" title="Saturation" Xkey="saturation"></chrange>
+        <chrange class="spacing" title="Value" Xkey="value"></chrange>
     </div>
 </template>
     
@@ -20,9 +20,6 @@ import chselect from './ch-select.vue'
             chselect
         },
         methods:{
-            onChange: function(key,event) {
-                this.$store.commit(key, event);
-            }
         }
     }
 
diff --git a/chameleon-client/src/components/ch-range.vue b/chameleon-client/src/components/ch-range.vue
index 784232ee1..99030dfa5 100644
--- a/chameleon-client/src/components/ch-range.vue
+++ b/chameleon-client/src/components/ch-range.vue
@@ -19,20 +19,28 @@
 <script>
     export default {
         name: 'ch-range',
-        props:['title','parentData'],
+        props:{title:'',
+        Xkey:''
+        },
         data() {
             return {
-                value:0
+                value
             }
         },
         methods: {
             handleInput() {
-                this.$emit('input',this.value);
-                this.$socket.sendObj({[this.title]:this.value});
+                this.$socket.sendObj({[this.Xkey]:this.value});
             }
         },
-        beforeMount () {
-            this.value = this.parentData
+        computed:{
+            value:{
+                get:function(){
+                    return this.$store.state[this.Xkey];
+                },
+                set:function(value){
+                    this.$store.commit(this.Xkey,value);
+                }
+            }
         }
     }
 </script>