platypush/platypush-webext
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Refactored hosts/actions

Browse source
This commit is contained in:
Fabio Manganiello 2020-06-15 22:33:06 +02:00
parent 8fb4237e39
commit a6892d244e
4 changed files with 53 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/options/App.vue
View file

@ -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'" />
<RemoteCommands v-else-if="selectedHost >= 0 && selectedHostOption === 'remoteProc'" />
<Run :host="hosts[selectedHost]" v-else-if="selectedHost >= 0 && selectedHostOption === 'run'" />
<EditHost :host="hosts[selectedHost]" @save="editHost" @remove="removeHost" v-else-if="selectedHost >= 0" />
<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" />
<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) {
this.selectedHost = -1;
} else if (i > 0) {
this.selectedHost = i - 1;
if (Object.keys(this.hosts).length <= 1) {
this.selectedHost = null;
} else {
this.selectedHost = 0;
this.selectedHost = Object.keys(this.hosts)[0];
}
this.hosts.splice(i, 1);
await this.saveHosts();
delete this.hosts[i];
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;
});
},

8
src/options/Menu.vue
View file

@ -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,
selectedHost: Number,
hosts: Object,
selectedHost: String,
selectedHostOption: String,
isAddHost: Boolean,
isBackupMode: Boolean,

10
src/options/Run.vue
View file

@ -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 {
name: el.name,
value: el.value,
};
return [...this.$refs.runForm.querySelectorAll('[data-type="arg"]')].reduce((obj, el) => {
obj[el.name] = el.value;
return obj;
}, {});
},

37
src/utils.js
View file

@ -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;
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;
}
await this.saveActions(actions);
this.notify('You can find this action under the Local Actions menu', 'Action saved');
},
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,