Building action.cmd[] and editing of command, arg. Order of commands can't be edited yet

src/options/controls-settings/add-edit-action-popup.vue

@@ -8,23 +8,27 @@
       </div>
 
       <CommandChain class="w100"
-                    :command="action.command"
+                    :command="action.cmd"
                     @new-command="addNewCommand()"
+                    @edit="editCommand"
+                    @delete="deleteCommand"
       >
       </CommandChain>
-      <pre>
-        Action:
-        {{action}}
-        ----
-      </pre>
       <CommandAddEdit class="w100"
                       v-if="addEditCommand"
-                      :command="currentCmd"
+                      :action="currentCmd"
                       @set-command="updateCommand"
                       @close-popup="addEditCommand=false"
       >
       </CommandAddEdit>
 
+      <pre>
+        ----- [ raw action data ] -----
+        Action:
+        {{action}}
+        --- [ end raw action data ] ---
+      </pre>
+
       <div class="flex flex-column">
         <div class="flex flex-row">
           <div class="flex label-secondary form-label">
@@ -138,6 +142,11 @@ export default {
       }
     }
   },
+  watch: {
+    action: {
+      deep: true,
+    }
+  },
   methods: {
     parseActionShortcut(action) {
       return KeyboardShortcutParser.parseShortcut(action.shortcut[0]);
@@ -166,9 +175,19 @@ export default {
     },
     addNewCommand() {
       this.currentCmdIndex = -1;
+      this.currentCmd = undefined;
       this.addEditCommand = true;
       console.log("adding command")
     },
+    editCommand(index) {
+      this.currentCmdIndex = index;
+      this.currentCmd = this.action.cmd[index];
+      this.addEditCommand = true;
+      console.log("EDITING COMMAND")
+    },
+    deleteCommand(index) {
+      this.action.cmd.splice(index,1);
+    },
     updateCommand(action, arg) {
       this.addEditCommand = false;
       if (this.currentCmdIndex < 0) {
@@ -182,6 +201,9 @@ export default {
           arg: arg,
         };
       }
+      this.action = JSON.parse(JSON.stringify(this.action));
+
+      // this.$nextTick(function() {this.$forceUpdate()});
     }
   }
 }

src/options/controls-settings/command-builder/command-add-edit.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="">
-    Values:
     <div class="window-content">
-      <pre>{{action}}</pre>
-      <pre>{{selectedAction}}</pre>
-      <pre>{{selectedArgument}}</pre>
-
       <!-- ACTION SELECT -->
       <div class="flex flex-row">
         <div class="flex label-secondary form-label">
@@ -15,8 +10,10 @@
         </div>
         <div class="flex flex-grow flex-input">
           <select class=""
+                  :value="selectedAction"
                   @change="setAction($event.target.value)"
           >
+            <option :value="undefined" selected disabled>Select ...</option>
             <option v-for="(action, key) in ActionList"
                     :value="key"
                     :key="key"
@@ -37,8 +34,10 @@
         </div>
         <div class="flex flex-grow flex-input">
           <select class=""
+                  :value="selectedArgument ? selectedArgument.arg : undefined"
                   @change="setArgument($event.target.value)"
           >
+            <option :value="undefined" selected disabled>Select ...</option>
             <option v-for="(arg, key) of ActionList[selectedAction].args"
                     :key="key"
                     :value="key"
@@ -79,6 +78,20 @@
         Save
       </div>
     </div>
+    <pre>
+    ----- [ COMMAND DATA ] -----
+    
+    :: Action:
+    {{action}}
+
+    :: Selected Action:
+    {{selectedAction}}
+    
+    :: Selected Argumennt:
+    {{selectedArgument}}
+    --- [ END COMMAND DATA ] ---  
+  </pre>
+
   </div>
 </template>
 
