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

2019-03-10 16:31:50 +01:00 · 2019-03-10 16:31:50 +01:00 · 22c44a3972
commit 22c44a3972
parent 76ff4da77f
5 changed files with 136 additions and 61 deletions
--- a/src/options/controls-settings/add-edit-action-popup.vue
+++ b/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()});
    }
  }
 }
--- a/src/options/controls-settings/command-builder/command-add-edit.vue
+++ b/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,
-      selectedArgument: this.action ? {
-        name: ActionList[action.action].args.find(x => x.arg === action.arg) || ActionList[action.action].args.find(x => x.customArg),
-        arg: action.arg
-      } : undefined,
-      customArgumentValue: this.action ? action.arg : undefined
+      selectedAction: undefined,
+      selectedArgument: undefined,
+      customArgumentValue: undefined
    }
  },
  created () {
-    console.log("this.actionList", ActionList, this.ActionList)
-    for(const a in ActionList) {
-      console.log(a);
+    if (this.action) {
+      this.selectedAction = this.action.cmd;
+      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,
--- a/src/options/controls-settings/command-builder/command-block.vue
+++ b/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.action].args.find(x => x.arg === action.arg) || action.arg
+        {{ActionList[action.cmd].name}}:&nbsp;{{
+          /*ActionList[action.cmd].args.find(x => x.arg === action.arg).arg ||*/ action.arg
        }}
      </div>
-      <div class="actions flex flex-row">
-        <div class="flex flex-grow"
+      <div class="actions flex flex-row flex-center flex-cross-center">
+        <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() {
-      this.$emit(
-        'set-command',
-        this.selectedAction,
-        this.customArgumentValue ? this.customArgumentValue : this.selectedArgument.arg
-      );
-    }
+    // emitCommand() {
+    //   this.$emit(
+    //     'set-command',
+    //     this.selectedAction,
+    //     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>
--- a/src/options/controls-settings/command-builder/command-chain.vue
+++ b/src/options/controls-settings/command-builder/command-chain.vue
@ -1,22 +1,20 @@
 <template>
-  <div class="">
-    {{command}}
-    <div class="flex flex-row">
+  <div class="command-chain flex flex-row flex-center flex-cross-center">
+    <!-- {{command}} -->
+    <div class="flex flex-row flex-center flex-cross-center">
      <CommandBlock v-for="(cmd, index) of command"
                    :key="index"
-                    :command="cmd"
-                    first
-                    last
+                    :action="cmd"
                    @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>
--- a/src/options/controls-settings/scope-settings-component/set-shortcut-button.vue
+++ b/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);
    }
  },