add-edit-command component is capable of adding commands

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
       }

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,
+        };
+      }
     }
   }
 }

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() {

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

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)"
         >