WIP

src/options/App.vue

@@ -6,7 +6,6 @@
       <NewHost @add="addHost" v-if="selectedTab === 'add'" />
       <Config v-else-if="selectedTab === 'config'" @reload="reload" />
       <LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" />
-      <RemoteCommands v-else-if="selectedHost && selectedHostOption === 'remoteProc'" />
       <Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" />
       <EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedHost" />
       <div class="none" v-else>Select an option from the menu</div>
@@ -20,7 +19,6 @@ import Menu from './Menu';
 import NewHost from './NewHost';
 import EditHost from './EditHost';
 import LocalCommands from './LocalCommands';
-import RemoteCommands from './RemoteCommands';
 import Config from './Config';
 import Run from './Run';
 
@@ -32,7 +30,6 @@ export default {
     NewHost,
     EditHost,
     LocalCommands,
-    RemoteCommands,
     Config,
     Run,
   },

src/options/Menu.vue

@@ -39,13 +39,9 @@ export default {
     hostOptions() {
       return {
         localProc: {
-          displayName: 'Local Actions',
+          displayName: 'Stored Actions',
           iconClass: 'fas fa-puzzle-piece',
         },
-        remoteProc: {
-          displayName: 'Remote Procedures',
-          iconClass: 'fas fa-database',
-        },
         run: {
           displayName: 'Run Action',
           iconClass: 'fas fa-play',

src/options/RemoteCommands.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="page remote-procedures">
-    <h2>Procedures stored on the server</h2>
-  </div>
-</template>
-
-<script>
-import mixins from '../utils';
-
-export default {
-  name: 'RemoteCommands',
-  mixins: [mixins],
-};
-</script>
-
-<!-- vim:sw=2:ts=2:et: -->

src/options/Run.vue

@@ -2,9 +2,21 @@
   <div class="page run">
     <h2>Run a command on {{ host.name }}</h2>
 
+    <div class="mode-selector">
+      Action mode
+
+      <div class="buttons">
+        <input type="radio" value="request" id="_request" v-model="actionMode" />
+        <label for="_request"> &nbsp; Request</label>
+        <input type="radio" value="script" id="_script" v-model="actionMode" />
+        <label for="_script"> &nbsp; Script</label>
+      </div>
+    </div>
+
+    <div v-if="actionMode === 'request'">
       <div class="help">
         &nbsp; <a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the current
-      URL.
+        URL. You can also call remotely stored procedure through <tt>procedure.&lt;procedure_name&gt;</tt>.
       </div>
 
       <form ref="runForm" @submit.prevent="runAction">
@@ -56,8 +68,22 @@
           </button>
         </div>
       </form>
+    </div>
 
-    <form class="save-form" ref="saveForm" @submit.prevent="storeAction" v-if="saveMode">
+    <div v-else>
+      <form ref="runForm" @submit.prevent="runScript">
+        <textarea v-model="script" />
+
+        <div class="row buttons">
+          <button type="button" @click="saveMode = true" :disabled="loading || !(action.name && action.name.length && action.name in actions)" v-if="!saveMode">
+            <i class="fas fa-save" /> &nbsp; Save Action
+          </button>
+          <button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button>
+        </div>
+      </form>
+    </div>
+
+    <form class="save-form" ref="scriptForm" @submit.prevent="storeAction" v-if="saveMode">
       <div class="row">
         <input type="text" name="displayName" placeholder="Action display name" />
       </div>
@@ -106,12 +132,18 @@ export default {
     return {
       plugins: {},
       pluginsLoading: false,
+      procedures: {},
       saveMode: false,
       actionResponse: null,
       actionError: null,
       hosts: {},
+      script: `(browser, window, document) => {
+  // Do something
+}`,
+      actionMode: 'request',
       action: {
         name: null,
+        script: null,
         args: [],
       },
     };
@@ -119,12 +151,26 @@ export default {
 
   computed: {
     actions() {
-      return Object.values(this.plugins).reduce((obj, plugin) => {
+      let plugins = {};
+      let procedures = {};
+
+      if (this.plugins) {
+        plugins = Object.values(this.plugins).reduce((obj, plugin) => {
           return Object.values(plugin.actions).reduce((obj, action) => {
             obj[plugin.name + '.' + action.name] = action;
             return obj;
           }, obj);
         }, {});
+      }
+
+      if (this.procedures) {
+        procedures = Object.entries(this.procedures).reduce((obj, [name, args]) => {
+          obj['procedure.' + name] = args;
+          return obj;
+        }, {});
+      }
+
+      return { ...plugins, ...procedures };
     },
 
     filteredActions() {
@@ -183,6 +229,11 @@ export default {
       }
     },
 
+    async runScript() {
+      this.loading = true;
+      console.log(this.script);
+    },
+
     addActionArgument() {
       this.action.args.push({
         name: '',
@@ -203,11 +254,40 @@ export default {
           },
           this.host
         );
+
+        this.procedures = await this.run({ name: 'inspect.get_procedures' }, this.host);
       } finally {
         this.pluginsLoading = false;
       }
     },
 
+    async storeScript(event) {
+      const saveForm = event.target;
+      const displayName = saveForm.displayName.value.trim();
+      const iconClass = saveForm.iconClass.value.trim();
+      const hosts = [...saveForm.querySelectorAll('input[data-type="host"]:checked')].map(el => el.value);
+
+      if (!displayName.length) {
+        this.notify('Please specify an action name', 'No action name provided');
+        return;
+      }
+
+      if (!hosts.length) {
+        this.notify('Please specify at least one device where the action should run', 'No devices provided');
+        return;
+      }
+
+      const script = {
+        type: this.actionMode,
+        displayName: displayName,
+        iconClass: iconClass,
+        hosts: hosts,
+        script: this.script,
+      };
+
+      console.log(script);
+    },
+
     async storeAction(event) {
       const saveForm = event.target;
       const displayName = saveForm.displayName.value.trim();
@@ -225,11 +305,12 @@ export default {
       }
 
       const action = {
+        type: this.actionMode,
         displayName: displayName,
         iconClass: iconClass,
+        hosts: hosts,
         name: this.action.name,
         args: this.getActionArgs(),
-        hosts: hosts,
       };
 
       await this.saveAction(action);
@@ -254,6 +335,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.mode-selector {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 1em 0;
+
+  .buttons {
+    display: flex;
+    align-items: center;
+    margin-left: 1em;
+
+    input[type='radio'] {
+      margin-left: 1em;
+    }
+  }
+}
+
 .help {
   margin-bottom: 1em;
 }

src/utils.js

@@ -19,7 +19,7 @@ export default {
     async run(action, host) {
       const url = (host.ssl ? 'https' : 'http') + '://' + host.address + ':' + host.port + '/execute';
       const config = {};
-      let args = action.args;
+      let args = action.args || {};
       if (Array.isArray(action.args)) {
         args = action.args
           .filter(arg => arg.value && arg.value.length)