From 999f14951b88dd8fb2306e0a51ede3dd88db35eb Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Tue, 26 Mar 2019 22:28:58 +0200
Subject: [PATCH] integrated vuex to the entier site

---
 .../src/components/ThresholdTab.vue           | 12 ++++++---
 chameleon-client/src/components/Vision.vue    |  4 +--
 chameleon-client/src/components/ch-range.vue  | 12 ++++++---
 chameleon-client/src/store.js                 | 25 ++++++++++++++++---
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/chameleon-client/src/components/ThresholdTab.vue b/chameleon-client/src/components/ThresholdTab.vue
index a659af80a..52355002e 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" :value="[0,10]"></chrange>
-        <chrange class="spacing" title="Saturation" :value="[0,10]"></chrange>
-        <chrange class="spacing" title="Value" :value="[0,10]"></chrange>
+        <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>
     </div>
 </template>
     
@@ -18,8 +18,12 @@ import chselect from './ch-select.vue'
         components:{
             chrange,
             chselect
+        },
+        methods:{
+            onChange: function(key,event) {
+                this.$store.commit(key, event);
+            }
         }
-
     }
 
 </script>
diff --git a/chameleon-client/src/components/Vision.vue b/chameleon-client/src/components/Vision.vue
index 6e1d4a6d7..9d7edd778 100644
--- a/chameleon-client/src/components/Vision.vue
+++ b/chameleon-client/src/components/Vision.vue
@@ -3,10 +3,10 @@
         <Header id="main-header">
             <Row type="flex" justify="start" align="middle" :gutter="10">
                 <Col span="12">
-                    <chselect title="select a camera" :list="[1,2,3]"></chselect>
+                    <chselect title="camera" :parentData="$store.getters.camera" @input="onChange('camera',$event)" :list="[1,2,3]"></chselect>
                 </Col>
                 <Col span="12">
-                    <chselect title="select pipline" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
+                    <chselect title="pipline" :list="[0,1,2,3,4,5,6,7,8,9]" :parentData="$store.getters.pipline" @input="onChange('pipline',$event)"></chselect>
                 </Col>
             </Row>
         </Header>
diff --git a/chameleon-client/src/components/ch-range.vue b/chameleon-client/src/components/ch-range.vue
index a3938ffdb..784232ee1 100644
--- a/chameleon-client/src/components/ch-range.vue
+++ b/chameleon-client/src/components/ch-range.vue
@@ -18,17 +18,21 @@
 
 <script>
     export default {
-        name: 'ch-slider',
-        props:['title','value'],
+        name: 'ch-range',
+        props:['title','parentData'],
         data() {
             return {
-                content:this.value
+                value:0
             }
         },
         methods: {
             handleInput() {
-                this.$emit('input',{[this.title]:this.value});
+                this.$emit('input',this.value);
+                this.$socket.sendObj({[this.title]:this.value});
             }
+        },
+        beforeMount () {
+            this.value = this.parentData
         }
     }
 </script>
diff --git a/chameleon-client/src/store.js b/chameleon-client/src/store.js
index a73bf867d..c6a4eb56c 100644
--- a/chameleon-client/src/store.js
+++ b/chameleon-client/src/store.js
@@ -9,21 +9,40 @@ const set = key => (state,val) =>{
 export const store = new Vuex.Store({
 
     state:{
+        //header
+        camera:0,
+        pipeline:0,
+        //input
         exposure:0,
         brightness:0,
         orientation:0,
-        resolution:0 
+        resolution:0,
+        //threshold
+        hue:[0,10],
+        saturation:[0,10],
+        value:[0,10]
+
     },
     mutations:{
+        camera: set('camera'),
+        pipeline: set('pipeline'),
         brightness: set('brightness'),
         exposure: set('exposure'),
         orientation:set('orientation'),
-        resolution: set('resolution')
+        resolution: set('resolution'),
+        hue: set('hue'),
+        saturation: set('saturation'),
+        value: set('value')
     },
     getters:{
+        camera: state => state.camera,
+        pipeline: state => state.pipeline,
         brightness: state => state.brightness,
         exposure: state => state.exposure,
         orientation: state => state.orientation,
-        resolution: state => state.resolution
+        resolution: state => state.resolution,
+        hue: state => state.hue,
+        saturation: state => state.saturation,
+        value: state => state.value,
     },
 });
\ No newline at end of file