Added support for categories

package-lock.json

@@ -1008,6 +1008,14 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@johmun/vue-tags-input": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@johmun/vue-tags-input/-/vue-tags-input-2.1.0.tgz",
+      "integrity": "sha512-Fdwfss/TqCqMJbGAkmlzKbcG/ia1MstYjhqPBj+zG7h/166tIcE1TIftUxhT9LZ+RWjRSG0EFA1UyaHQSr3k3Q==",
+      "requires": {
+        "vue": "^2.6.10"
+      }
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -8809,6 +8817,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuejs-auto-complete": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/vuejs-auto-complete/-/vuejs-auto-complete-0.9.0.tgz",
+      "integrity": "sha512-7UV3s9bXdnsbGARhHcOuDAszGUsz7JpsFKBfHQuQvo4rfH0yQIru2Rb/x2bWU+m+VW4fS9DKDSYi6tY511QSIA=="
+    },
     "watchpack": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",

package.json

@@ -23,10 +23,12 @@
     }
   },
   "dependencies": {
+    "@johmun/vue-tags-input": "^2.1.0",
     "axios": "^0.19.0",
     "prismjs": "^1.20.0",
     "vue": "^2.6.10",
     "vue-prism-editor": "^0.6.1",
+    "vuejs-auto-complete": "^0.9.0",
     "webextension-polyfill": "^0.3.1"
   },
   "devDependencies": {

src/common.scss

@@ -69,4 +69,48 @@ form {
   }
 }
 
+.autocomplete__box {
+  border: 0 !important;
+  padding: 0 !important;
+
+  .autocomplete__icon {
+    display: none;
+  }
+
+  .autocomplete__inputs {
+    padding: 0 !important;
+  }
+
+  input[type='text'] {
+    margin: 0 !important;
+  }
+}
+
+.vue-tags-input {
+  width: 100% !important;
+
+  .ti-input {
+    border-radius: 5em !important;
+  }
+
+  input[type='text'] {
+    border: 0 !important;
+  }
+}
+
+.category {
+  .head {
+    font-weight: bold;
+    cursor: pointer;
+
+    i {
+      margin-left: 0.5em;
+    }
+
+    .name {
+      margin-left: 1.5em;
+    }
+  }
+}
+
 // vim:sw=2:ts=2:et:

src/options/Autocomplete.vue

