Support for remote conf

src/options/App.vue

@@ -4,11 +4,11 @@
 
     <div class="body">
       <NewHost @add="addHost" v-if="selectedTab === 'add'" />
-      <Config v-else-if="selectedTab === 'config'" />
+      <Config v-else-if="selectedTab === 'config'" @reload="reload" />
-      <LocalCommands v-else-if="selectedTab === 'host' && selectedHostOption === 'localProc'" />
+      <LocalCommands v-else-if="selectedHost && selectedHostOption === 'localProc'" />
-      <RemoteCommands v-else-if="selectedTab === 'host' && selectedHostOption === 'remoteProc'" />
+      <RemoteCommands v-else-if="selectedHost && selectedHostOption === 'remoteProc'" />
-      <Run :host="hosts[selectedHost]" v-else-if="selectedTab === 'host' && selectedHostOption === 'run'" />
+      <Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" />
-      <EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedTab === 'host'" />
+      <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>
   </div>
@@ -53,6 +53,10 @@ export default {
       this.selectedHostOption = hostOption;
     },
 
+    async reload() {
+      this.hosts = await this.getHosts();
+    },
+
     async addHost(form) {
       if (!this.isHostFormValid(form)) {
         this.notify('Invalid device parameter values', 'Device configuration error');
@@ -71,8 +75,8 @@ export default {
 
         this.hosts[host.name] = host;
         await this.saveHosts(this.hosts);
-        this.selectedHost = Object.keys(this.hosts)[Object.keys(this.hosts).length - 1];
+        await this.reload();
-        this.isAddHost = false;
+        this.select('host', Object.keys(this.hosts)[Object.keys(this.hosts).length - 1]);
       } finally {
         this.loading = false;
       }
@@ -104,14 +108,16 @@ export default {
 
       try {
         const i = this.selectedHost;
-        if (Object.keys(this.hosts).length <= 1) {
+        delete this.hosts[i];
+        await this.saveHosts(this.hosts);
+
+        if (!Object.keys(this.hosts).length) {
           this.selectedHost = null;
         } else {
           this.selectedHost = Object.keys(this.hosts)[0];
         }
 
-        delete this.hosts[i];
+        await this.reload();
-        await this.saveHosts(this.hosts);
       } finally {
         this.loading = false;
       }
@@ -119,10 +125,7 @@ export default {
   },
 
   created() {
-    const self = this;
+    this.reload();
-    this.getHosts().then(hosts => {
-      self.hosts = hosts;
-    });
   },
 };
 </script>

src/options/Config.vue

@@ -21,7 +21,7 @@
 
       <form class="content" ref="content" @submit.prevent="save">
         <div class="textarea">
-          <textarea ref="text" v-model="config" v-text="loading ? 'Loading...' : config" @focus="onFocus" :disabled="loading" />
+          <textarea name="text" ref="text" v-model="config" v-text="loading ? 'Loading...' : config" @focus="onFocus" :disabled="loading" />
         </div>
 
         <div class="buttons">
@@ -34,11 +34,13 @@
 </template>
 
 <script>
+import axios from 'axios';
 import mixins from '../utils';
 
 export default {
   name: 'Backup',
   mixins: [mixins],
+
   data() {
     return {
       config: null,
@@ -62,7 +64,21 @@ export default {
       this.savedConfig = this.config;
     },
 
-    save(event) {},
+    async save(event) {
+      this.loading = true;
+
+      try {
+        const config = JSON.parse(event.target.text.value);
+        await this.saveConfig(config);
+        await this.reload();
+        this.$emit('reload');
+      } catch (e) {
+        console.warn(e);
+        this.notify(e.message, 'Could not save the configuration');
+      } finally {
+        this.loading = false;
+      }
+    },
 
     uploadFile(event) {
       if (!(event.target.files && event.target.files.length)) {
@@ -86,8 +102,19 @@ export default {
       reader.readAsText(event.target.files[0]);
     },
 
-    loadURL(event) {
+    async loadURL(event) {
-      console.log(event);
+      const url = event.target.url.value.trim();
+      this.loading = true;
+
+      try {
+        const response = await axios.get(url);
+        this.config = JSON.stringify(response.data, null, '  ');
+      } catch (e) {
+        console.warn(e);
+        this.notify(e.message, 'Unable to parse the URL');
+      } finally {
+        this.loading = false;
+      }
     },
   },
 

src/utils.js

@@ -141,6 +141,18 @@ export default {
       }
     },
 
+    async saveConfig(config) {
+      this.loading = true;
+      const hosts = config.hosts || {};
+      const actions = config.actions || {};
+
+      try {
+        await Promise.all([this.saveHosts(hosts), this.saveActions(actions)]);
+      } finally {
+        this.loading = false;
+      }
+    },
+
     formToHost(form) {
       return {
         name: form.name.value,