From f07a1e529e4a5d997de1c58282a201e973317893 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 27 Feb 2019 21:59:57 +0100
Subject: [PATCH] add-edit-command component is capable of adding commands

---
 src/ext/conf/ActionList.js                    |  4 +--
 .../add-edit-action-popup.vue                 | 26 +++++++++++++++++--
 .../command-builder/command-add-edit.vue      | 19 +++++++++-----
 .../command-builder/command-chain.vue         |  2 ++
 .../controls-settings/controls-settings.vue   |  5 ++++
 5 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/ext/conf/ActionList.js b/src/ext/conf/ActionList.js
index 9cdcfd3..5b3f4ef 100644
--- a/src/ext/conf/ActionList.js
+++ b/src/ext/conf/ActionList.js
@@ -43,8 +43,8 @@ var ActionList = {
       name: 'Thin borders',
       arg: Stretch.Conditional,
     },{
-      name: Stretch.Default,
-      arg: -1,
+      name: 'Default',
+      arg: Stretch.Default,
       scopes: {
         site: true
       }
diff --git a/src/options/controls-settings/add-edit-action-popup.vue b/src/options/controls-settings/add-edit-action-popup.vue
index 74d394e..59b10c1 100644
--- a/src/options/controls-settings/add-edit-action-popup.vue
+++ b/src/options/controls-settings/add-edit-action-popup.vue
@@ -12,9 +12,16 @@
                     @new-command="addNewCommand()"
       >
       </CommandChain>
+      <pre>
+        Action:
+        {{action}}
+        ----
+      </pre>
       <CommandAddEdit class="w100"
                       v-if="addEditCommand"
                       :command="currentCmd"
+                      @set-command="updateCommand"
+                      @close-popup="addEditCommand=false"
       >
       </CommandAddEdit>
 
@@ -118,7 +125,7 @@ export default {
         cmd: [],
       },
       addEditCommand: false,
-      currentCmd: {},
+      currentCmdIndex: -1,
     }
   },
   created () {
@@ -148,8 +155,23 @@ export default {
 
     },
     addNewCommand() {
-      this.currentCmd = {};
+      this.currentCmdIndex = -1;
       this.addEditCommand = true;
+      console.log("adding command")
+    },
+    updateCommand(action, arg) {
+      this.addEditCommand = false;
+      if (this.currentCmdIndex < 0) {
+        this.action.cmd.push({
+          cmd: action,
+          arg: arg,
+        });
+      } else {
+        this.action.cmd[this.currentCmdIndex] = {
+          cmd: action,
+          arg: arg,
+        };
+      }
     }
   }
 }
diff --git a/src/options/controls-settings/command-builder/command-add-edit.vue b/src/options/controls-settings/command-builder/command-add-edit.vue
index d8065a1..22848f3 100644
--- a/src/options/controls-settings/command-builder/command-add-edit.vue
+++ b/src/options/controls-settings/command-builder/command-add-edit.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="">
+    Values:
     <div class="window-content">
+      <pre>{{action}}</pre>
+      <pre>{{selectedAction}}</pre>
+      <pre>{{selectedArgument}}</pre>
 
       <!-- ACTION SELECT -->
       <div class="flex flex-row">
@@ -15,6 +19,7 @@
           >
             <option v-for="(action, key) in ActionList"
                     :value="key"
+                    :key="key"
             >
               {{action.name}}
             </option>
@@ -31,9 +36,12 @@
           </span>
         </div>
         <div class="flex flex-grow flex-input">
-          <select @change="setArgument($event.target.value)">
-            <option v-for="arg of ActionList[selectedAction].args"
-                    :value="arg"
+          <select class=""
+                  @change="setArgument($event.target.value)"
+          >
+            <option v-for="(arg, key) of ActionList[selectedAction].args"
+                    :key="key"
+                    :value="key"
             >
               {{arg.name}}
             </option>
@@ -41,8 +49,6 @@
         </div>
       </div>
 
-
-
       <!-- CUSTOM ARGUMENT INPUT -->
       <div v-if="selectedArgument && selectedArgument.customArg"
         class="flex flex-row">
@@ -111,8 +117,7 @@ export default {
       this.customArgumentValue = undefined;
     },
     setArgument(arg) {
-      console.log("SETTING ARGUMENT", cmd);
-      this.selectedArgument = arg;
+      this.selectedArgument = ActionList[this.selectedAction].args[arg];
       this.customArgumentValue = undefined;
     },
     emitCommand() {
diff --git a/src/options/controls-settings/command-builder/command-chain.vue b/src/options/controls-settings/command-builder/command-chain.vue
index a94aa93..f96d515 100644
--- a/src/options/controls-settings/command-builder/command-chain.vue
+++ b/src/options/controls-settings/command-builder/command-chain.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="">
+    {{command}}
     <div class="flex flex-row">
       <CommandBlock v-for="(cmd, index) of command"
+                    :key="index"
                     :command="cmd"
                     first
                     last
diff --git a/src/options/controls-settings/controls-settings.vue b/src/options/controls-settings/controls-settings.vue
index 6444256..731a670 100644
--- a/src/options/controls-settings/controls-settings.vue
+++ b/src/options/controls-settings/controls-settings.vue
@@ -8,6 +8,7 @@
       </div>
       <template v-for="(action, index) of settings.active.actions">
         <ActionAlt v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-ar'"
+                   :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
         >
@@ -20,6 +21,7 @@
       </div>
       <template v-for="(action, index) of settings.active.actions">
         <ActionAlt v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
+                   :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
         >
@@ -32,6 +34,7 @@
       </div>
       <template v-for="(action, index) of settings.active.actions">
         <ActionAlt v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
+                   :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
         >
@@ -49,6 +52,7 @@
                             action.cmd[0].action === 'pan' ||
                             action.cmd[0].action === 'set-pan'
                         )"
+                   :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
         >
@@ -69,6 +73,7 @@
                             action.cmd[0].action !== 'set-stretch' &&
                             action.cmd[0].action !== 'set-ar'
                         )"
+                   :key="index"
                    :action="action"
                    @edit="changeShortcut(index)"
         >