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,62 +2,88 @@
   <div class="page run">
     <h2>Run a command on {{ host.name }}</h2>
 
-    <div class="help">
+    <div class="mode-selector">
-      &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
+      Action mode
-      URL.
+
+      <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>
 
-    <form ref="runForm" @submit.prevent="runAction">
+    <div v-if="actionMode === 'request'">
-      <div class="row action-head">
+      <div class="help">
-        <div class="action-name">
+        &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
-          <Autocomplete :items="Object.keys(actions)" :value="action.name" :disabled="loading" placeholder="Action" @change="onActionChange" />
+        URL. You can also call remotely stored procedure through <tt>procedure.&lt;procedure_name&gt;</tt>.
-        </div>
-        <div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
       </div>
 
-      <div class="row" v-for="(arg, name) in actionTemplate.args" :key="name">
+      <form ref="runForm" @submit.prevent="runAction">
-        <div class="label">
+        <div class="row action-head">
-          <input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled />
+          <div class="action-name">
+            <Autocomplete :items="Object.keys(actions)" :value="action.name" :disabled="loading" placeholder="Action" @change="onActionChange" />
+          </div>
+          <div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
         </div>
-        <div class="value">
-          <input
-            type="text"
-            :name="name"
-            :value="arg.default"
-            data-type="arg"
-            :placeholder="arg.doc && arg.doc.length ? arg.doc : 'Value'"
-            autocomplete="off"
-            :disabled="loading"
-          />
-        </div>
-      </div>
 
-      <div class="row" v-for="(arg, i) in action.args" :key="i">
+        <div class="row" v-for="(arg, name) in actionTemplate.args" :key="name">
-        <div class="label">
+          <div class="label">
-          <input type="text" :name="'arg_' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
+            <input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled />
+          </div>
+          <div class="value">
+            <input
+              type="text"
+              :name="name"
+              :value="arg.default"
+              data-type="arg"
+              :placeholder="arg.doc && arg.doc.length ? arg.doc : 'Value'"
+              autocomplete="off"
+              :disabled="loading"
+            />
+          </div>
         </div>
-        <div class="value">
+
-          <input type="text" :name="arg.name" v-model="arg.value" data-type="arg" placeholder="Value" autocomplete="off" :disabled="loading" />
+        <div class="row" v-for="(arg, i) in action.args" :key="i">
-          <button type="button" @click="action.args.splice(i, 1)" :disabled="loading">
+          <div class="label">
-            <i class="fas fa-trash" />
+            <input type="text" :name="'arg_' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
+          </div>
+          <div class="value">
+            <input type="text" :name="arg.name" v-model="arg.value" data-type="arg" placeholder="Value" autocomplete="off" :disabled="loading" />
+            <button type="button" @click="action.args.splice(i, 1)" :disabled="loading">
+              <i class="fas fa-trash" />
+            </button>
+          </div>
+        </div>
+
+        <div class="row buttons">
+          <button type="button" @click="addActionArgument" :disabled="loading"><i class="fas fa-plus" /> &nbsp; Add Argument</button>
+          <button type="button" @click="clearAction" :disabled="loading"><i class="fas fa-times" /> &nbsp; Clear Form</button>
+          <button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button>
+        </div>
+
+        <div class="row buttons" v-if="!saveMode">
+          <button type="button" @click="saveMode = true" :disabled="loading || !(action.name && action.name.length && action.name in actions)">
+            <i class="fas fa-save" /> &nbsp; Save Action
           </button>
         </div>
-      </div>
+      </form>
+    </div>
 
-      <div class="row buttons">
+    <div v-else>
-        <button type="button" @click="addActionArgument" :disabled="loading"><i class="fas fa-plus" /> &nbsp; Add Argument</button>
+      <form ref="runForm" @submit.prevent="runScript">
-        <button type="button" @click="clearAction" :disabled="loading"><i class="fas fa-times" /> &nbsp; Clear Form</button>
+        <textarea v-model="script" />
-        <button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button>
-      </div>
 
-      <div class="row buttons" v-if="!saveMode">
+        <div class="row buttons">
-        <button type="button" @click="saveMode = true" :disabled="loading || !(action.name && action.name.length && action.name in actions)">
+          <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
+            <i class="fas fa-save" /> &nbsp; Save Action
-        </button>
+          </button>
-      </div>
+          <button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button>
-    </form>
+        </div>
+      </form>
+    </div>
 
-    <form class="save-form" ref="saveForm" @submit.prevent="storeAction" v-if="saveMode">
+    <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 = {};
-        return Object.values(plugin.actions).reduce((obj, action) => {
+      let procedures = {};
-          obj[plugin.name + '.' + action.name] = action;
+
+      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;
-        }, 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)