platypush-webext/src/options/App.vue

172 lines
3.8 KiB
Vue

<template>
<div class="container">
<Menu
:hosts="hosts"
:selectedHost="selectedHost"
:selectedHostOption="selectedHostOption"
:isAddHost="isAddHost"
@select-host="selectHost"
@select-host-option="selectHostOption"
@select-add-host="selectAddHost"
/>
<div class="body">
<NewHost @add="addHost" v-if="isAddHost" />
<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" />
<div class="none" v-else>Select an option from the menu</div>
</div>
</div>
</template>
<script>
import mixins from '../utils';
import Menu from './Menu';
import NewHost from './NewHost';
import EditHost from './EditHost';
import LocalCommands from './LocalCommands';
import RemoteCommands from './RemoteCommands';
import Run from './Run';
export default {
name: 'App',
mixins: [mixins],
components: {
Menu,
NewHost,
EditHost,
LocalCommands,
RemoteCommands,
Run,
},
data() {
return {
selectedHost: -1,
selectedHostOption: null,
isAddHost: false,
};
},
methods: {
selectHost(i) {
this.selectedHost = i;
this.selectedHostOption = null;
this.isAddHost = false;
},
selectHostOption(option) {
this.selectedHostOption = option;
},
selectAddHost() {
this.selectedHost = -1;
this.isAddHost = true;
},
async addHost(form) {
if (!this.isHostFormValid(form)) {
this.notify('Invalid device parameter values', 'Device configuration error');
return;
}
this.loading = true;
try {
const host = this.formToHost(form);
const dupHosts = 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);
await this.saveHosts();
this.selectedHost = this.hosts.length - 1;
this.isAddHost = false;
} finally {
this.loading = false;
}
},
async editHost(form) {
if (!this.isHostFormValid(form)) {
this.notify('Invalid device parameter values', 'Device configuration error');
return;
}
this.loading = true;
try {
this.hosts[this.selectedHost] = this.formToHost(form);
await this.saveHosts();
} 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;
if (this.hosts.length <= 1) {
this.selectedHost = -1;
} else if (i > 0) {
this.selectedHost = i - 1;
} else {
this.selectedHost = 0;
}
this.hosts.splice(i, 1);
await this.saveHosts();
} finally {
this.loading = false;
}
},
},
created() {
this.loadHosts();
},
};
</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: -->