Refactored hosts/actions

src/options/App.vue

@@ -18,10 +18,10 @@
       <NewHost @add="addHost" v-if="isAddHost" />
       <Backup v-else-if="isBackupMode" />
       <Restore v-else-if="isRestoreMode" />
-      <LocalCommands v-else-if="selectedHost >= 0 && selectedHostOption === 'localProc'" />
+      <LocalCommands v-else-if="selectedHost && selectedHostOption === 'localProc'" />
-      <RemoteCommands v-else-if="selectedHost >= 0 && selectedHostOption === 'remoteProc'" />
+      <RemoteCommands v-else-if="selectedHost && selectedHostOption === 'remoteProc'" />
-      <Run :host="hosts[selectedHost]" v-else-if="selectedHost >= 0 && selectedHostOption === 'run'" />
+      <Run :host="hosts[selectedHost]" v-else-if="selectedHost && selectedHostOption === 'run'" />
-      <EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedHost >= 0" />
+      <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>
@@ -54,7 +54,8 @@ export default {
 
   data() {
     return {
-      selectedHost: -1,
+      hosts: {},
+      selectedHost: null,
       selectedHostOption: null,
       isAddHost: false,
       isBackupMode: false,
@@ -67,6 +68,8 @@ export default {
       this.selectedHost = i;
       this.selectedHostOption = null;
       this.isAddHost = false;
+      this.isBackupMode = false;
+      this.isRestoreMode = false;
     },
 
     selectHostOption(option) {
@@ -74,19 +77,21 @@ export default {
     },
 
     selectAddHost() {
-      this.selectedHost = -1;
+      this.selectedHost = null;
       this.isAddHost = true;
       this.isBackupMode = false;
       this.isRestoreMode = false;
     },
 
     selectBackupMode() {
+      this.selectedHost = null;
       this.isAddHost = false;
       this.isBackupMode = true;
       this.isRestoreMode = false;
     },
 
     selectRestoreMode() {
+      this.selectedHost = null;
       this.isAddHost = false;
       this.isBackupMode = false;
       this.isRestoreMode = true;
@@ -102,15 +107,15 @@ export default {
 
       try {
         const host = this.formToHost(form);
-        const dupHosts = this.hosts.filter(h => h.name === host.name || (h.address === host.address && h.port === host.port));
+        const dupHosts = Object.values(this.hosts).filter(h => h.name === host.name || (h.address === host.address && h.port === host.port));
         if (dupHosts.length) {
           this.notify('This device is already defined', 'Duplicate device');
           return;
         }
 
-        this.hosts.push(host);
+        this.hosts[host.name] = host;
         await this.saveHosts(this.hosts);
-        this.selectedHost = this.hosts.length - 1;
+        this.selectedHost = Object.keys(this.hosts)[Object.keys(this.hosts).length - 1];
         this.isAddHost = false;
       } finally {
         this.loading = false;
@@ -127,7 +132,7 @@ export default {
 
       try {
         this.hosts[this.selectedHost] = this.formToHost(form);
-        await this.saveHosts();
+        await this.saveHosts(this.hosts);
       } finally {
         this.loading = false;
       }
@@ -143,16 +148,14 @@ export default {
 
       try {
         const i = this.selectedHost;
-        if (this.hosts.length <= 1) {
+        if (Object.keys(this.hosts).length <= 1) {
-          this.selectedHost = -1;
+          this.selectedHost = null;
-        } else if (i > 0) {
-          this.selectedHost = i - 1;
         } else {
-          this.selectedHost = 0;
+          this.selectedHost = Object.keys(this.hosts)[0];
         }
 
-        this.hosts.splice(i, 1);
+        delete this.hosts[i];
-        await this.saveHosts();
+        await this.saveHosts(this.hosts);
       } finally {
         this.loading = false;
       }
@@ -161,7 +164,7 @@ export default {
 
   created() {
     const self = this;
-    this.loadHosts().then(hosts => {
+    this.getHosts().then(hosts => {
       self.hosts = hosts;
     });
   },

src/options/Menu.vue

@@ -1,8 +1,8 @@
 <template>
   <ul class="menu">
-    <li class="host" v-for="(host, i) in hosts" :key="i" :class="{ selected: i === selectedHost }" @click="$emit('select-host', i)">
+    <li class="host" v-for="(host, hostname) in hosts" :key="hostname" :class="{ selected: hostname === selectedHost }" @click="$emit('select-host', hostname)">
       <i class="fas fa-hdd" /> &nbsp; {{ host.name }}
-      <ul class="host-menu" v-if="i === selectedHost">
+      <ul class="host-menu" v-if="hostname === selectedHost">
         <li v-for="(option, name) in hostOptions" :key="name" :class="{ selected: selectedHostOption === name }" @click.stop="$emit('select-host-option', name)">
           <i :class="option.iconClass" /> &nbsp; {{ option.displayName }}
         </li>
@@ -19,8 +19,8 @@
 export default {
   name: 'Menu',
   props: {
-    hosts: Array,
+    hosts: Object,
-    selectedHost: Number,
+    selectedHost: String,
     selectedHostOption: String,
     isAddHost: Boolean,
     isBackupMode: Boolean,

src/options/Run.vue

@@ -126,7 +126,7 @@ export default {
 
     actionTemplate() {
       if (!(this.action.name in this.actions)) {
-        return { args: [] };
+        return { args: {} };
       }
 
       return this.actions[this.action.name];
@@ -142,11 +142,9 @@ export default {
     },
 
     getActionArgs() {
-      return [...this.$refs.runForm.querySelectorAll('[data-type="arg"]')].map(el => {
+      return [...this.$refs.runForm.querySelectorAll('[data-type="arg"]')].reduce((obj, el) => {
-        return {
+        obj[el.name] = el.value;
-          name: el.name,
+        return obj;
-          value: el.value,
-        };
       }, {});
     },
 

src/utils.js

@@ -4,7 +4,6 @@ export default {
   data() {
     return {
       loading: false,
-      hosts: [],
     };
   },
 
@@ -66,11 +65,15 @@ export default {
       }
     },
 
-    async loadHosts() {
+    async getHosts() {
       this.loading = true;
 
       try {
         const response = await browser.storage.local.get('hosts');
+        if (!response.hosts) {
+          return {};
+        }
+
         return JSON.parse(response.hosts);
       } finally {
         this.loading = false;
@@ -86,19 +89,33 @@ export default {
       }
     },
 
-    async loadActions() {
+    async getActions() {
       this.loading = true;
 
       try {
         const response = await browser.storage.local.get('actions');
+        if (!response.actions) {
+          return {};
+        }
+
         return JSON.parse(response.actions);
       } finally {
         this.loading = false;
       }
     },
 
+    async saveActions(actions) {
+      this.loading = true;
+
+      try {
+        await browser.storage.local.set({ actions: JSON.stringify(actions) });
+      } finally {
+        this.loading = false;
+      }
+    },
+
     async saveAction(action) {
-      const actions = await this.loadActions();
+      const actions = await this.getActions();
       if (action.displayName in actions) {
         if (!confirm('An action with this name already exists. Do you want to overwrite it?')) {
           return;
@@ -106,18 +123,12 @@ export default {
       }
 
       actions[action.displayName] = action;
-      this.loading = true;
+      await this.saveActions(actions);
-
+      this.notify('You can find this action under the Local Actions menu', 'Action saved');
-      try {
-        await browser.storage.local.set({ actions: JSON.stringify(actions) });
-        this.notify('You can find this action under the Local Actions menu', 'Action saved');
-      } finally {
-        this.loading = false;
-      }
     },
 
     async loadConfig() {
-      const [hosts, actions] = await Promise.all([this.loadHosts(), this.loadActions()]);
+      const [hosts, actions] = await Promise.all([this.getHosts(), this.getActions()]);
       return {
         hosts: hosts,
         actions: actions,