From a60cbadac4e503dcb88dd79ba40875f32c235099 Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Fri, 18 Oct 2019 16:48:08 +0300
Subject: [PATCH] made ui denser and finished all ui commands

---
 .../src/components/cv-input.vue               |  17 ++-
 .../src/components/cv-number-input.vue        |   2 +-
 .../src/components/cv-range-slider.vue        |   2 +-
 .../src/components/cv-select.vue              |   4 +-
 .../src/components/cv-slider.vue              |   2 +-
 .../src/components/cv-switch.vue              |   2 +-
 .../chameleon-client/src/views/Camera.vue     | 105 ++++++++++++++++--
 7 files changed, 113 insertions(+), 21 deletions(-)

diff --git a/New client/chameleon-client/src/components/cv-input.vue b/New client/chameleon-client/src/components/cv-input.vue
index dbd8de4d3..342bf2094 100644
--- a/New client/chameleon-client/src/components/cv-input.vue	
+++ b/New client/chameleon-client/src/components/cv-input.vue	
@@ -1,11 +1,11 @@
 <template>
     <div>
-        <v-row align="center">
-            <v-col :cols="2">
+        <v-row dense align="center">
+            <v-col :cols="3">
                 <span>{{name}}</span>
             </v-col>
-            <v-col>
-                 <v-text-field dark v-model="localValue" class="mt-0 pt-0" hide-details single-line :disabled="disabled"></v-text-field>
+            <v-col :cols="9">
+                 <v-text-field @keydown="handleKeyboard" dark v-model="localValue" dense  :disabled="disabled" :error-messages="errorMessage"></v-text-field>
             </v-col>
         </v-row>
     </div>
