Support for editing actions and scripts
This commit is contained in:
parent
b2cb616929
commit
7feb972715
5 changed files with 87 additions and 9 deletions
src
|
@ -5,8 +5,8 @@
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<NewHost @add="addHost" v-if="selectedTab === 'add'" />
|
<NewHost @add="addHost" v-if="selectedTab === 'add'" />
|
||||||
<Config v-else-if="selectedTab === 'config'" @reload="reload" />
|
<Config v-else-if="selectedTab === 'config'" @reload="reload" />
|
||||||
<LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" />
|
<LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" :bus="bus" />
|
||||||
<Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" />
|
<Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" :selectedAction="selectedAction" :selectedScript="selectedScript" />
|
||||||
<EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedHost" />
|
<EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedHost" />
|
||||||
<div class="none" v-else>Select an option from the menu</div>
|
<div class="none" v-else>Select an option from the menu</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,6 +14,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from 'vue';
|
||||||
import mixins from '../utils';
|
import mixins from '../utils';
|
||||||
import Menu from './Menu';
|
import Menu from './Menu';
|
||||||
import NewHost from './NewHost';
|
import NewHost from './NewHost';
|
||||||
|
@ -36,18 +37,23 @@ export default {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
bus: new Vue({}),
|
||||||
hosts: {},
|
hosts: {},
|
||||||
selectedTab: null,
|
selectedTab: null,
|
||||||
selectedHost: null,
|
selectedHost: null,
|
||||||
selectedHostOption: null,
|
selectedHostOption: null,
|
||||||
|
selectedAction: null,
|
||||||
|
selectedScript: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
select(tab, host, hostOption) {
|
select(tab, host, hostOption, action, script) {
|
||||||
this.selectedTab = tab;
|
this.selectedTab = tab;
|
||||||
this.selectedHost = host;
|
this.selectedHost = host;
|
||||||
this.selectedHostOption = hostOption;
|
this.selectedHostOption = hostOption;
|
||||||
|
this.selectedAction = action;
|
||||||
|
this.selectedScript = script;
|
||||||
},
|
},
|
||||||
|
|
||||||
async reload() {
|
async reload() {
|
||||||
|
@ -119,10 +125,23 @@ export default {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
initListeners() {
|
||||||
|
const self = this;
|
||||||
|
|
||||||
|
this.bus.$on('edit-action', action => {
|
||||||
|
self.select('host', this.selectedHost, 'run', action, null);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.bus.$on('edit-script', script => {
|
||||||
|
self.select('host', this.selectedHost, 'run', null, script);
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.reload();
|
this.reload();
|
||||||
|
this.initListeners();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -33,6 +33,9 @@
|
||||||
<button type="button" class="run" :disabled="loading" @click.stop="action.type === 'request' ? runAction() : _runScript()" v-if="selectedAction === name">
|
<button type="button" class="run" :disabled="loading" @click.stop="action.type === 'request' ? runAction() : _runScript()" v-if="selectedAction === name">
|
||||||
<i class="fas fa-play" />
|
<i class="fas fa-play" />
|
||||||
</button>
|
</button>
|
||||||
|
<button type="button" class="edit" :disabled="loading" @click.stop="action.type === 'request' ? editAction() : editScript()" v-if="selectedAction === name">
|
||||||
|
<i class="fas fa-pen" />
|
||||||
|
</button>
|
||||||
<button type="button" class="remove" :disabled="loading" @click.stop="action.type === 'request' ? removeAction() : removeScript()" v-if="selectedAction === name">
|
<button type="button" class="remove" :disabled="loading" @click.stop="action.type === 'request' ? removeAction() : removeScript()" v-if="selectedAction === name">
|
||||||
<i class="fas fa-trash" />
|
<i class="fas fa-trash" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -88,6 +91,7 @@ export default {
|
||||||
components: { PrismEditor },
|
components: { PrismEditor },
|
||||||
props: {
|
props: {
|
||||||
host: String,
|
host: String,
|
||||||
|
bus: Object,
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
@ -162,6 +166,14 @@ export default {
|
||||||
this.hosts = await this.getHosts();
|
this.hosts = await this.getHosts();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
editAction() {
|
||||||
|
this.bus.$emit('edit-action', this.actions_[this.selectedAction]);
|
||||||
|
},
|
||||||
|
|
||||||
|
editScript() {
|
||||||
|
this.bus.$emit('edit-script', this.scripts[this.selectedAction]);
|
||||||
|
},
|
||||||
|
|
||||||
async removeAction() {
|
async removeAction() {
|
||||||
if (!this.selectedAction || !(this.selectedAction in this.actions_) || !confirm('Are you sure that you want to remove this action from this device?')) {
|
if (!this.selectedAction || !(this.selectedAction in this.actions_) || !confirm('Are you sure that you want to remove this action from this device?')) {
|
||||||
return;
|
return;
|
||||||
|
@ -285,6 +297,7 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
width: 1em;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
margin-right: 1.5em;
|
margin-right: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,15 @@
|
||||||
<form ref="runForm" @submit.prevent="runAction">
|
<form ref="runForm" @submit.prevent="runAction">
|
||||||
<div class="row action-head">
|
<div class="row action-head">
|
||||||
<div class="action-name">
|
<div class="action-name">
|
||||||
<Autocomplete :source="actionsAutocomplete" :disableInput="loading" :name="action.name || ''" placeholder="Action" @input="onActionChange" />
|
<Autocomplete
|
||||||
|
placeholder="Action"
|
||||||
|
:source="actionsAutocomplete"
|
||||||
|
:disableInput="loading"
|
||||||
|
:name="action.name || ''"
|
||||||
|
:initialValue="selectedAction ? selectedAction.name : null"
|
||||||
|
:initialDisplay="selectedAction ? selectedAction.name : null"
|
||||||
|
@input="onActionChange"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
|
<div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -100,6 +108,7 @@
|
||||||
:autocomplete-items="categoriesAutocomplete"
|
:autocomplete-items="categoriesAutocomplete"
|
||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
:separators="[',', ';']"
|
:separators="[',', ';']"
|
||||||
|
:tags="selectedCategories.map(cat => (typeof cat === 'object' ? cat : { text: cat }))"
|
||||||
@tags-changed="tags => (selectedCategories = tags)"
|
@tags-changed="tags => (selectedCategories = tags)"
|
||||||
placeholder="Categories"
|
placeholder="Categories"
|
||||||
/>
|
/>
|
||||||
|
@ -114,7 +123,7 @@
|
||||||
Install script on these devices
|
Install script on these devices
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<MultipleHostSelector :hosts="hosts" :selected="[host.name]" />
|
<MultipleHostSelector :hosts="hosts" :selected="selectedHosts && selectedHosts.length ? selectedHosts : [host.name]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row buttons">
|
<div class="row buttons">
|
||||||
|
@ -143,6 +152,8 @@ export default {
|
||||||
mixins: [mixins],
|
mixins: [mixins],
|
||||||
props: {
|
props: {
|
||||||
host: Object,
|
host: Object,
|
||||||
|
selectedAction: Object,
|
||||||
|
selectedScript: Object,
|
||||||
scriptTemplate: {
|
scriptTemplate: {
|
||||||
type: String,
|
type: String,
|
||||||
default: `async (app, host, browser, tab, target, ...args) => {
|
default: `async (app, host, browser, tab, target, ...args) => {
|
||||||
|
@ -178,6 +189,7 @@ export default {
|
||||||
storedActions: {},
|
storedActions: {},
|
||||||
selectedCategory: '',
|
selectedCategory: '',
|
||||||
selectedCategories: [],
|
selectedCategories: [],
|
||||||
|
selectedHosts: null,
|
||||||
actionMode: 'request',
|
actionMode: 'request',
|
||||||
action: {
|
action: {
|
||||||
name: null,
|
name: null,
|
||||||
|
@ -429,6 +441,32 @@ export default {
|
||||||
this.action.defaultArgs = {};
|
this.action.defaultArgs = {};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
initAction() {
|
||||||
|
const action = this.selectedAction || this.selectedScript;
|
||||||
|
if (!action) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.saveMode = true;
|
||||||
|
this.saveParams.name = action.displayName;
|
||||||
|
this.saveParams.color = action.color;
|
||||||
|
this.saveParams.iconClass = action.iconClass;
|
||||||
|
this.selectedCategories = action.categories;
|
||||||
|
this.selectedHosts = action.hosts;
|
||||||
|
|
||||||
|
if (this.selectedAction) {
|
||||||
|
this.actionMode = 'request';
|
||||||
|
this.action.name = action.name;
|
||||||
|
this.action.defaultArgs = Object.entries(action.args).reduce((obj, [name, value]) => {
|
||||||
|
obj[name] = { value: value };
|
||||||
|
return obj;
|
||||||
|
}, {});
|
||||||
|
} else {
|
||||||
|
this.actionMode = 'script';
|
||||||
|
this.script = action.script.toString();
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
|
@ -436,6 +474,7 @@ export default {
|
||||||
this.loadHosts();
|
this.loadHosts();
|
||||||
this.loadPlugins();
|
this.loadPlugins();
|
||||||
this.loadActions();
|
this.loadActions();
|
||||||
|
this.initAction();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="no-hosts" v-if="!hosts">
|
<div class="no-hosts" v-if="!(hosts && Object.keys(hosts).length)">
|
||||||
No devices found. Click
|
No devices found. Click
|
||||||
<a href="/options/options.html" target="_blank">here</a> to configure the extension.
|
<a href="/options/options.html" target="_blank">here</a> to configure the extension.
|
||||||
</div>
|
</div>
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
<option v-for="(host, name) in hosts" :selected="selectedHost === name" :key="name" :value="name">{{ name }}</option>
|
<option v-for="(host, name) in hosts" :selected="selectedHost === name" :key="name" :value="name">{{ name }}</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<span class="host" v-text="Object.entries(hosts)[0][0]" v-else />
|
<span class="host" v-text="Object.keys(hosts)[0]" v-else />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="settings">
|
<div class="settings">
|
||||||
|
@ -74,6 +74,10 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
actionsByHost() {
|
actionsByHost() {
|
||||||
|
if (!this.actions_ || !this.scripts_) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
return Object.entries({ ...(this.actions_ || {}), ...(this.scripts_ || {}) }).reduce((obj, [name, action]) => {
|
return Object.entries({ ...(this.actions_ || {}), ...(this.scripts_ || {}) }).reduce((obj, [name, action]) => {
|
||||||
const hosts = action.hosts || [];
|
const hosts = action.hosts || [];
|
||||||
for (const host of hosts) {
|
for (const host of hosts) {
|
||||||
|
@ -122,8 +126,8 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
async loadHosts() {
|
async loadHosts() {
|
||||||
this.hosts = await this.getHosts();
|
this.hosts = await this.getHosts();
|
||||||
if (!this.selectedHost) {
|
if (!this.selectedHost && this.hosts && Object.keys(this.hosts).length) {
|
||||||
this.selectedHost = Object.entries(this.hosts)[0][0];
|
this.selectedHost = Object.keys(this.hosts)[0];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import Mercury from '@postlight/mercury-parser';
|
import Mercury from '@postlight/mercury-parser';
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -322,4 +323,6 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const bus = new Vue();
|
||||||
|
|
||||||
// vim:sw=2:ts=2:et:
|
// vim:sw=2:ts=2:et:
|
||||||
|
|
Loading…
Reference in a new issue