Added support for categories
This commit is contained in:
Fabio Manganiello
parent
9218c67b54
commit
9310056af0
7 changed files with 336 additions and 322 deletions
13
package-lock.json
generated
13
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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: -->
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue