added auto save and save button

chameleon-client/src/components/OutputTab/DualCalibration.vue

@@ -49,6 +49,7 @@
             sendSlope(m, b, valid) {
                 this.handleInput('m', m);
                 this.handleInput('b', b);
+                this.$emit('update');
             },
             clearSlope() {
                 this.sendSlope(1, 0, false);

chameleon-client/src/components/OutputTab/SingleCalibration.vue

@@ -15,12 +15,14 @@
     export default {
         name: "SingleCalibration",
         props: ['rawPoint'],
-        methods:{
-            clearPoint(){
-                this.handleInput('point',[0,0]);
+        methods: {
+            clearPoint() {
+                this.handleInput('point', [0, 0]);
+                this.$emit('update');
             },
-            takePoint(){
-                this.handleInput('point',this.rawPoint);
+            takePoint() {
+                this.handleInput('point', this.rawPoint);
+                this.$emit('update');
             }
         }
     }

chameleon-client/src/components/cv-icon.vue

@@ -2,7 +2,7 @@
     <div>
         <v-tooltip :right="right" :bottom="!right" nudge-right="10">
             <template v-slot:activator="{ on }">
-                <v-icon :class="hoverClass" @click="handleClick"  v-on="on" :color="color">{{text}}</v-icon>
+                <v-icon :class="hoverClass" @click="handleClick" v-on="on" :color="color">{{text}}</v-icon>
             </template>
             <span>{{tooltip}}</span>
         </v-tooltip>
@@ -12,20 +12,18 @@
 <script>
     export default {
         name: 'Icon',
-        props:['color','tooltip','text','right','hover'],
+        props: ['color', 'tooltip', 'text', 'right', 'hover'],
         data() {
-            return {
-                
-            }
+            return {}
         },
-        methods:{
-            handleClick(){
+        methods: {
+            handleClick() {
                 this.$emit('click');
             }
         },
-        computed:{
-            hoverClass(){
-                if(this.hover !== undefined){
+        computed: {
+            hoverClass() {
+                if (this.hover !== undefined) {
                     return "hover";
                 }
             }
@@ -35,7 +33,7 @@
 </script>
 
 <style scoped>
-.hover:hover{
-     color: white !important;
- }
+    .hover:hover {
+        color: white !important;
+    }
 </style>

chameleon-client/src/components/cv-input.vue

@@ -5,7 +5,8 @@
                 <span>{{name}}</span>
             </v-col>
             <v-col :cols="9">
-                 <v-text-field @keydown="handleKeyboard" dark v-model="localValue" dense  :disabled="disabled" :error-messages="errorMessage"></v-text-field>
+                <v-text-field @keydown="handleKeyboard" dark v-model="localValue" dense :disabled="disabled"
+                              :error-messages="errorMessage"/>
             </v-col>
         </v-row>
     </div>
@@ -14,26 +15,24 @@
 <script>
     export default {
         name: 'Input',
-        props:['name','value','disabled','errorMessage'],
+        props: ['name', 'value', 'disabled', 'errorMessage'],
         data() {
-            return {
-                
-            }
+            return {}
         },
-        methods:{
-            handleKeyboard(event){
-                if(event.key == "Enter"){
+        methods: {
+            handleKeyboard(event) {
+                if (event.key == "Enter") {
                     this.$emit("Enter");
                 }
             }
         },
-        computed:{
-            localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
-                    this.$emit('input',value);
+                set(value) {
+                    this.$emit('input', value);
                 }
             }
         }
@@ -41,5 +40,5 @@
 </script>
 
 <style lang="" scoped>
-    
+
 </style>

chameleon-client/src/components/cv-number-input.vue

@@ -5,7 +5,8 @@
                 <span>{{name}}</span>
             </v-col>
             <v-col>
-                 <v-text-field dark v-model="localValue" class="mt-0 pt-0" hide-details single-line type="number" style="width: 70px"></v-text-field>
+                <v-text-field dark v-model="localValue" class="mt-0 pt-0" hide-details single-line type="number"
+                              style="width: 70px"/>
             </v-col>
         </v-row>
     </div>
@@ -14,18 +15,16 @@
 <script>
     export default {
         name: 'NumberInput',
-        props:['name','value'],
+        props: ['name', 'value'],
         data() {
-            return {
-                
-            }
+            return {}
         },
-        computed:{
-            localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
+                set(value) {
                     this.$emit('input', parseInt(value));
                 }
             }
@@ -34,5 +33,5 @@
 </script>
 
 <style lang="" scoped>
-    
+
 </style>

chameleon-client/src/components/cv-radio.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-radio-group row v-model="localValue" dark :mandatory="true">
-            <v-radio color="#4baf62" v-for="(name,index) in list" :label="name" v-bind:key="index" :value="index"></v-radio>
+            <v-radio color="#4baf62" v-for="(name,index) in list" :label="name" v-bind:key="index" :value="index"/>
         </v-radio-group>
     </div>
 </template>
@@ -9,19 +9,17 @@
 <script>
     export default {
         name: 'Radio',
-        props:['value','list'],
+        props: ['value', 'list'],
         data() {
-            return {
-                
-            }
+            return {}
         },
-        computed:{
-            localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
-                    this.$emit('input',value);
+                set(value) {
+                    this.$emit('input', value);
                 }
             }
         }
@@ -29,5 +27,5 @@
 </script>
 
 <style lang="" scoped>
-    
+
 </style>

chameleon-client/src/components/cv-range-slider.vue

@@ -5,13 +5,18 @@
                 <span>{{name}}</span>
             </v-col>
             <v-col :cols="10">
-                <v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details class="align-center" dark color="#4baf62" :step="step">
-                    <template v-slot:prepend> 
-                        <v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange" @focus="prependFocused = true" @blur="prependFocused = false" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
+                <v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details
+                                class="align-center" dark color="#4baf62" :step="step">
+                    <template v-slot:prepend>
+                        <v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange"
+                                      @focus="prependFocused = true" @blur="prependFocused = false" class="mt-0 pt-0"
+                                      hide-details single-line type="number" style="width: 50px" :step="step"/>
                     </template>
 
                     <template v-slot:append>
-                        <v-text-field :value="localValue[1]" :max="max" :min="min" @input="handleChange" @focus="appendFocused = true" @blur="appendFocused = false" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
+                        <v-text-field :value="localValue[1]" :max="max" :min="min" @input="handleChange"
+                                      @focus="appendFocused = true" @blur="appendFocused = false" class="mt-0 pt-0"
+                                      hide-details single-line type="number" style="width: 50px" :step="step"/>
                     </template>
                 </v-range-slider>
             </v-col>
@@ -22,43 +27,43 @@
 <script>
     export default {
         name: 'RangeSlider',
-        props:['name','min','max','value','step'],
+        props: ['name', 'min', 'max', 'value', 'step'],
         data() {
             return {
-                prependFocused:false,
-                appendFocused:false
-                
+                prependFocused: false,
+                appendFocused: false
+
             }
         },
-        methods:{
-            handleChange(val){
+        methods: {
+            handleChange(val) {
                 let i = 0;
-                if(this.prependFocused === false && this.appendFocused === true){
+                if (this.prependFocused === false && this.appendFocused === true) {
                     i = 1;
                 }
-                if(this.prependFocused || this.appendFocused){
-                    this.$set(this.localValue,i,val);
+                if (this.prependFocused || this.appendFocused) {
+                    this.$set(this.localValue, i, val);
                 }
             },
-            handleInput(val){
-                if(!this.prependFocused || !this.appendFocused){
-                this.localValue = val;
+            handleInput(val) {
+                if (!this.prependFocused || !this.appendFocused) {
+                    this.localValue = val;
                 }
             }
         },
-        computed:{
-           localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
-                    this.$emit('input',value)
+                set(value) {
+                    this.$emit('input', value)
                 }
-           } 
+            }
         }
     }
 </script>
 
 <style lang="" scoped>
-    
+
 </style>

chameleon-client/src/components/cv-select.vue

@@ -5,7 +5,8 @@
                 <span>{{name}}</span>
             </v-col>
             <v-col :cols="9">
-                <v-select v-model="localValue" :items="indexList" item-text="name" item-value="index" dark color="#4baf62" item-color="green"  :disabled="disabled"></v-select>
+                <v-select v-model="localValue" :items="indexList" item-text="name" item-value="index" dark
+                          color="#4baf62" item-color="green" :disabled="disabled"/>
             </v-col>
         </v-row>
     </div>
@@ -14,26 +15,26 @@
 <script>
     export default {
         name: 'Select',
-        props:['list','name','value','disabled'],
+        props: ['list', 'name', 'value', 'disabled'],
         data() {
-            return {
-            }
+            return {}
         },
-        computed:{
-            localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
-                    this.$emit('input',value)
+                set(value) {
+                    this.$emit('input', value)
                 }
             },
-            indexList(){
+            indexList() {
                 let list = []
-                for(let i=0 ; i<this.list.length; i++){
+                for (let i = 0; i < this.list.length; i++) {
                     list.push({
-                        name:this.list[i],
-                        index:i});
+                        name: this.list[i],
+                        index: i
+                    });
                 }
                 return list;
             }

chameleon-client/src/components/cv-slider.vue

@@ -5,11 +5,15 @@
                 <span>{{name}}</span>
             </v-col>
             <v-col :cols="10">
-                <v-slider :value="localValue" @input="handleInput" dark class="align-center" :max="max" :min="min" hide-details color="#4baf62" :step="step">
-            <template v-slot:append>
-              <v-text-field dark :max="max" :min="min" :value="localValue" @input="handleChange"  @focus="isFocused = true" @blur="isFocused = false" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
-            </template>
-          </v-slider>
+                <v-slider :value="localValue" @start="isClicked = true" @end="isClicked = false" @change="handleclick"
+                          @input="handleInput" dark class="align-center" :max="max" :min="min" hide-details
+                          color="#4baf62" :step="step">
+                    <template v-slot:append>
+                        <v-text-field dark :max="max" :min="min" :value="localValue" @input="handleChange"
+                                      @focus="isFocused = true" @blur="isFocused = false" class="mt-0 pt-0" hide-details
+                                      single-line type="number" style="width: 50px" :step="step"/>
+                    </template>
+                </v-slider>
             </v-col>
         </v-row>
     </div>
@@ -18,31 +22,37 @@
 <script>
     export default {
         name: 'Slider',
-        props:['min','max','name','value','step'],
+        props: ['min', 'max', 'name', 'value', 'step'],
         data() {
             return {
-                isFocused:false
+                isFocused: false,
+                isClicked: false
             }
         },
-        methods:{
-            handleChange(val){
-                if(this.isFocused){
+        methods: {
+            handleChange(val) {
+                if (this.isFocused) {
                     this.localValue = parseFloat(val);
                 }
             },
-            handleInput(val){
-                if(!this.isFocused){
-                this.localValue = val;
+            handleInput(val) {
+                if (!this.isFocused && this.isClicked) {
+                    this.localValue = val;
+                }
+            },
+            handleclick(val) {
+                if (!this.isFocused) {
+                    this.localValue = val;
                 }
             }
         },
-        computed:{
-            localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
-                    this.$emit('input',value)
+                set(value) {
+                    this.$emit('input', value)
                 }
             }
         }
@@ -50,5 +60,5 @@
 </script>
 
 <style lang="" scoped>
-    
+
 </style>

chameleon-client/src/components/cv-switch.vue

@@ -5,7 +5,7 @@
                 <span>{{name}}</span>
             </v-col>
             <v-col>
-                <v-switch v-model="localValue" color="#4baf62"></v-switch>
+                <v-switch v-model="localValue" color="#4baf62"/>
             </v-col>
         </v-row>
     </div>
@@ -14,19 +14,17 @@
 <script>
     export default {
         name: 'CVSwitch',
-        props:['name','value'],
+        props: ['name', 'value'],
         data() {
-            return {
-                
-            }
+            return {}
         },
-        computed:{
-            localValue:{
-                get(){
+        computed: {
+            localValue: {
+                get() {
                     return this.value;
                 },
-                set(value){
-                    this.$emit('input',value)
+                set(value) {
+                    this.$emit('input', value)
                 }
             }
         }
@@ -34,5 +32,5 @@
 </script>
 
 <style lang="" scoped>
-    
+
 </style>