work on system settings page

chameleon-client/src/App.vue

@@ -93,7 +93,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
-    color: #2c3e50;
+    /* color: #2c3e50; */
   }
 
   #camera, #main-layout {

chameleon-client/src/components/SystemTab.vue

@@ -1,6 +1,19 @@
 <template>
     <div id="SystemTab">
-        <chInputNumber title="Enter Team Number" v-model="TeamVal" v-on:input="onChange(TeamVal)"></chInputNumber>
+        <chInputNumber title="Enter Team Number" Xkey="teamValue"></chInputNumber>
+        <Divider class="divdiv" orientation="left">Networking</Divider>
+        <div>
+            <RadioGroup v-model="lan" style="display: flex;">
+                <Radio label="DHCP"></Radio>
+                <Radio label="Static"></Radio>
+            </RadioGroup>
+<!-- 
+                    ip 
+                    subnetmask
+                    gateway 
+
+                    hostname -->
+        </div>
     </div>
 </template>
 
@@ -10,20 +23,25 @@
         name: 'SystemTab',
         data() {
             return {
-                TeamVal
+                lan:0
             }
         },
         components:{
             chInputNumber
         },
         methods: {
-            onChange(i) {
-                console.log(i);
-            }
         }
     }
 </script>
 
-<style lang="" scoped>
-    
+<style>
+
+    .ivu-divider-inner-text{
+        color: aliceblue
+    }
+    .ivu-radio-group {
+        display: flex;
+        text-align: left;
+        color: aliceblue;
+    }
 </style>

chameleon-client/src/components/ch-inputNumber.vue

@@ -14,15 +14,27 @@
 <script>
     export default {
         name: 'ch-InputNumber',
-        props:['title'],
+        props:{
+            title:String,
+            Xkey:String
+        },
         data() {
             return {
-                content:this.value
             }
         },
         methods: {
             handleInput() {
-                this.$emit('input',this.value);
+                this.$socket.sendObj({[this.Xkey]:this.value});
+            }
+        },
+        computed:{
+            value:{
+                get: function(){
+                    return this.$store.state[this.Xkey];
+                },
+                set: function(value){
+                    this.$store.commit(this.Xkey,value);
+                }
             }
         }
     }

chameleon-client/src/store.js

@@ -25,7 +25,9 @@ export const store = new Vuex.Store({
         //contours
         area:[0,100],
         ratio:[0,0],
-        extent:[0,100]
+        extent:[0,100],
+        //Settings
+        teamValue:0
 
     },
     mutations:{
@@ -45,7 +47,8 @@ export const store = new Vuex.Store({
         dilate: set('dilate'),
         area: set('area'),
         ratio: set('ratio'),
-        extent: set('extent')
+        extent: set('extent'),
+        teamValue: set('teamValue')
     },
     getters:{
         camera: state => state.camera,
@@ -61,6 +64,7 @@ export const store = new Vuex.Store({
         dilate: state => state.dilate,
         area: state =>state.area,
         ratio: state =>state.ratio,
-        extent: state =>state.extent
+        extent: state =>state.extent,
+        teamValue: state => state.teamValue
     },
 });