platypush-webext/src/options/App.vue

448 lines
12 KiB
Vue
Raw Normal View History

2020-06-12 01:03:46 +02:00
<template>
<div class="container">
2020-06-13 16:09:22 +02:00
<Menu
:hosts="hosts"
:selectedHost="selectedHost"
:selectedHostOption="selectedHostOption"
:isAddHost="isAddHost"
@select-host="selectHost"
@select-host-option="selectHostOption"
@select-add-host="selectAddHost"
/>
2020-06-12 01:03:46 +02:00
<div class="body">
<div class="page add" v-if="isAddHost">
<h2>Add a new device</h2>
<form class="host-form" ref="addHostForm" @submit.prevent="addHost">
<input type="text" name="name" placeholder="Name" autocomplete="off" :disabled="loading" />
<input type="text" name="address" placeholder="IP or hostname" @keyup="onAddrChange($refs.addHostForm)" autocomplete="off" :disabled="loading" />
<input type="text" name="port" value="8008" placeholder="HTTP port" @keyup="onPortChange($refs.addHostForm)" autocomplete="off" :disabled="loading" />
<input type="text" name="websocketPort" value="8009" placeholder="Websocket port" autocomplete="off" :disabled="loading" />
<input type="text" name="token" placeholder="Access token" autocomplete="off" :disabled="loading" />
2020-06-12 22:43:43 +02:00
<div class="row ssl">
<input type="checkbox" name="ssl" :disabled="loading" />
<label for="ssl">Use SSL</label>
</div>
<div class="buttons">
<input type="submit" value="Add" :disabled="loading" />
</div>
2020-06-12 01:03:46 +02:00
</form>
</div>
<div class="page local-procedures" v-else-if="selectedHostOption === 'localProc'">
<h2>Procedures stored on browser</h2>
</div>
<div class="page remote-procedures" v-else-if="selectedHostOption === 'remoteProc'">
<h2>Procedures stored on server</h2>
</div>
<div class="page run" v-else-if="selectedHostOption === 'run'">
<h2>Run a command on {{ hosts[selectedHost].name }}</h2>
<form class="run-form" ref="runForm" @submit.prevent="runAction">
2020-06-12 22:43:43 +02:00
<div class="row action-name">
<input type="text" name="action" v-model="action.name" placeholder="Action" autocomplete="off" :disabled="loading" />
<span class="help">
&nbsp; <a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the
current URL.
</span>
</div>
<div class="row" v-for="(arg, i) in action.args" :key="i">
<div class="label">
<input type="text" :name="'arg' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
</div>
<div class="value">
<input type="text" :name="arg.name" v-model="arg.value" data-type="argument" placeholder="Value" autocomplete="off" :disabled="loading" />
<button type="button" @click="action.args.splice(i, 1)" :disabled="loading"><i class="fas fa-trash" /></button>
</div>
</div>
<div class="row buttons">
<button type="button" @click="addActionArgument" :disabled="loading"><i class="fas fa-plus" /> &nbsp; Add Argument</button>
<button type="button" @click="clearAction" :disabled="loading"><i class="fas fa-times" /> &nbsp; Clear Form</button>
<button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button>
</div>
2020-06-12 01:03:46 +02:00
</form>
2020-06-12 22:43:43 +02:00
<div class="code response" v-text="actionResponse" v-if="actionResponse && (actionResponse.length || Object.keys(actionResponse).length)" />
<div class="code error" v-text="actionError" v-if="actionError && actionError.length" />
2020-06-12 01:03:46 +02:00
</div>
<div class="page edit" v-else-if="selectedHost >= 0">
<h2>Edit device {{ hosts[selectedHost].name }}</h2>
<form class="host-form" ref="editHostForm" @submit.prevent="editHost">
<input type="text" name="name" placeholder="Name" :value="hosts[selectedHost].name" autocomplete="off" :disabled="loading" />
<input type="text" name="address" placeholder="IP or hostname" :value="hosts[selectedHost].address" autocomplete="off" :disabled="loading" />
<input
type="text"
name="port"
placeholder="HTTP port"
autocomplete="off"
:value="hosts[selectedHost].port"
@keyup="onPortChange($refs.editHostForm)"
:disabled="loading"
/>
<input type="text" name="websocketPort" :value="hosts[selectedHost].websocketPort" placeholder="Websocket port" autocomplete="off" :disabled="loading" />
<input type="text" name="token" placeholder="Access token" :value="hosts[selectedHost].token" autocomplete="off" :disabled="loading" />
2020-06-12 22:43:43 +02:00
<div class="row ssl">
2020-06-13 16:09:22 +02:00
<input type="checkbox" name="ssl" v-model="hosts[selectedHost].ssl" :disabled="loading" />
2020-06-12 22:43:43 +02:00
<label for="ssl">Use SSL</label>
</div>
<div class="buttons">
<input type="submit" value="Edit" :disabled="loading" />
<button type="button" @click="removeHost" :disabled="loading">Remove</button>
</div>
2020-06-12 01:03:46 +02:00
</form>
</div>
<div class="none" v-else>
Select an option from the menu
</div>
</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-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 16:09:22 +02:00
components: { Menu },
2020-06-12 22:43:43 +02:00
2020-06-12 01:03:46 +02:00
data() {
return {
hosts: [],
selectedHost: -1,
selectedHostOption: null,
isAddHost: false,
loading: false,
2020-06-12 22:43:43 +02:00
actionResponse: null,
actionError: null,
action: {
name: null,
args: [],
},
2020-06-12 01:03:46 +02:00
};
},
methods: {
selectHost(i) {
this.selectedHost = i;
this.selectedHostOption = null;
this.isAddHost = false;
},
selectHostOption(option) {
this.selectedHostOption = option;
},
selectAddHost() {
this.selectedHost = -1;
this.isAddHost = true;
},
2020-06-12 22:43:43 +02:00
addActionArgument() {
this.action.args.push({
name: '',
value: '',
});
},
2020-06-12 01:03:46 +02:00
onAddrChange(form) {
if (form.name.value.length && !form.address.value.startsWith(form.name.value)) {
return;
}
form.name.value = form.address.value;
},
onPortChange(form) {
2020-06-12 22:43:43 +02:00
const port = form.port.value;
if (!this.isPortValid(port)) return;
form.websocketPort.value = '' + (parseInt(port) + 1);
2020-06-12 01:03:46 +02:00
},
isPortValid(port) {
port = parseInt(port);
2020-06-12 22:43:43 +02:00
return !isNaN(port) && port > 0 && port < 65536;
},
isHostFormValid(form) {
return form.name.value.length && form.address.value.length && this.isPortValid(form.port.value) && this.isPortValid(form.websocketPort.value);
},
clearAction() {
this.action.name = null;
this.action.args = [];
this.actionResponse = null;
this.actionError = null;
},
async runAction() {
this.loading = true;
try {
this.actionResponse = await this.run(this.action, this.hosts[this.selectedHost]);
this.actionError = null;
} catch (e) {
this.actionResponse = null;
this.actionError = e.toString();
} finally {
this.loading = false;
}
2020-06-12 01:03:46 +02:00
},
async addHost() {
2020-06-12 22:43:43 +02:00
const form = this.$refs.addHostForm;
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-12 01:03:46 +02:00
const dupHosts = this.hosts.filter(h => h.name === host.name || (h.address === host.address && h.port === host.port));
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
}
this.hosts.push(host);
await this.saveHosts();
this.selectedHost = this.hosts.length - 1;
this.isAddHost = false;
} finally {
this.loading = false;
}
},
async editHost() {
2020-06-12 22:43:43 +02:00
const form = this.$refs.editHostForm;
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-12 01:03:46 +02:00
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;
2020-06-12 22:43:43 +02:00
if (this.hosts.length <= 1) {
2020-06-12 01:03:46 +02:00
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;
}
},
async loadHosts() {
this.loading = true;
try {
const response = await browser.storage.local.get('hosts');
this.hosts = JSON.parse(response.hosts);
} finally {
this.loading = false;
}
},
async saveHosts() {
await browser.storage.local.set({ hosts: JSON.stringify(this.hosts) });
},
formToHost(form) {
return {
name: form.name.value,
address: form.address.value,
port: parseInt(form.port.value),
websocketPort: parseInt(form.websocketPort.value),
2020-06-13 16:09:22 +02:00
ssl: form.ssl.checked,
2020-06-12 01:03:46 +02:00
token: form.token.value,
};
},
},
created() {
this.loadHosts();
},
};
</script>
<style lang="scss" scoped>
.container {
display: flex;
height: 100vh;
font-size: 14px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
}
a,
a:visited {
color: initial;
text-decoration: underline dotted #888;
}
a:hover {
opacity: 0.7;
}
h2 {
font-size: 1.2em;
margin-bottom: 0.75em;
padding-bottom: 0.75em;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.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;
}
form {
input[type='text'] {
display: block;
margin-bottom: 0.5em;
border-radius: 1em;
padding: 0.4em;
border: 1px solid rgba(0, 0, 0, 0.2);
&:hover {
border: 1px solid rgba(40, 235, 70, 0.3);
}
&:focus {
border: 1px solid rgba(40, 235, 70, 0.7);
}
}
2020-06-12 22:43:43 +02:00
.row.ssl {
display: flex;
align-items: center;
}
.buttons {
margin-top: 0.5em;
padding-top: 0.5em;
border-top: 1px solid rgba(0, 0, 0, 0.15);
button {
margin-right: 0.3em;
}
}
}
.run-form {
position: relative;
max-width: 50em;
.row {
display: flex;
align-items: center;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
.label {
width: 30%;
input[type='text'] {
width: 90%;
}
}
.value {
width: 70%;
input[type='text'] {
width: 80%;
}
button {
background: white;
padding: 0.25em 1.5em;
margin-left: 0.5em;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 1em;
&:hover {
opacity: 0.8;
}
}
}
input {
display: inline-flex !important;
margin-bottom: 0 !important;
}
[type='submit'] {
position: absolute;
right: 0.9em;
}
}
.code {
padding: 1em;
white-space: pre-wrap;
font-family: monospace;
border: 1px dotted rgba(0, 0, 0, 0.8);
border-radius: 1em;
&.response {
background: rgba(200, 255, 200, 0.3);
}
&.error {
background: rgba(255, 200, 200, 0.3);
}
2020-06-12 01:03:46 +02:00
}
</style>
<!-- vim:sw=2:ts=2:et: -->