platypush-webext/src/options/App.vue

163 lines
3.8 KiB
Vue
Raw Normal View History

2020-06-12 01:03:46 +02:00
<template>
<div class="container">
2020-06-16 01:43:04 +02:00
<Menu :hosts="hosts" :selectedTab="selectedTab" :selectedHost="selectedHost" :selectedHostOption="selectedHostOption" @select="select" />
2020-06-12 01:03:46 +02:00
<div class="body">
2020-06-16 01:43:04 +02:00
<NewHost @add="addHost" v-if="selectedTab === 'add'" />
2020-06-16 18:46:38 +02:00
<Config v-else-if="selectedTab === 'config'" @reload="reload" />
2020-06-17 00:45:33 +02:00
<LocalCommands :host="selectedHost" v-else-if="selectedHost && selectedHostOption === 'localProc'" />
2020-06-16 18:46:38 +02:00
<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" />
2020-06-13 17:28:50 +02:00
<div class="none" v-else>Select an option from the menu</div>
2020-06-12 01:03:46 +02:00
</div>
</div>
</template>
<script>
2020-06-12 22:43:43 +02:00
import mixins from '../utils';
2020-06-13 16:09:22 +02:00
import Menu from './Menu';
2020-06-13 17:28:50 +02:00
import NewHost from './NewHost';
import EditHost from './EditHost';
import LocalCommands from './LocalCommands';
import RemoteCommands from './RemoteCommands';
2020-06-16 01:43:04 +02:00
import Config from './Config';
2020-06-13 17:28:50 +02:00
import Run from './Run';
2020-06-12 22:43:43 +02:00
2020-06-12 01:03:46 +02:00
export default {
name: 'App',
2020-06-12 22:43:43 +02:00
mixins: [mixins],
2020-06-13 17:28:50 +02:00
components: {
Menu,
NewHost,
EditHost,
LocalCommands,
RemoteCommands,
2020-06-16 01:43:04 +02:00
Config,
2020-06-13 17:28:50 +02:00
Run,
},
2020-06-12 22:43:43 +02:00
2020-06-12 01:03:46 +02:00
data() {
return {
2020-06-15 22:33:06 +02:00
hosts: {},
2020-06-16 01:43:04 +02:00
selectedTab: null,
2020-06-15 22:33:06 +02:00
selectedHost: null,
2020-06-12 01:03:46 +02:00
selectedHostOption: null,
};
},
methods: {
2020-06-16 01:43:04 +02:00
select(tab, host, hostOption) {
this.selectedTab = tab;
this.selectedHost = host;
this.selectedHostOption = hostOption;
2020-06-12 01:03:46 +02:00
},
2020-06-16 18:46:38 +02:00
async reload() {
this.hosts = await this.getHosts();
},
2020-06-13 17:28:50 +02:00
async addHost(form) {
2020-06-12 22:43:43 +02:00
if (!this.isHostFormValid(form)) {
this.notify('Invalid device parameter values', 'Device configuration error');
return;
}
2020-06-12 01:03:46 +02:00
this.loading = true;
try {
2020-06-12 22:43:43 +02:00
const host = this.formToHost(form);
2020-06-15 22:33:06 +02:00
const dupHosts = Object.values(this.hosts).filter(h => h.name === host.name || (h.address === host.address && h.port === host.port));
2020-06-12 01:03:46 +02:00
if (dupHosts.length) {
2020-06-12 22:43:43 +02:00
this.notify('This device is already defined', 'Duplicate device');
return;
2020-06-12 01:03:46 +02:00
}
2020-06-15 22:33:06 +02:00
this.hosts[host.name] = host;
await this.saveHosts(this.hosts);
2020-06-16 18:46:38 +02:00
await this.reload();
this.select('host', Object.keys(this.hosts)[Object.keys(this.hosts).length - 1]);
2020-06-12 01:03:46 +02:00
} finally {
this.loading = false;
}
},
2020-06-13 17:28:50 +02:00
async editHost(form) {
2020-06-12 22:43:43 +02:00
if (!this.isHostFormValid(form)) {
this.notify('Invalid device parameter values', 'Device configuration error');
return;
}
2020-06-12 01:03:46 +02:00
this.loading = true;
try {
2020-06-12 22:43:43 +02:00
this.hosts[this.selectedHost] = this.formToHost(form);
2020-06-15 22:33:06 +02:00
await this.saveHosts(this.hosts);
2020-06-12 01:03:46 +02:00
} finally {
this.loading = false;
}
},
async removeHost() {
const host = this.hosts[this.selectedHost];
if (!confirm('Are you sure that you want to remove the device ' + host.name + '?')) {
return;
}
this.loading = true;
try {
const i = this.selectedHost;
2020-06-16 18:46:38 +02:00
delete this.hosts[i];
await this.saveHosts(this.hosts);
if (!Object.keys(this.hosts).length) {
2020-06-15 22:33:06 +02:00
this.selectedHost = null;
2020-06-12 01:03:46 +02:00
} else {
2020-06-15 22:33:06 +02:00
this.selectedHost = Object.keys(this.hosts)[0];
2020-06-12 01:03:46 +02:00
}
2020-06-16 18:46:38 +02:00
await this.reload();
2020-06-12 01:03:46 +02:00
} finally {
this.loading = false;
}
},
},
created() {
2020-06-16 18:46:38 +02:00
this.reload();
2020-06-12 01:03:46 +02:00
},
};
</script>
<style lang="scss" scoped>
.container {
display: flex;
height: 100vh;
}
.body {
width: 100%;
height: 100%;
display: flex;
overflow: auto;
.none {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
opacity: 0.4;
}
}
.page {
width: 100%;
padding: 0 1em;
}
</style>
<!-- vim:sw=2:ts=2:et: -->