Support for editing actions and scripts

dependabot/npm_and_yarn/prismjs-1.21.0
Fabio Manganiello 2 years ago
parent b2cb616929
commit 7feb972715
  1. 25
      src/options/App.vue
  2. 13
      src/options/LocalCommands.vue
  3. 43
      src/options/Run.vue
  4. 12
      src/popup/App.vue
  5. 3
      src/utils.js

@ -5,8 +5,8 @@
<div class="body">
<NewHost @add="addHost" v-if="selectedTab === 'add'" />
<Config v-else-if="selectedTab === 'config'" @reload="reload" />
<LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" />
<Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" />
<LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" :bus="bus" />
<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" />
<div class="none" v-else>Select an option from the menu</div>
</div>
@ -14,6 +14,7 @@
</template>
<script>
import Vue from 'vue';
import mixins from '../utils';
import Menu from './Menu';
import NewHost from './NewHost';
@ -36,18 +37,23 @@ export default {
data() {
return {
bus: new Vue({}),
hosts: {},
selectedTab: null,
selectedHost: null,
selectedHostOption: null,
selectedAction: null,
selectedScript: null,
};
},
methods: {
select(tab, host, hostOption) {
select(tab, host, hostOption, action, script) {
this.selectedTab = tab;
this.selectedHost = host;
this.selectedHostOption = hostOption;
this.selectedAction = action;
this.selectedScript = script;
},
async reload() {
@ -119,10 +125,23 @@ export default {
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() {
this.reload();
this.initListeners();
},
};
</script>

@ -33,6 +33,9 @@
<button type="button" class="run" :disabled="loading" @click.stop="action.type === 'request' ? runAction() : _runScript()" v-if="selectedAction === name">
<i class="fas fa-play" />
</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">
<i class="fas fa-trash" />
</button>
@ -88,6 +91,7 @@ export default {
components: { PrismEditor },
props: {
host: String,
bus: Object,
},
data() {
@ -162,6 +166,14 @@ export default {
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() {
if (!this.selectedAction || !(this.selectedAction in this.actions_) || !confirm('Are you sure that you want to remove this action from this device?')) {
return;
@ -285,6 +297,7 @@ form {
}
.icon {
width: 1em;
font-size: 1.2em;
margin-right: 1.5em;
}

@ -22,7 +22,15 @@
<form ref="runForm" @submit.prevent="runAction">
<div class="row action-head">
<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 class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
</div>
@ -100,6 +108,7 @@
:autocomplete-items="categoriesAutocomplete"
:disabled="loading"
:separators="[',', ';']"
:tags="selectedCategories.map(cat => (typeof cat === 'object' ? cat : { text: cat }))"
@tags-changed="tags => (selectedCategories = tags)"
placeholder="Categories"
/>
@ -114,7 +123,7 @@
Install script on these devices
</div>
<MultipleHostSelector :hosts="hosts" :selected="[host.name]" />
<MultipleHostSelector :hosts="hosts" :selected="selectedHosts && selectedHosts.length ? selectedHosts : [host.name]" />
</div>
<div class="row buttons">
@ -143,6 +152,8 @@ export default {
mixins: [mixins],
props: {
host: Object,
selectedAction: Object,
selectedScript: Object,
scriptTemplate: {
type: String,
default: `async (app, host, browser, tab, target, ...args) => {
@ -178,6 +189,7 @@ export default {
storedActions: {},
selectedCategory: '',
selectedCategories: [],
selectedHosts: null,
actionMode: 'request',
action: {
name: null,
@ -429,6 +441,32 @@ export default {
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() {
@ -436,6 +474,7 @@ export default {
this.loadHosts();
this.loadPlugins();
this.loadActions();
this.initAction();
},
};
</script>

@ -1,6 +1,6 @@
<template>
<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
<a href="/options/options.html" target="_blank">here</a> to configure the extension.
</div>
@ -13,7 +13,7 @@
<option v-for="(host, name) in hosts" :selected="selectedHost === name" :key="name" :value="name">{{ name }}</option>
</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 class="settings">
@ -74,6 +74,10 @@ export default {
},
actionsByHost() {
if (!this.actions_ || !this.scripts_) {
return {};
}
return Object.entries({ ...(this.actions_ || {}), ...(this.scripts_ || {}) }).reduce((obj, [name, action]) => {
const hosts = action.hosts || [];
for (const host of hosts) {
@ -122,8 +126,8 @@ export default {
methods: {
async loadHosts() {
this.hosts = await this.getHosts();
if (!this.selectedHost) {
this.selectedHost = Object.entries(this.hosts)[0][0];
if (!this.selectedHost && this.hosts && Object.keys(this.hosts).length) {
this.selectedHost = Object.keys(this.hosts)[0];
}
},

@ -1,5 +1,6 @@
import axios from 'axios';
import Mercury from '@postlight/mercury-parser';
import Vue from 'vue';
export default {
data() {
@ -322,4 +323,6 @@ export default {
},
};
export const bus = new Vue();
// vim:sw=2:ts=2:et:

Loading…
Cancel
Save