@@ -91,19 +104,28 @@ export default {
     return {
       Stretch: Stretch,
       ActionList: ActionList,
-      selectedAction: this.action ? action.action : undefined,
+      selectedAction: undefined,
-      selectedArgument: this.action ? {
+      selectedArgument: undefined,
-        name: ActionList[action.action].args.find(x => x.arg === action.arg) || ActionList[action.action].args.find(x => x.customArg),
+      customArgumentValue: undefined
-        arg: action.arg
-      } : undefined,
-      customArgumentValue: this.action ? action.arg : undefined
     }
   },
   created () {
-    console.log("this.actionList", ActionList, this.ActionList)
+    if (this.action) {
-    for(const a in ActionList) {
+      this.selectedAction = this.action.cmd;
-      console.log(a);
+      this.selectedArgument = {
+        name: ActionList[this.action.cmd].args.find(x => x.arg === this.action.arg) || ActionList[this.action.cmd].args.find(x => x.customArg),
+        arg: this.action.arg
+      }
+      this.customArgumentValue = this.action.arg;
     }
+    
+    // console.log("this.actionList", ActionList, this.ActionList)
+    // for(const a in ActionList) {
+    //   console.log(a);
+    // }
+  },
+  mounted() {
+    
   },
   props: {
     action: Object,

src/options/controls-settings/command-builder/command-block.vue

@@ -1,39 +1,37 @@
 <template>
   <div class="block-main">
-
-    <div v-if="!first"
-         class="prev"
-         @click="emit('move-left')"
-    >
-      &lt;
-    </div>
-
     <div class="button-main">
       <div class="button-action-display">
-        {{ActionList[action.action].name}}: {{
+        {{ActionList[action.cmd].name}}:&nbsp;{{
-          ActionList[action.action].args.find(x => x.arg === action.arg) || action.arg
+          /*ActionList[action.cmd].args.find(x => x.arg === action.arg).arg ||*/ action.arg
         }}
       </div>
-      <div class="actions flex flex-row">
+      <div class="actions flex flex-row flex-center flex-cross-center">
-        <div class="flex flex-grow"
+        <div v-if="!first || true"
+            class="flex order-button"
+            @click="$emit('move-left')"
+        >
+          &lt;
+        </div>
+        <div class="flex flex-grow command-action"
              @click="$emit('delete')"
         >
           🗙
         </div>
-        <div class="flex flex-grow"
+        <div class="flex flex-grow command-action"
              @click="$emit('edit')"
         >
           🖉
         </div>
+        <div v-if="!last || true"
+            class="flex order-button"
+            @click="$emit('move-right')"
+        >
+          &gt;
+        </div>
       </div>
     </div>
 
-    <div v-if="!last"
-         class="next"
-         @click="$emit('move-right')"
-    >
-      &gt;
-    </div>
    
   </div>
 </template>
@@ -57,7 +55,9 @@ export default {
   },
   methods: {
     parseActionShortcut(action) {
-      return KeyboardShortcutParser.parseShortcut(action.shortcut[0]);
+      if (action.shortcut) {
+        return KeyboardShortcutParser.parseShortcut(action.shortcut[0]);
+      }
     },
     setAction(cmd) {
       console.log("SETTING ACTION", cmd);
@@ -70,13 +70,36 @@ export default {
       this.selectedArgument = arg;
       this.customArgumentValue = undefined;
     },
-    emitCommand() {
+    // emitCommand() {
-      this.$emit(
+    //   this.$emit(
-        'set-command',
+    //     'set-command',
-        this.selectedAction,
+    //     this.selectedAction,
-        this.customArgumentValue ? this.customArgumentValue : this.selectedArgument.arg
+    //     this.customArgumentValue ? this.customArgumentValue : this.selectedArgument.arg
-      );
+    //   );
-    }
+    // }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import './../../../res/css/colors';
+
+.block-main {
+  border: 1px solid $primary-color;
+  min-width: 10rem;
+  padding-top: 0.1rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.button-action-display, .command-action, .order-button {
+  display: block;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: center;
+}
+.button-action-display {
+  padding-top: 0.1rem;
+}
+
+</style>

src/options/controls-settings/command-builder/command-chain.vue

@@ -1,22 +1,20 @@
 <template>
-  <div class="">
+  <div class="command-chain flex flex-row flex-center flex-cross-center">
-    {{command}}
+    <!-- {{command}} -->
-    <div class="flex flex-row">
+    <div class="flex flex-row flex-center flex-cross-center">
       <CommandBlock v-for="(cmd, index) of command"
                     :key="index"
-                    :command="cmd"
+                    :action="cmd"
-                    first
-                    last
                     @edit="$emit('edit', index)"
                     @delete="$emit('delete', index)"
                     @move-left="$emit('move-left', index)"
                     @move-right="$emit('move-left', (index + 1))"
       >
       </CommandBlock>
-      <div class="new-command"
+      <div class="new-command h100 flex flex-column flex-center flex-cross-center"
            @click="$emit('new-command')"
       >
-        +
+        <div><b>+</b></div>
       </div>
     </div>
   </div>
@@ -37,7 +35,17 @@ export default {
     'command'
   ],
   methods: {
-    
   }
 }
 </script>
+<style lang="scss" scoped>
+@import '../../../res/css/colors';
+
+.new-command {
+  color: $primary-color;
+  height: 100%;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  font-size: 2rem;
+}
+</style>

src/options/controls-settings/scope-settings-component/set-shortcut-button.vue

@@ -25,7 +25,7 @@ export default {
     }
   },
   created(){
-    if (shortcut) {
+    if (this.shortcut) {
       this.shortcutText = KeyboardShortcutParser.parseShortcut(shortcut);
     }
   },