Ui rework (#96)

* updated libs, folder rework

* started store modules added data handle mixin

* more store rework

* name refractor and component split

* bug fixes and code cleanup

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

@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <v-row align="center" justify="start">
+            <v-col style="padding-right:0" :cols="3">
+                <v-btn small color="#4baf62" @click="takePointA">Take Point A</v-btn>
+            </v-col>
+            <v-col style="margin-left:0" :cols="3">
+                <v-btn small color="#4baf62" @click="takePointB">Take Point B</v-btn>
+            </v-col>
+            <v-col>
+                <v-btn small @click="clearSlope" color="yellow darken-3">Clear All Points</v-btn>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DualCalibration",
+        props: ['rawPoint'],
+        data() {
+            return {
+                pointA: undefined,
+                pointB: undefined
+            }
+        },
+        methods: {
+            takePointA() {
+                this.pointA = this.rawPoint;
+                this.calcSlope();
+            },
+            takePointB() {
+                this.pointB = this.rawPoint;
+                this.calcSlope();
+            },
+            calcSlope() {
+                if (this.pointA !== undefined && this.pointB !== undefined) {
+                    let m = (this.pointB[1] - this.pointA[1]) / (this.pointB[0] - this.pointA[0]);
+                    let b = this.pointA[1] - (m * this.pointA[0]);
+                    if (isNaN(m) === false && isNaN(b) === false) {
+                        this.sendSlope(m, b, true);
+                    } else {
+                        this.$emit('snackbar', "Points are too close");
+                    }
+                    this.pointA = undefined;
+                    this.pointB = undefined;
+                }
+            },
+            sendSlope(m, b) {
+                this.handleInput('dualTargetCalibrationM', m);
+                this.handleInput('dualTargetCalibrationB', b);
+                this.$emit('update');
+            },
+            clearSlope() {
+                this.sendSlope(1, 0, false);
+                this.pointA = undefined;
+                this.pointB = undefined;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <v-row align="center" justify="start">
+            <v-col style="padding-right:0" :cols="3">
+                <v-btn small color="#4baf62" @click="takePoint">Take Point</v-btn>
+            </v-col>
+            <v-col>
+                <v-btn small @click="clearPoint" color="yellow darken-3">Clear Point</v-btn>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "SingleCalibration",
+        props: ['rawPoint'],
+        methods: {
+            clearPoint() {
+                this.handleInput('point', []);
+                this.$emit('update');
+            },
+            takePoint() {
+                if (this.rawPoint[0] && this.rawPoint[1]) {
+                    this.handleInput('point', this.rawPoint);
+                    this.$emit('update');
+                } else {
+                    this.$emit('snackbar', "No target found");
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>