More stuff added

src/manifest.json

@@ -9,7 +9,7 @@
     "48": "icons/icon-48.png",
     "64": "icons/icon-64.png"
   },
-  "permissions": ["activeTab", "storage", "notifications", "<all_urls>"],
+  "permissions": ["activeTab", "storage", "notifications", "clipboardRead", "clipboardWrite", "<all_urls>"],
 
   "browser_action": {
     "default_title": "platypush",

src/options/App.vue

@@ -1,27 +1,14 @@
 <template>
   <div class="container">
-    <Menu
-      :hosts="hosts"
-      :selectedHost="selectedHost"
-      :selectedHostOption="selectedHostOption"
-      :isAddHost="isAddHost"
-      :isBackupMode="isBackupMode"
-      :isRestoreMode="isRestoreMode"
-      @select-host="selectHost"
-      @select-host-option="selectHostOption"
-      @select-add-host="selectAddHost"
-      @select-backup-mode="selectBackupMode"
-      @select-restore-mode="selectRestoreMode"
-    />
+    <Menu :hosts="hosts" :selectedTab="selectedTab" :selectedHost="selectedHost" :selectedHostOption="selectedHostOption" @select="select" />
 
     <div class="body">
-      <NewHost @add="addHost" v-if="isAddHost" />
-      <Backup v-else-if="isBackupMode" />
-      <Restore v-else-if="isRestoreMode" />
-      <LocalCommands 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" />
+      <NewHost @add="addHost" v-if="selectedTab === 'add'" />
+      <Config v-else-if="selectedTab === 'config'" />
+      <LocalCommands v-else-if="selectedTab === 'host' && selectedHostOption === 'localProc'" />
+      <RemoteCommands v-else-if="selectedTab === 'host' && selectedHostOption === 'remoteProc'" />
+      <Run :host="hosts[selectedHost]" v-else-if="selectedTab === 'host' && selectedHostOption === 'run'" />
+      <EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedTab === 'host'" />
       <div class="none" v-else>Select an option from the menu</div>
     </div>
   </div>
@@ -34,8 +21,7 @@ import NewHost from './NewHost';
 import EditHost from './EditHost';
 import LocalCommands from './LocalCommands';
 import RemoteCommands from './RemoteCommands';
-import Backup from './Backup';
-import Restore from './Restore';
+import Config from './Config';
 import Run from './Run';
 
 export default {
@@ -47,54 +33,24 @@ export default {
     EditHost,
     LocalCommands,
     RemoteCommands,
-    Backup,
-    Restore,
+    Config,
     Run,
   },
 
   data() {
     return {
       hosts: {},
+      selectedTab: null,
       selectedHost: null,
       selectedHostOption: null,
-      isAddHost: false,
-      isBackupMode: false,
-      isRestoreMode: false,
     };
   },
 
   methods: {
-    selectHost(i) {
-      this.selectedHost = i;
-      this.selectedHostOption = null;
-      this.isAddHost = false;
-      this.isBackupMode = false;
-      this.isRestoreMode = false;
-    },
-
-    selectHostOption(option) {
-      this.selectedHostOption = option;
-    },
-
-    selectAddHost() {
-      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;
+    select(tab, host, hostOption) {
+      this.selectedTab = tab;
+      this.selectedHost = host;
+      this.selectedHostOption = hostOption;
     },
 
     async addHost(form) {

src/options/Backup.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="page backup">
-    <h2>Backup the current configuration</h2>
-
-    <div class="container">
-      <textarea v-text="loading ? 'Loading...' : config" :disabled="loading" />
-    </div>
-  </div>
-</template>
-
-<script>
-import mixins from '../utils';
-
-export default {
-  name: 'Backup',
-  mixins: [mixins],
-  data() {
-    return {
-      config: {},
-    };
-  },
-
-  created() {
-    const self = this;
-    this.loadConfig().then(config => {
-      self.config = config;
-    });
-  },
-};
-</script>
-
-<!-- vim:sw=2:ts=2:et: -->

src/options/Config.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="page backup">
+    <h2>Extension Configuration</h2>
+
+    <div class="container">
+      <form class="loader" ref="loader" @submit.prevent="loadURL">
+        <div class="head">
+          Load configuration
+          <input type="radio" id="_file" value="file" v-model="extConfigType" />
+          <label for="_file">From file</label>
+          <input type="radio" id="_url" value="url" v-model="extConfigType" />
+          <label for="_file">From URL</label>
+        </div>
+
+        <div class="body">
+          <input type="file" name="file" placeholder="Configuration file" accept="application/json, text/x-json, text/plain" @change="uploadFile" v-if="extConfigType === 'file'" />
+          <input type="text" name="url" placeholder="Configuration URL" v-model="extURL" v-if="extConfigType === 'url'" />
+          <input type="submit" value="Load" v-if="extConfigType === 'url'" />
+        </div>
+      </form>
+
+      <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" />
+        </div>
+
+        <div class="buttons">
+          <button type="button" :disabled="savedConfig === config" @click="reload"><i class="fas fa-undo" /> &nbsp; Undo</button>
+          <button type="submit" :disabled="savedConfig === config"><i class="fas fa-save" /> &nbsp; Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '../utils';
+
+export default {
+  name: 'Backup',
+  mixins: [mixins],
+  data() {
+    return {
+      config: null,
+      savedConfig: null,
+      extConfigType: 'file',
+      extURL: null,
+    };
+  },
+
+  methods: {
+    onFocus(event) {
+      event.target.select();
+      document.execCommand('copy');
+      event.target.selectionStart = event.target.selectionEnd = 0;
+      this.notify('Configuration copied to the clipboard');
+    },
+
+    async reload() {
+      const config = await this.loadConfig();
+      this.config = JSON.stringify(config, null, '  ');
+      this.savedConfig = this.config;
+    },
+
+    save(event) {},
+
+    uploadFile(event) {
+      if (!(event.target.files && event.target.files.length)) {
+        return;
+      }
+
+      const self = this;
+      const reader = new FileReader();
+      this.loading = true;
+
+      reader.onload = evt => {
+        self.config = evt.target.result;
+        self.loading = false;
+      };
+
+      reader.onerror = evt => {
+        this.notify(reader.error, 'Could not read the file');
+        self.loading = false;
+      };
+
+      reader.readAsText(event.target.files[0]);
+    },
+
+    loadURL(event) {
+      console.log(event);
+    },
+  },
+
+  created() {
+    this.reload();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+textarea,
+.loader {
+  width: 60%;
+  min-width: 30em;
+  max-width: 50em;
+}
+
+textarea {
+  height: 50em;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.loader {
+  margin-bottom: 1em;
+
+  .head {
+    margin-bottom: 1em;
+  }
+
+  .body {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  [type='text'] {
+    width: 80%;
+    min-width: 10em;
+    max-width: 40em;
+    margin: 0;
+  }
+
+  [type='submit'] {
+    position: absolute;
+    right: 0;
+  }
+}
+</style>
+
+<!-- vim:sw=2:ts=2:et: -->

src/options/Menu.vue

@@ -1,17 +1,21 @@
 <template>
   <ul class="menu">
-    <li class="host" v-for="(host, hostname) in hosts" :key="hostname" :class="{ selected: hostname === selectedHost }" @click="$emit('select-host', hostname)">
+    <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="hostname === selectedHost">
-        <li v-for="(option, name) in hostOptions" :key="name" :class="{ selected: selectedHostOption === name }" @click.stop="$emit('select-host-option', name)">
+        <li
+          v-for="(option, optionName) in hostOptions"
+          :key="optionName"
+          :class="{ selected: selectedHostOption === optionName }"
+          @click.stop="$emit('select', 'host', hostname, optionName)"
+        >
           <i :class="option.iconClass" /> &nbsp; {{ option.displayName }}
         </li>
       </ul>
     </li>
 
-    <li class="add" :class="{ selected: isAddHost }" @click="$emit('select-add-host')"><i class="fas fa-plus" /> &nbsp; Add Device</li>
-    <li class="backup" :class="{ selected: isBackupMode }" @click="$emit('select-backup-mode')"><i class="fas fa-save" /> &nbsp; Backup Configuration</li>
-    <li class="restore" :class="{ selected: isRestoreMode }" @click="$emit('select-restore-mode')"><i class="fas fa-window-restore" /> &nbsp; Restore Configuration</li>
+    <li class="add" :class="{ selected: selectedTab === 'add' }" @click="$emit('select', 'add')"><i class="fas fa-plus" /> &nbsp; Add Device</li>
+    <li class="config" :class="{ selected: selectedTab === 'config' }" @click="$emit('select', 'config')"><i class="fas fa-cog" /> &nbsp; Configuration</li>
   </ul>
 </template>
 
@@ -20,11 +24,9 @@ export default {
   name: 'Menu',
   props: {
     hosts: Object,
+    selectedTab: String,
     selectedHost: String,
     selectedHostOption: String,
-    isAddHost: Boolean,
-    isBackupMode: Boolean,
-    isRestoreMode: Boolean,
   },
 
   computed: {

src/options/Restore.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="page restore">
-    <h2>Load configuration from a previous backup</h2>
-
-    <div class="container">
-      <textarea v-text="loading ? 'Loading...' : config" :disabled="loading" />
-    </div>
-  </div>
-</template>
-
-<script>
-import mixins from '../utils';
-
-export default {
-  name: 'Restore',
-  mixins: [mixins],
-  data() {
-    return {
-      config: {},
-    };
-  },
-
-  created() {
-    this.config = this.loadConfig();
-  },
-};
-</script>
-
-<!-- vim:sw=2:ts=2:et: -->

src/utils.js

@@ -8,7 +8,7 @@ export default {
   },
 
   methods: {
-    notify(message, title) {
+    notify(message, title = 'platypush') {
       browser.notifications.create({
         type: 'basic',
         title: title,
@@ -128,11 +128,17 @@ export default {
     },
 
     async loadConfig() {
+      this.loading = true;
+
+      try {
         const [hosts, actions] = await Promise.all([this.getHosts(), this.getActions()]);
         return {
           hosts: hosts,
           actions: actions,
         };
+      } finally {
+        this.loading = false;
+      }
     },
 
     formToHost(form) {