@@ -14,12 +14,19 @@
 <script>
     export default {
         name: 'Input',
-        props:['name','value','disabled'],
+        props:['name','value','disabled','errorMessage'],
         data() {
             return {
                 
             }
         },
+        methods:{
+            handleKeyboard(event){
+                if(event.key == "Enter"){
+                    this.$emit("Enter");
+                }
+            }
+        },
         computed:{
             localValue:{
                 get(){
diff --git a/New client/chameleon-client/src/components/cv-number-input.vue b/New client/chameleon-client/src/components/cv-number-input.vue
index 352e53e0f..375861c1d 100644
--- a/New client/chameleon-client/src/components/cv-number-input.vue	
+++ b/New client/chameleon-client/src/components/cv-number-input.vue	
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-row align="center">
+        <v-row dense align="center">
             <v-col :cols="2">
                 <span>{{name}}</span>
             </v-col>
diff --git a/New client/chameleon-client/src/components/cv-range-slider.vue b/New client/chameleon-client/src/components/cv-range-slider.vue
index 8ef9931ea..7a2d5e6fd 100644
--- a/New client/chameleon-client/src/components/cv-range-slider.vue	
+++ b/New client/chameleon-client/src/components/cv-range-slider.vue	
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-row align="center">
+        <v-row dense align="center">
             <v-col :cols="2">
                 <span>{{name}}</span>
             </v-col>
diff --git a/New client/chameleon-client/src/components/cv-select.vue b/New client/chameleon-client/src/components/cv-select.vue
index 83f738bae..331330ca5 100644
--- a/New client/chameleon-client/src/components/cv-select.vue	
+++ b/New client/chameleon-client/src/components/cv-select.vue	
@@ -1,11 +1,11 @@
 <template>
     <div>
-        <v-row align="center">
+        <v-row dense align="center">
             <v-col :cols="3">
                 <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" dense :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-select>
             </v-col>
         </v-row>
     </div>
diff --git a/New client/chameleon-client/src/components/cv-slider.vue b/New client/chameleon-client/src/components/cv-slider.vue
index f617dac05..78d45b25c 100644
--- a/New client/chameleon-client/src/components/cv-slider.vue	
+++ b/New client/chameleon-client/src/components/cv-slider.vue	
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-row align="center">
+        <v-row dense align="center">
             <v-col :cols="2">
                 <span>{{name}}</span>
             </v-col>
diff --git a/New client/chameleon-client/src/components/cv-switch.vue b/New client/chameleon-client/src/components/cv-switch.vue
index 3b278c3bb..5e0fed2dd 100644
--- a/New client/chameleon-client/src/components/cv-switch.vue	
+++ b/New client/chameleon-client/src/components/cv-switch.vue	
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-row align="center">
+        <v-row dense align="center">
             <v-col :cols="2">
                 <span>{{name}}</span>
             </v-col>
diff --git a/New client/chameleon-client/src/views/Camera.vue b/New client/chameleon-client/src/views/Camera.vue
index 299b774f8..97749cac3 100644
--- a/New client/chameleon-client/src/views/Camera.vue	
+++ b/New client/chameleon-client/src/views/Camera.vue	
@@ -4,44 +4,55 @@
             <v-row align="center">
                 <v-col :cols="3" class="colsClass">
                     <div style="padding-left:30px">
-                        <CVselect name="Camera" v-model="currentCameraIndex" :list="cameraList"></CVselect>
+                        <CVselect v-if="isCameraNameEdit == false" name="Camera" v-model="currentCameraIndex" :list="cameraList"></CVselect>
+                        <CVinput v-else name="Camera" v-model="newCameraName" @Enter="saveCameraNameChange" :errorMessage="checkCameraName"></CVinput>
                     </div>
                 </v-col>
                 <v-col :cols="1">
-                    <CVicon color="#c5c5c5" hover text="edit" @click="test" tooltip="Edit camera name"></CVicon>
+                    <CVicon color="#c5c5c5" v-if="isCameraNameEdit == false" hover text="edit" @click="toCameraNameChange" tooltip="Edit camera name"></CVicon>
+                    <div v-else>
+                        <CVicon color="#c5c5c5" style="display: inline-block;"  hover text="save" @click="saveCameraNameChange" tooltip="Save Camera Name"></CVicon>
+                        <CVicon color="error" style="display: inline-block;"  hover text="close" @click="discardCameraNameChange" tooltip="Discard Changes"></CVicon>
+                    </div>
                 </v-col>
                 <v-col :cols="3" class="colsClass">
-                    <CVselect name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex" @input="handleInput('currentPipeline',currentPipelineIndex)"></CVselect>
+                    <CVselect v-if="isPipelineEdit == false" name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex" @input="handleInput('currentPipeline',currentPipelineIndex)"></CVselect>
+                    <CVinput v-else name="Pipeline" v-model="newPipelineName" @Enter="savePipelineNameChange"></CVinput>
                 </v-col>
                  <v-col :cols="1" class="colsClass">
-                        <v-menu offset-y dark auto>
+                        <v-menu v-if="isPipelineEdit == false" offset-y dark auto>
                             <template v-slot:activator="{ on }">
-                                <v-icon color="white" @click="test" v-on="on">menu</v-icon>
+                                <v-icon color="white" v-on="on">menu</v-icon>
                             </template>
                             <v-list dense>
-                                <v-list-item @click="test">
+                                <v-list-item @click="toPipelineNameChange">
                                     <v-list-item-title>
                                         <CVicon color="#c5c5c5" :right="true" text="edit" tooltip="Edit pipeline name"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
-                                      <v-list-item @click="test">
+                                      <v-list-item @click="handleInput('command','addNewPipeline')">
                                     <v-list-item-title>
                                         <CVicon color="#c5c5c5" :right="true" text="add" tooltip="Add new pipeline"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
-                                <v-list-item @click="test">
+                                <v-list-item @click="handleInput('command','deleteCurrentPipeline')">
                                     <v-list-item-title>
                                         <CVicon color="red darken-2" :right="true" text="delete" tooltip="Delete pipeline"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
-                                <v-list-item @click="test">
+                                <v-list-item @click="duplicateDialog = true">
                                     <v-list-item-title>
                                         <CVicon color="#c5c5c5" :right="true" text="mdi-content-copy" tooltip="Duplicate pipeline"></CVicon>
                                     </v-list-item-title>
                                 </v-list-item>
                             </v-list>
                         </v-menu>
+                        <div v-else>
+                            <CVicon color="#c5c5c5" style="display: inline-block;"  hover text="save" @click="savePipelineNameChange" tooltip="Save Pipeline Name"></CVicon>
+                            <CVicon color="error" style="display: inline-block;"  hover text="close" @click="discardPipelineNameChange" tooltip="Discard Changes"></CVicon>
+                        </div>
                 </v-col>
+                
             </v-row>
         </div>
         <v-row>
@@ -70,6 +81,24 @@
                 </div>
             </v-col>
       </v-row>
+      <!-- pipeline duplicate dialog -->
+      <v-dialog dark v-model="duplicateDialog" width="500" height="357" >
+        <v-card dark>
+            <v-card-title class="headline" primary-title>Duplicate Pipeline</v-card-title>
+                <v-card-text>
+                    <CVselect name="Pipeline" :list="pipelineList" v-model="pipelineDuplicate.pipeline" @input="handleInput('currentPipeline',currentPipelineIndex)"></CVselect>
+                    <v-checkbox  dark :label="'To another camera'" v-model="pipelineDuplicate.anotherCamera"></v-checkbox>
+                    <CVselect v-if="pipelineDuplicate.anotherCamera === true" name="Camera" v-model="pipelineDuplicate.camera" :list="cameraList"></CVselect>
+                </v-card-text>
+                <v-divider>
+                </v-divider>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="#4baf62" text @click="duplicatePipeline">Duplicate</v-btn>
+                    <v-btn color="error" text @click="closeDuplicateDialog">Discard</v-btn>
+                </v-card-actions>
+        </v-card>
+    </v-dialog>
     </div>
 </template>
 
@@ -80,6 +109,7 @@ import ContoursTab from './CameraViewes/ContoursTab'
 import OutputTab from './CameraViewes/OutputTab'
 import CVselect from '../components/cv-select'
 import CVicon from '../components/cv-icon'
+import CVinput from '../components/cv-input'
     export default {
         name: 'CameraTab',
         components:{
@@ -88,19 +118,74 @@ import CVicon from '../components/cv-icon'
             ContoursTab,
             OutputTab,
             CVselect,
-            CVicon
+            CVicon,
+            CVinput
         },
         methods:{
             test(value){
                 console.log(value)
+            },
+            toCameraNameChange(){
+                this.newCameraName = this.cameraList[this.currentCameraIndex];
+                this.isCameraNameEdit = true;
+            },
+            saveCameraNameChange(){
+                if(this.cameraNameError === ""){
+                    this.handleInput("changeCameraName",this.newCameraName);
+                    this.discardCameraNameChange();   
+                }
+            },
+            discardCameraNameChange(){
+                this.isCameraNameEdit = false;
+                this.newCameraName = "";
+            },
+            toPipelineNameChange(){
+                this.newPipelineName = this.pipelineList[this.currentPipelineIndex];
+                this.isPipelineEdit = true;
+            },
+            savePipelineNameChange(){
+                this.handleInput("changePipelineName",this.newPipelineName);
+                this.discardPipelineNameChange();
+            },
+            discardPipelineNameChange(){
+                this.isPipelineEdit = false;
+                this.newPipelineName = "";
+            },
+            duplicatePipeline(){
+                this.handleInput("dupicatePipeline",this.pipelineDuplicate);
+                this.closeDuplicateDialog();
+            },
+            closeDuplicateDialog(){
+                this.duplicateDialog = false;
+                this.pipelineDuplicate = {}
             }
         },
         data() {
             return {
                 selectedTab:0,
+                // camera edit variables
+                isCameraNameEdit:false,
+                newCameraName:"",
+                cameraNameError:"",
+                // pipeline edit variables
+                isPipelineEdit:false,
+                newPipelineName:"",
+                duplicateDialog:false,
+                pipelineDuplicate:{},
+
             }
         },
         computed:{
+            checkCameraName(){
+                if(this.newCameraName !== this.cameraList[this.currentCameraIndex]){
+                    for(let cam in this.cameraList){
+                        if(this.newCameraName == this.cameraList[cam]){
+                            return "Camera by that name already Exists"
+                        }
+                    }
+                }
+                return ""
+            },
             isBinaryNumber:{
                 get(){
                     return this.pipeline.isBinary ? 1:0