@@ -1,208 +0,0 @@
-<template>
-  <div class="input autocomplete">
-    <input
-      type="text"
-      name="action"
-      autocomplete="off"
-      ref="input"
-      :value="value"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @keydown="onKeyDown"
-      @keyup="onKeyUp"
-      @focus="showItems = true"
-      @blur="showItems = false"
-      @change="onInput"
-    />
-
-    <ul class="items" ref="items" v-if="filteredItems.length && showItems">
-      <li class="item" :class="{ selected: selectedItem == i }" v-for="(item, i) in filteredItems" :key="i" v-text="item" @mousedown="onSelect" @touchstart="onSelect" />
-    </ul>
-  </div>
-</template>
-
-<script>
-import mixins from '../utils';
-
-function _filter(item, items) {
-  return items.filter(i => i.startsWith(item));
-}
-
-export default {
-  name: 'Autocomplete',
-  mixins: [mixins],
-  props: {
-    items: Array,
-    value: String,
-    placeholder: String,
-    filter: {
-      type: Function,
-      default: _filter,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      showItems: false,
-      selectedItem: -1,
-      lastValue: this.value,
-      filteredItems: [],
-    };
-  },
-
-  methods: {
-    onInput() {
-      const value = this.$refs.input.value;
-      this.lastValue = value;
-      this.filterItems();
-      this.$emit('change', value);
-    },
-
-    onSelect(event) {
-      const value = event.target.innerText;
-      this.$refs.input.value = value;
-      this.showItems = false;
-      this.filterItems();
-      this.$emit('change', value);
-      this.$refs.input.focus();
-    },
-
-    onKeyDown(event) {
-      if (!this.$refs.items) {
-        return;
-      }
-
-      const selected = this.$refs.items.querySelector('.selected');
-      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
-        switch (event.key) {
-          case 'Enter':
-          case ' ':
-            this.showItems = false;
-            if (!selected) {
-              return;
-            }
-
-            this.$refs.input.value = selected.innerText;
-            this.$emit('change', selected.innerText);
-            break;
-
-          case 'Tab':
-            this.selectNext();
-            break;
-        }
-
-        event.preventDefault();
-      }
-    },
-
-    selectPrev() {
-      if (this.selectedItem > 0) {
-        this.selectedItem--;
-      } else {
-        this.selectedItem = this.filteredItems.length - 1;
-      }
-    },
-
-    selectNext() {
-      if (this.selectedItem >= this.filteredItems.length - 1) {
-        this.selectedItem = this.filteredItems.length ? 0 : -1;
-      } else {
-        this.selectedItem++;
-      }
-    },
-
-    onKeyUp(event) {
-      if (event.key === 'Escape') {
-        this.showItems = false;
-        return;
-      }
-
-      this.showItems = true;
-
-      if (['ArrowUp', 'ArrowDown'].indexOf(event.key) >= 0) {
-        switch (event.key) {
-          case 'ArrowUp':
-            this.selectPrev();
-            break;
-          case 'ArrowDown':
-            this.selectNext();
-            break;
-        }
-
-        const self = this;
-        setTimeout(() => {
-          const selected = self.$refs.items.querySelector('.selected');
-          if (selected) {
-            self.$refs.items.scrollTop = selected.offsetTop;
-          }
-        }, 10);
-
-        event.stopPropagation();
-        return;
-      }
-
-      const value = this.$refs.input.value;
-      if (this.lastValue === value) {
-        return;
-      }
-
-      this.selectedItem = -1;
-      this.lastValue = value;
-      this.filterItems();
-      this.$emit('change', value);
-    },
-
-    filterItems() {
-      const value = this.$refs.input.value;
-      if (!value.length) {
-        this.filteredItems = [];
-        return;
-      }
-
-      this.filteredItems = this.filter(value, this.items);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.autocomplete {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.items {
-  width: 100%;
-  max-height: 20em;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  top: 1.35em;
-  background: white;
-  z-index: 5;
-  list-style: none;
-  padding: 0;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.5em;
-}
-
-.item {
-  cursor: pointer;
-  padding: 0.5em;
-
-  &.selected {
-    background-color: rgba(200, 255, 220, 1);
-  }
-
-  &:hover {
-    background-color: rgba(200, 255, 220, 0.7);
-  }
-}
-</style>
-
-<!-- vim:sw=2:ts=2:et: -->

src/options/LocalCommands.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="page local-actions">
     <div class="body">
-      <h2 v-if="Object.keys(actions).length && host">Actions stored for {{ host }}</h2>
+      <div class="actions-container" v-if="Object.keys(actions).length">
-      <h2 v-else-if="Object.keys(actions).length">Actions</h2>
+        <h2 v-if="host">Actions stored for {{ host }}</h2>
+        <h2 v-else>Actions</h2>
 
+        <div class="categories">
+          <div class="category" v-for="(actions, category) in actionsByCategory" :key="category">
+            <div class="head" v-if="category.length && Object.keys(actions).length" @click="selectedCategory = selectedCategory === category ? null : category">
+              <i class="fas" :class="selectedCategory === category ? 'fa-chevron-up' : 'fa-chevron-down'" />
+              <span class="name" v-text="category" />
+            </div>
+
+            <div class="action-container" v-if="selectedCategory === category">
               <form class="action" :class="{ selected: selectedAction === name }" v-for="(action, name) in actions" :key="name" @submit.prevent="runAction">
-        <div class="head" @click="toggleSelectedAction(name)">
+                <div class="action-head" @click="toggleSelectedAction(name)">
                   <div class="icon">
                     <i :class="action.iconClass" v-if="action.iconClass" />
                     <i class="fas fa-cog" v-else />
@@ -30,6 +39,11 @@
                       <div class="value" v-text="action.name" />
                     </div>
 
+                    <div class="row" v-if="action.categories && Object.keys(action.categories).length">
+                      <div class="label">Categories</div>
+                      <div class="value" v-text="action.categories.join(', ')" />
+                    </div>
+
                     <div class="row" :class="{ hidden: argValue == null || argValue == '' }" v-for="(argValue, argName) in action.args" :key="argName">
                       <div class="label" v-text="argName" />
                       <div class="value" v-text="argValue" />
@@ -43,12 +57,25 @@
                   </div>
                 </div>
               </form>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <h2 v-if="Object.keys(scripts).length && host">Scripts stored for {{ host }}</h2>
+      <div class="scripts-container" v-if="Object.keys(scripts).length">
-      <h2 v-else-if="Object.keys(scripts).length">Scripts</h2>
+        <h2 v-if="host">Scripts stored for {{ host }}</h2>
+        <h2 v-else>Scripts</h2>
 
+        <div class="categories">
+          <div class="category" v-for="(actions, category) in actionsByCategory" :key="category">
+            <div class="head" v-if="category.length && Object.keys(actions).length" @click="selectedCategory = selectedCategory === category ? null : category">
+              <i class="fas" :class="selectedCategory === category ? 'fa-chevron-up' : 'fa-chevron-down'" />
+              <span class="name" v-text="category" />
+            </div>
+
+            <div class="action-container" v-if="selectedCategory === category">
               <form class="action" :class="{ selected: selectedScript === name }" v-for="(script, name) in scripts" :key="name" @submit.prevent="_runScript">
-        <div class="head" @click="toggleSelectedScript(name)">
+                <div class="action-head" @click="toggleSelectedScript(name)">
                   <div class="icon">
                     <i :class="script.iconClass" v-if="script.iconClass" />
                     <i class="fas fa-cog" v-else />
@@ -65,6 +92,11 @@
                 </div>
 
                 <div class="body" v-if="selectedScript === name">
+                  <div class="row" v-if="action.categories && Object.keys(action.categories).length">
+                    <div class="label">Categories</div>
+                    <div class="value" v-text="action.categories.join(', ')" />
+                  </div>
+
                   <PrismEditor :code="script.script.toString()" language="js" :readonly="true" />
 
                   <div class="code" v-if="response || error || loading" :class="{ response: response, error: error }">
@@ -75,6 +107,10 @@
                 </div>
               </form>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <div class="no-actions" v-if="!(Object.keys(actions).length || Object.keys(scripts).length)">No actions available on this device</div>
   </div>
@@ -102,6 +138,7 @@ export default {
       scripts: {},
       selectedAction: null,
       selectedScript: null,
+      selectedCategory: null,
       response: null,
       error: null,
     };
@@ -123,6 +160,32 @@ export default {
       }, {});
     },
 
+    actionsByCategory() {
+      if (!(this.host && this.host in this.actionsByHost)) {
+        return {};
+      }
+
+      return Object.entries(this.actionsByHost[this.host]).reduce((obj, [name, action]) => {
+        if (!(action.categories && action.categories.length)) {
+          if (!('' in obj)) {
+            obj[''] = {};
+          }
+
+          obj[''][name] = action;
+        } else {
+          for (const category of action.categories) {
+            if (!(category in obj)) {
+              obj[category] = {};
+            }
+
+            obj[category][name] = action;
+          }
+        }
+
+        return obj;
+      }, {});
+    },
+
     actions() {
       return this.host ? this.actionsByHost[this.host] || {} : this.actions_;
     },
@@ -242,14 +305,30 @@ export default {
 form {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 
-  .head {
+  &:not(.selected):nth-child(even) {
+    .action-head {
+      background: rgba(0, 0, 0, 0.03);
+    }
+  }
+
+  &.selected {
+    .action-head {
+      background: rgba(200, 255, 220, 1);
+      border-radius: 1em;
+    }
+  }
+
+  .action-head {
     display: flex;
     align-items: center;
     position: relative;
     padding: 1em;
-    border-radius: 1em;
     cursor: pointer;
 
+    &:hover {
+      background: rgba(200, 255, 220, 0.7) !important;
+    }
+
     .icon {
       font-size: 1.2em;
       margin-right: 1.5em;
@@ -267,16 +346,6 @@ form {
       border: 1px solid rgba(0, 0, 0, 0.2);
       border-radius: 1em;
     }
-
-    &:hover {
-      background-color: rgba(200, 255, 220, 0.7);
-    }
-  }
-
-  &.selected {
-    .head {
-      background-color: rgba(200, 255, 220, 1);
-    }
   }
 
   .body {
@@ -304,6 +373,16 @@ form {
   }
 }
 
+.category {
+  border: 1px solid rgba(0, 0, 0, 0.075);
+  margin: 0 -1em;
+  padding: 0 1em;
+
+  .head {
+    padding: 1em 0.25em;
+  }
+}
+
 .no-actions {
   height: 100%;
   display: flex;

src/options/Run.vue

@@ -22,7 +22,7 @@
       <form ref="runForm" @submit.prevent="runAction">
         <div class="row action-head">
           <div class="action-name">
-            <Autocomplete :items="Object.keys(actions)" :value="action.name" :disabled="loading" placeholder="Action" @change="onActionChange" />
+            <Autocomplete :source="actionsAutocomplete" :disableInput="loading" :name="action.name || ''" placeholder="Action" @input="onActionChange" />
           </div>
           <div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
         </div>
@@ -90,6 +90,17 @@
         <input type="text" name="iconClass" placeholder="FontAwesome icon class (e.g. 'fas fa-play')" />
       </div>
 
+      <div class="row">
+        <vue-tags-input
+          v-model="selectedCategory"
+          :autocomplete-items="categoriesAutocomplete"
+          :disabled="loading"
+          :separators="[',', ';']"
+          @tags-changed="tags => (selectedCategories = tags)"
+          placeholder="Categories"
+        />
+      </div>
+
       <div class="row multiple-host-selector">
         <div class="desc">
           Install script on these devices
@@ -115,7 +126,8 @@ import 'prismjs/themes/prism.css';
 import PrismEditor from 'vue-prism-editor';
 
 import mixins from '../utils';
-import Autocomplete from './Autocomplete';
+import Autocomplete from 'vuejs-auto-complete';
+import VueTagsInput from '@johmun/vue-tags-input';
 import MultipleHostSelector from './MultipleHostSelector';
 
 export default {
@@ -140,6 +152,7 @@ export default {
 
   components: {
     Autocomplete,
+    VueTagsInput,
     MultipleHostSelector,
     PrismEditor,
   },
@@ -154,6 +167,9 @@ export default {
       actionError: null,
       hosts: {},
       script: this.scriptTemplate,
+      storedActions: {},
+      selectedCategory: '',
+      selectedCategories: [],
       actionMode: 'request',
       action: {
         name: null,
@@ -186,15 +202,13 @@ export default {
       return { ...plugins, ...procedures };
     },
 
-    filteredActions() {
+    actionsAutocomplete() {
-      if (!(this.action.name && this.action.name.length)) return {};
+      return Object.keys(this.actions).map(action => {
-
+        return {
-      return Object.entries(this.actions)
+          id: action,
-        .filter(([name, action]) => name.startsWith(this.action.name))
+          name: action,
-        .reduce((obj, [name, action]) => {
+        };
-          obj[name] = action;
+      });
-          return obj;
-        }, {});
     },
 
     actionTemplate() {
@@ -204,6 +218,26 @@ export default {
 
       return this.actions[this.action.name];
     },
+
+    categories() {
+      return Object.keys(
+        Object.values(this.storedActions).reduce((obj, action) => {
+          for (const category of action.categories || []) {
+            obj[category] = true;
+          }
+
+          return obj;
+        }, {})
+      );
+    },
+
+    categoriesAutocomplete() {
+      return this.categories.map(cat => {
+        return {
+          text: cat,
+        };
+      });
+    },
   },
 
   methods: {
@@ -273,6 +307,10 @@ export default {
       }
     },
 
+    async loadActions() {
+      this.storedActions = await this.getActions();
+    },
+
     async save(event) {
       return this.actionMode === 'request' ? await this.storeAction(event) : await this.storeScript(event);
     },
@@ -299,6 +337,7 @@ export default {
         iconClass: iconClass,
         hosts: hosts,
         script: this.script,
+        categories: this.selectedCategories.map(obj => obj.text),
       };
 
       await this.saveScript(script);
@@ -327,6 +366,7 @@ export default {
         hosts: hosts,
         name: this.action.name,
         args: this.getActionArgs(),
+        categories: this.selectedCategories.map(obj => obj.text),
       };
 
       await this.saveAction(action);
@@ -340,12 +380,17 @@ export default {
       this.action.name = action;
       this.action.args = [];
     },
+
+    onCategoryInput(event) {
+      console.log(event);
+    },
   },
 
   created() {
     this.clearAction();
     this.loadHosts();
     this.loadPlugins();
+    this.loadActions();
   },
 };
 </script>

src/popup/App.vue

@@ -28,7 +28,15 @@
           No actions available for {{ selectedHost }}. Click <a href="/options/options.html" target="_blank">here</a> to configure the device.
         </div>
 
-        <div class="action" v-for="(action, name) in actions" :key="name" :data-action="name" @click="run_($event.target.dataset.action)" v-else>
+        <div class="categories" v-else>
+          <div class="category" v-for="(actions, category) in actionsByCategory" :key="category">
+            <div class="head" v-if="category.length" @click="selectedCategory = selectedCategory === category ? null : category">
+              <i class="fas" :class="selectedCategory === category ? 'fa-chevron-up' : 'fa-chevron-down'" />
+              <span class="name" v-text="category" />
+            </div>
+
+            <div class="actions" v-if="selectedCategory === category || !category.length">
+              <div class="action" v-for="(action, name) in actions" :key="name" :data-action="name" @click="run_($event.target.dataset.action)">
                 <div class="icon">
                   <i :class="action.iconClass" v-if="action.iconClass" />
                   <i class="fas fa-cog" v-else />
@@ -39,6 +47,9 @@
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -52,6 +63,7 @@ export default {
       actions_: null,
       scripts_: null,
       selectedHost: null,
+      selectedCategory: null,
     };
   },
 
@@ -76,6 +88,32 @@ export default {
       }, {});
     },
 
+    actionsByCategory() {
+      if (!this.selectedHost) {
+        return {};
+      }
+
+      return Object.entries(this.actionsByHost[this.selectedHost]).reduce((obj, [name, action]) => {
+        if (!(action.categories && action.categories.length)) {
+          if (!('' in obj)) {
+            obj[''] = {};
+          }
+
+          obj[''][name] = action;
+        } else {
+          for (const category of action.categories) {
+            if (!(category in obj)) {
+              obj[category] = {};
+            }
+
+            obj[category][name] = action;
+          }
+        }
+
+        return obj;
+      }, {});
+    },
+
     actions() {
       return this.actionsByHost[this.selectedHost];
     },
@@ -108,7 +146,7 @@ export default {
         return;
       }
 
-      this.notify('', 'Action executed');
+      this.notify('Action ' + action + ' executed on ' + this.host.name);
       return ret;
     },
   },
@@ -132,7 +170,6 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-}
 
   .head {
     width: 100%;
@@ -157,6 +194,7 @@ export default {
       text-align: right;
     }
   }
+}
 
 .body {
   height: calc(100% - 2.5em);
@@ -189,6 +227,7 @@ export default {
 .loading {
   height: 100%;
   margin: auto;
+  padding: 2em;
   font-size: 1.3em;
   text-align: center;
   color: rgba(0, 0, 0, 0.8);