Added support for categories

This commit is contained in:
Fabio Manganiello 2020-06-22 01:09:02 +02:00
parent 3b8fe4e4f8
commit 207aef7d21
7 changed files with 336 additions and 322 deletions

13
package-lock.json generated
View File

@ -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",

View File

@ -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": {

View File

@ -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:

View File

@ -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: -->

View File

@ -1,79 +1,115 @@
<template>
<div class="page local-actions">
<div class="body">
<h2 v-if="Object.keys(actions).length && host">Actions stored for {{ host }}</h2>
<h2 v-else-if="Object.keys(actions).length">Actions</h2>
<div class="actions-container" v-if="Object.keys(actions).length">
<h2 v-if="host">Actions stored for {{ host }}</h2>
<h2 v-else>Actions</h2>
<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="icon">
<i :class="action.iconClass" v-if="action.iconClass" />
<i class="fas fa-cog" v-else />
</div>
<div class="name" v-text="name" />
<div class="controls">
<button type="button" class="run" :disabled="loading" @click.stop="runAction" v-if="selectedAction === name">
<i class="fas fa-play" />
</button>
<button type="button" class="remove" :disabled="loading" @click.stop="removeAction" v-if="selectedAction === name">
<i class="fas fa-trash" />
</button>
</div>
</div>
<div class="body" v-if="selectedAction === name">
<div class="desc">
<div class="row">
<div class="label">Action</div>
<div class="value" v-text="action.name" />
<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="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" />
<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="action-head" @click="toggleSelectedAction(name)">
<div class="icon">
<i :class="action.iconClass" v-if="action.iconClass" />
<i class="fas fa-cog" v-else />
</div>
<div class="name" v-text="name" />
<div class="controls">
<button type="button" class="run" :disabled="loading" @click.stop="runAction" v-if="selectedAction === name">
<i class="fas fa-play" />
</button>
<button type="button" class="remove" :disabled="loading" @click.stop="removeAction" v-if="selectedAction === name">
<i class="fas fa-trash" />
</button>
</div>
</div>
<div class="body" v-if="selectedAction === name">
<div class="desc">
<div class="row">
<div class="label">Action</div>
<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" />
</div>
</div>
<div class="code" v-if="response || error || loading" :class="{ response: response, error: error }">
<span v-if="loading">Loading...</span>
<span v-text="error" v-else-if="error" />
<span v-text="response" v-else-if="response" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="code" v-if="response || error || loading" :class="{ response: response, error: error }">
<span v-if="loading">Loading...</span>
<span v-text="error" v-else-if="error" />
<span v-text="response" v-else-if="response" />
<div class="scripts-container" v-if="Object.keys(scripts).length">
<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="action-head" @click="toggleSelectedScript(name)">
<div class="icon">
<i :class="script.iconClass" v-if="script.iconClass" />
<i class="fas fa-cog" v-else />
</div>
<div class="name" v-text="name" />
<div class="controls">
<button type="button" class="run" :disabled="loading" @click.stop="_runScript" v-if="selectedScript === name">
<i class="fas fa-play" />
</button>
<button type="button" class="remove" :disabled="loading" @click.stop="removeScript" v-if="selectedScript === name">
<i class="fas fa-trash" />
</button>
</div>
</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 }">
<span v-if="loading">Loading...</span>
<span v-text="error" v-else-if="error" />
<span v-text="response" v-else-if="response" />
</div>
</div>
</form>
</div>
</div>
</div>
</form>
<h2 v-if="Object.keys(scripts).length && host">Scripts stored for {{ host }}</h2>
<h2 v-else-if="Object.keys(scripts).length">Scripts</h2>
<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="icon">
<i :class="script.iconClass" v-if="script.iconClass" />
<i class="fas fa-cog" v-else />
</div>
<div class="name" v-text="name" />
<div class="controls">
<button type="button" class="run" :disabled="loading" @click.stop="_runScript" v-if="selectedScript === name">
<i class="fas fa-play" />
</button>
<button type="button" class="remove" :disabled="loading" @click.stop="removeScript" v-if="selectedScript === name">
<i class="fas fa-trash" />
</button>
</div>
</div>
<div class="body" v-if="selectedScript === name">
<PrismEditor :code="script.script.toString()" language="js" :readonly="true" />
<div class="code" v-if="response || error || loading" :class="{ response: response, error: error }">
<span v-if="loading">Loading...</span>
<span v-text="error" v-else-if="error" />
<span v-text="response" v-else-if="response" />
</div>
</div>
</form>
</div>
</div>
<div class="no-actions" v-if="!(Object.keys(actions).length || Object.keys(scripts).length)">No actions available on this device</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;

View File

@ -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() {
if (!(this.action.name && this.action.name.length)) return {};
return Object.entries(this.actions)
.filter(([name, action]) => name.startsWith(this.action.name))
.reduce((obj, [name, action]) => {
obj[name] = action;
return obj;
}, {});
actionsAutocomplete() {
return Object.keys(this.actions).map(action => {
return {
id: action,
name: action,
};
});
},
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>

View File

@ -28,13 +28,24 @@
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="icon">
<i :class="action.iconClass" v-if="action.iconClass" />
<i class="fas fa-cog" v-else />
</div>
<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="name" v-text="name" />
<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 />
</div>
<div class="name" v-text="name" />
</div>
</div>
</div>
</div>
</div>
</div>
@ -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,29 +170,29 @@ export default {
width: 100%;
height: 100%;
position: relative;
}
.head {
width: 100%;
height: 2.5em;
background: rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.05);
.head {
width: 100%;
height: 2.5em;
background: rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.05);
.host-selector,
.settings {
padding: 0.5em;
}
.host-selector,
.settings {
padding: 0.5em;
}
.host-selector {
width: 80%;
}
.host-selector {
width: 80%;
}
.settings {
width: 20%;
text-align: right;
.settings {
width: 20%;
text-align: right;
}
}
}
@ -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);