diff --git a/src/options/App.vue b/src/options/App.vue
index 6fdda5c..3523a4b 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -5,13 +5,19 @@
: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"
/>
+
+
@@ -28,6 +34,8 @@ 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 Run from './Run';
export default {
@@ -39,6 +47,8 @@ export default {
EditHost,
LocalCommands,
RemoteCommands,
+ Backup,
+ Restore,
Run,
},
@@ -47,6 +57,8 @@ export default {
selectedHost: -1,
selectedHostOption: null,
isAddHost: false,
+ isBackupMode: false,
+ isRestoreMode: false,
};
},
@@ -64,6 +76,20 @@ export default {
selectAddHost() {
this.selectedHost = -1;
this.isAddHost = true;
+ this.isBackupMode = false;
+ this.isRestoreMode = false;
+ },
+
+ selectBackupMode() {
+ this.isAddHost = false;
+ this.isBackupMode = true;
+ this.isRestoreMode = false;
+ },
+
+ selectRestoreMode() {
+ this.isAddHost = false;
+ this.isBackupMode = false;
+ this.isRestoreMode = true;
},
async addHost(form) {
@@ -83,7 +109,7 @@ export default {
}
this.hosts.push(host);
- await this.saveHosts();
+ await this.saveHosts(this.hosts);
this.selectedHost = this.hosts.length - 1;
this.isAddHost = false;
} finally {
@@ -134,7 +160,10 @@ export default {
},
created() {
- this.loadHosts();
+ const self = this;
+ this.loadHosts().then(hosts => {
+ self.hosts = hosts;
+ });
},
};
diff --git a/src/options/Autocomplete.vue b/src/options/Autocomplete.vue
index 2c0b86d..0b0d4ec 100644
--- a/src/options/Autocomplete.vue
+++ b/src/options/Autocomplete.vue
@@ -72,23 +72,49 @@ export default {
},
onKeyDown(event) {
- if (event.key === 'Enter') {
- this.showItems = false;
- if (!this.$refs.items) {
- return;
+ if (!this.$refs.items) {
+ return;
+ }
+
+ const selected = this.$refs.items.querySelector('.selected');
+ if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
+ switch (event.key) {
+ case 'Enter':
+ case ' ':
+ this.showItems = false;
+ if (!selected) {
+ return;
+ }
+
+ this.$refs.input.value = selected.innerText;
+ this.$emit('change', selected.innerText);
+ break;
+
+ case 'Tab':
+ this.selectNext();
+ break;
}
- const selected = this.$refs.items.querySelector('.selected');
- if (!selected) {
- return;
- }
-
- this.$refs.input.value = selected.innerText;
- this.$emit('change', selected.innerText);
event.preventDefault();
}
},
+ selectPrev() {
+ if (this.selectedItem > 0) {
+ this.selectedItem--;
+ } else {
+ this.selectedItem = this.filteredItems.length - 1;
+ }
+ },
+
+ selectNext() {
+ if (this.selectedItem >= this.filteredItems.length - 1) {
+ this.selectedItem = this.filteredItems.length ? 0 : -1;
+ } else {
+ this.selectedItem++;
+ }
+ },
+
onKeyUp(event) {
if (event.key === 'Escape') {
this.showItems = false;
@@ -100,19 +126,10 @@ export default {
if (['ArrowUp', 'ArrowDown'].indexOf(event.key) >= 0) {
switch (event.key) {
case 'ArrowUp':
- if (this.selectedItem > 0) {
- this.selectedItem--;
- } else {
- this.selectedItem = this.filteredItems.length - 1;
- }
+ this.selectPrev();
break;
-
case 'ArrowDown':
- if (this.selectedItem >= this.filteredItems.length - 1) {
- this.selectedItem = this.filteredItems.length ? 0 : -1;
- } else {
- this.selectedItem++;
- }
+ this.selectNext();
break;
}
diff --git a/src/options/Backup.vue b/src/options/Backup.vue
new file mode 100644
index 0000000..a414929
--- /dev/null
+++ b/src/options/Backup.vue
@@ -0,0 +1,32 @@
+
+
+
Backup the current configuration
+
+
+
+
+
+
+
+
+
+
diff --git a/src/options/Menu.vue b/src/options/Menu.vue
index 6d672de..8984c62 100644
--- a/src/options/Menu.vue
+++ b/src/options/Menu.vue
@@ -8,7 +8,10 @@
+
Add Device
+
Backup Configuration
+
Restore Configuration
@@ -20,13 +23,15 @@ export default {
selectedHost: Number,
selectedHostOption: String,
isAddHost: Boolean,
+ isBackupMode: Boolean,
+ isRestoreMode: Boolean,
},
computed: {
hostOptions() {
return {
localProc: {
- displayName: 'Local Procedures',
+ displayName: 'Local Actions',
iconClass: 'fas fa-puzzle-piece',
},
remoteProc: {
diff --git a/src/options/Restore.vue b/src/options/Restore.vue
new file mode 100644
index 0000000..e47a402
--- /dev/null
+++ b/src/options/Restore.vue
@@ -0,0 +1,29 @@
+
+
+
Load configuration from a previous backup
+
+
+
+
+
+
+
+
+
+
diff --git a/src/options/Run.vue b/src/options/Run.vue
index 35a707d..c192717 100644
--- a/src/options/Run.vue
+++ b/src/options/Run.vue
@@ -7,7 +7,7 @@
URL.
-