initial work on new vision loop

chameleon-client/src/components/contourTab.vue

@@ -1,8 +1,14 @@
 <template>
     <div id="ContourTab">
+     <chselect class="spacing" title="Sort Mode" Xkey="sort_mode" 
+        :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"></chselect>
      <chrange class="spacing" title="Area" Xkey="area"></chrange>
      <chrange class="spacing" title="Ratio (W/H)" Xkey="ratio"></chrange>
      <chrange class="spacing" title="Extent" Xkey="extent"></chrange>
+     <chselect class="spacing" title="Target Group" Xkey="target_group" 
+        :list="['Single','Dual','Triple','Quadruple','Quintuple']"></chselect>
+    <chselect class="spacing" title="Target Intersaction" Xkey="target_intersection" 
+        :list="['Up','Down','Left','Right','Parallel']"></chselect>
      </div>
 </template>
 

chameleon-client/src/components/outputTab.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="OutputTab">
+     <chselect class="spacing" title="Target region" Xkey="target_region" 
+        :list="['Upmost','Rightmost','Downmost','Leftmost','Centermost']"></chselect>
+        
+     </div>
+</template>
+
+<script>
+import chslider from './ch-slider.vue'
+import chselect from './ch-select.vue'
+import chrange from './ch-range.vue'
+
+    export default {
+        name: 'OutputTab',
+        components:{
+            chslider,
+            chselect,
+            chrange
+        },
+        methods:{
+
+        },
+        data() {
+            return {
+                
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+.spacing{
+    margin-top: 20px;
+}
+</style>