Merge pull request #96 from NBTX/master
Use axios for requests, UI tweaks, and more...
This commit is contained in:
Liyas Thomas
GitHub
@@ -84,6 +84,11 @@ button {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&[disabled], &.disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@@ -220,7 +225,7 @@ input[type="checkbox"] {
|
||||
background-color: var(--err-color);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
.disabled, input[disabled] {
|
||||
background-color: var(--err-color);
|
||||
color: #b2b2b2;
|
||||
}
|
||||
|
||||
98
components/toggle.vue
Normal file
98
components/toggle.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div @click="toggle()">
|
||||
<label class="toggle" :class="{on: on}" ref="toggle">
|
||||
<span class="handle"></span>
|
||||
</label>
|
||||
<label class="caption"><slot /></label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$useBorder: true;
|
||||
$borderColor: var(--fg-color);
|
||||
$activeColor: var(--ac-color);
|
||||
$inactiveColor: var(--fg-color);
|
||||
|
||||
$inactiveHandleColor: $inactiveColor;
|
||||
$activeHandleColor: var(--fg-color);
|
||||
|
||||
$width: 50px;
|
||||
$height: 20px;
|
||||
$handleSpacing: 4px;
|
||||
|
||||
$transition: all 0.2s ease-in-out;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label.caption {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border: if($useBorder, 2px solid $borderColor, none);
|
||||
background-color: if($useBorder, transparent, $inactiveColor);
|
||||
vertical-align: middle;
|
||||
|
||||
border-radius: 100px;
|
||||
transition: $transition;
|
||||
box-sizing: initial;
|
||||
padding: 0;
|
||||
margin: 10px 5px;
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: $handleSpacing;
|
||||
background-color: $inactiveHandleColor;
|
||||
|
||||
width: #{ $height - ($handleSpacing * 2) };
|
||||
height: #{ $height - ($handleSpacing * 2) };
|
||||
border-radius: 100px;
|
||||
|
||||
pointer-events: none;
|
||||
transition: $transition;
|
||||
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: $activeColor;
|
||||
border-color: $activeColor;
|
||||
|
||||
.handle {
|
||||
background-color: $activeHandleColor;
|
||||
left: #{$width - $height};
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: {
|
||||
'on': {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle () {
|
||||
this.$refs.toggle.classList.toggle("on");
|
||||
this.$emit('change', this.$refs.toggle.classList.contains("on"));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
/*
|
||||
** Customize the progress-bar color
|
||||
*/
|
||||
loading: { color: '#88FB4F' },
|
||||
loading: { color: 'var(--ac-color)' },
|
||||
|
||||
/*
|
||||
** Global CSS
|
||||
@@ -136,7 +136,9 @@ export default {
|
||||
return icons;
|
||||
})([48, 72, 96, 144, 192, 512])
|
||||
}
|
||||
}]
|
||||
}],
|
||||
|
||||
['@nuxtjs/axios']
|
||||
],
|
||||
|
||||
/*
|
||||
|
||||
119
package-lock.json
generated
119
package-lock.json
generated
@@ -1527,6 +1527,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/axios": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.6.0.tgz",
|
||||
"integrity": "sha512-Rl4nnudm+sSkMtgfSEAeA5bq6aFpbBoYVXLXWaDxfydslukRd2SdEDdGv0gHE7F/jtIw+JfptWDHCHnzuoO/Ng==",
|
||||
"requires": {
|
||||
"@nuxtjs/proxy": "^1.3.3",
|
||||
"axios": "^0.19.0",
|
||||
"axios-retry": "^3.1.2",
|
||||
"consola": "^2.10.1"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/icon": {
|
||||
"version": "3.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/icon/-/icon-3.0.0-beta.16.tgz",
|
||||
@@ -1557,6 +1568,15 @@
|
||||
"@nuxtjs/pwa-utils": "3.0.0-beta.16"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/proxy": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-1.3.3.tgz",
|
||||
"integrity": "sha512-ykpCUdOqPOH79mQG30QfWZmbRD8yjTD+TTSBbwow5GkROUQEtXw+HE+q6i+YFpuChvgJNbwVrXdZ3YmfXbZtTw==",
|
||||
"requires": {
|
||||
"consola": "^2.5.6",
|
||||
"http-proxy-middleware": "^0.19.1"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/pwa": {
|
||||
"version": "3.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.0.0-beta.16.tgz",
|
||||
@@ -2204,6 +2224,46 @@
|
||||
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
|
||||
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"is-buffer": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
|
||||
"integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"axios-retry": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.1.2.tgz",
|
||||
"integrity": "sha512-+X0mtJ3S0mmia1kTVi1eA3DAC+oWnT2A29g3CpkzcBPMT6vJm+hn/WiV9wPt/KXLHVmg5zev9mWqkPx7bHMovg==",
|
||||
"requires": {
|
||||
"is-retry-allowed": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"babel-code-frame": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
|
||||
@@ -4058,6 +4118,11 @@
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
|
||||
},
|
||||
"eventemitter3": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
|
||||
"integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
|
||||
},
|
||||
"events": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
|
||||
@@ -4453,6 +4518,29 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.8.1.tgz",
|
||||
"integrity": "sha512-micCIbldHioIegeKs41DoH0KS3AXfFzgS30qVkM6z/XOE/GJgvmsoc839NUqa1B9udYe9dQxgv7KFwng6+p/dw==",
|
||||
"requires": {
|
||||
"debug": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
|
||||
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@@ -5096,6 +5184,27 @@
|
||||
"toidentifier": "1.0.0"
|
||||
}
|
||||
},
|
||||
"http-proxy": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
|
||||
"integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
|
||||
"requires": {
|
||||
"eventemitter3": "^3.0.0",
|
||||
"follow-redirects": "^1.0.0",
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"http-proxy-middleware": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
|
||||
"integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
|
||||
"requires": {
|
||||
"http-proxy": "^1.17.0",
|
||||
"is-glob": "^4.0.0",
|
||||
"lodash": "^4.17.11",
|
||||
"micromatch": "^3.1.10"
|
||||
}
|
||||
},
|
||||
"http-signature": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
|
||||
@@ -5418,6 +5527,11 @@
|
||||
"resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
|
||||
"integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
|
||||
},
|
||||
"is-retry-allowed": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
|
||||
"integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
|
||||
},
|
||||
"is-stream": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
|
||||
@@ -8430,6 +8544,11 @@
|
||||
"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
|
||||
"dev": true
|
||||
},
|
||||
"requires-port": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/axios": "^5.6.0",
|
||||
"@nuxtjs/pwa": "^3.0.0-0",
|
||||
"nuxt": "^2.0.0",
|
||||
"vue-virtual-scroll-list": "^1.4.2",
|
||||
|
||||
131
pages/index.vue
131
pages/index.vue
@@ -16,11 +16,11 @@
|
||||
</li>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input id="url" type="url" v-bind:class="{ error: !isValidURL }" v-model="url" v-on:keyup.enter="sendRequest">
|
||||
<input id="url" type="url" :class="{ error: !isValidURL }" v-model="url" @keyup.enter="isValidURL ? sendRequest() : null">
|
||||
</li>
|
||||
<li>
|
||||
<label for="path">Path</label>
|
||||
<input id="path" v-model="path" v-on:keyup.enter="sendRequest">
|
||||
<input id="path" v-model="path" @keyup.enter="isValidURL ? sendRequest() : null">
|
||||
</li>
|
||||
<li>
|
||||
<label for="action" class="hide-on-small-screen"> </label>
|
||||
@@ -190,7 +190,7 @@
|
||||
<pw-section class="gray" label="History">
|
||||
<ul>
|
||||
<li>
|
||||
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
|
||||
<button :class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
|
||||
</li>
|
||||
</ul>
|
||||
<virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
|
||||
@@ -261,6 +261,7 @@
|
||||
className: 'missing-data-response'
|
||||
}
|
||||
];
|
||||
|
||||
const parseHeaders = xhr => {
|
||||
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
|
||||
const headerMap = {};
|
||||
@@ -317,6 +318,7 @@
|
||||
const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
|
||||
return validIP.test(this.url) || validHostname.test(this.url);
|
||||
},
|
||||
hasRequestBody () { return['POST', 'PUT', 'PATCH'].includes(this.method); },
|
||||
rawRequestBody() {
|
||||
const {
|
||||
bodyParams
|
||||
@@ -394,11 +396,17 @@
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
sendRequest() {
|
||||
|
||||
async sendRequest() {
|
||||
if (!this.isValidURL) {
|
||||
alert('Please check the formatting of the URL');
|
||||
return
|
||||
alert('Please check the formatting of the URL.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Start showing the loading bar as soon as possible.
|
||||
// The nuxt axios module will hide it when the request is made.
|
||||
this.$nuxt.$loading.start();
|
||||
|
||||
if (this.$refs.response.$el.classList.contains('hidden')) {
|
||||
this.$refs.response.$el.classList.toggle('hidden')
|
||||
}
|
||||
@@ -408,51 +416,82 @@
|
||||
this.previewEnabled = false;
|
||||
this.response.status = 'Fetching...';
|
||||
this.response.body = 'Loading...';
|
||||
const xhr = new XMLHttpRequest();
|
||||
const user = this.auth === 'Basic' ? this.httpUser : null;
|
||||
const password = this.auth === 'Basic' ? this.httpPassword : null;
|
||||
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
|
||||
if (this.auth === 'Bearer Token')
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
|
||||
if (this.headers) {
|
||||
this.headers.forEach(function(element) {
|
||||
xhr.setRequestHeader(element.key, element.value)
|
||||
})
|
||||
}
|
||||
if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
|
||||
|
||||
const auth = this.auth === 'Basic' ? {
|
||||
username: this.httpUser,
|
||||
password: this.httpPassword
|
||||
} : null;
|
||||
|
||||
let headers = {};
|
||||
|
||||
// If the request has a request body, we want to ensure Content-Length and
|
||||
// Content-Type are sent.
|
||||
if (this.hasRequestBody) {
|
||||
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
|
||||
xhr.setRequestHeader('Content-Length', requestBody.length);
|
||||
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
|
||||
xhr.send(requestBody);
|
||||
} else {
|
||||
xhr.send();
|
||||
|
||||
Object.assign(headers, {
|
||||
'Content-Length': requestBody.length,
|
||||
'Content-Type': `${this.contentType}; charset=utf-8`
|
||||
});
|
||||
}
|
||||
xhr.onload = e => {
|
||||
this.response.status = xhr.status;
|
||||
const headers = this.response.headers = parseHeaders(xhr);
|
||||
this.response.body = xhr.responseText;
|
||||
if (this.method != 'HEAD') {
|
||||
if ((headers['content-type'] || '').startsWith('application/json')) {
|
||||
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
|
||||
|
||||
// If the request uses a token for auth, we want to make sure it's sent here.
|
||||
if(this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
|
||||
|
||||
headers = Object.assign(
|
||||
// Clone the app headers object first, we don't want to
|
||||
// mutate it with the request headers added by default.
|
||||
Object.assign({}, this.headers),
|
||||
|
||||
// We make our temporary headers object the source so
|
||||
// that you can override the added headers if you
|
||||
// specify them.
|
||||
headers
|
||||
);
|
||||
|
||||
try {
|
||||
const payload = await this.$axios({
|
||||
method: this.method,
|
||||
url: this.url + this.path + this.queryString,
|
||||
auth,
|
||||
headers
|
||||
});
|
||||
|
||||
(() => {
|
||||
const status = this.response.status = payload.status;
|
||||
const headers = this.response.headers = payload.headers;
|
||||
|
||||
// We don't need to bother parsing JSON, axios already handles it for us!
|
||||
const body = this.response.body = payload.data;
|
||||
|
||||
const date = new Date().toLocaleDateString();
|
||||
const time = new Date().toLocaleTimeString();
|
||||
|
||||
this.history.push({
|
||||
status,
|
||||
date,
|
||||
time,
|
||||
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
});
|
||||
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history));
|
||||
})();
|
||||
} catch(error) {
|
||||
if(error.response){
|
||||
this.response.headers = error.response.headers;
|
||||
this.response.status = error.response.status;
|
||||
this.response.body = error.response.data;
|
||||
return;
|
||||
}
|
||||
}
|
||||
const d = new Date().toLocaleDateString();
|
||||
const t = new Date().toLocaleTimeString();
|
||||
this.history = [{
|
||||
status: xhr.status,
|
||||
date: d,
|
||||
time: t,
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
}, ...this.history];
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history));
|
||||
};
|
||||
xhr.onerror = e => {
|
||||
this.response.status = xhr.status;
|
||||
this.response.body = xhr.statusText;
|
||||
|
||||
this.response.status = error.message;
|
||||
this.response.body = "See JavaScript console (F12) for details.";
|
||||
}
|
||||
},
|
||||
|
||||
addRequestHeader() {
|
||||
this.headers.push({
|
||||
key: '',
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<li>
|
||||
<h3 class="title">Background</h3>
|
||||
<div class="backgrounds">
|
||||
<span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
|
||||
<swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
|
||||
<span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
|
||||
<swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@@ -15,8 +15,8 @@
|
||||
<li>
|
||||
<h3 class="title">Color</h3>
|
||||
<div class="colors">
|
||||
<span v-for="entry in colors" :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)">
|
||||
<swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
|
||||
<span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
|
||||
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
@@ -24,17 +24,53 @@
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="title">Frames</h3>
|
||||
<input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
|
||||
<label for="disableFrameColors">Enable multi-color</label>
|
||||
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
|
||||
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
|
||||
</pw-toggle>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<!--
|
||||
PROXY SETTINGS
|
||||
--------------
|
||||
This feature is currently not finished.
|
||||
|
||||
<pw-section class="blue" label="Proxy">
|
||||
<ul>
|
||||
<li>
|
||||
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
|
||||
Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
|
||||
</pw-toggle>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
|
||||
</li>
|
||||
<li>
|
||||
<label for="key">Key</label>
|
||||
<input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import section from "../components/section";
|
||||
import swatch from "../components/settings/swatch";
|
||||
import toggle from "../components/toggle";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': section,
|
||||
'pw-toggle': toggle,
|
||||
'swatch': swatch
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
|
||||
@@ -86,18 +122,30 @@
|
||||
"vibrant": false
|
||||
},
|
||||
],
|
||||
|
||||
settings: {
|
||||
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
|
||||
THEME_COLOR: '',
|
||||
THEME_COLOR_VIBRANT: true,
|
||||
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
|
||||
|
||||
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
|
||||
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
|
||||
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
|
||||
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'pw-section': section,
|
||||
'swatch': swatch
|
||||
|
||||
watch: {
|
||||
proxySettings: {
|
||||
deep: true,
|
||||
handler (value) {
|
||||
this.applySetting('PROXY_URL', value.url);
|
||||
this.applySetting('PROXY_KEY', value.key);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
applyTheme(name) {
|
||||
this.applySetting('THEME_CLASS', name);
|
||||
@@ -134,6 +182,15 @@
|
||||
},
|
||||
beforeMount() {
|
||||
this.settings.THEME_COLOR = this.getActiveColor();
|
||||
},
|
||||
|
||||
computed: {
|
||||
proxySettings () {
|
||||
return {
|
||||
url: this.settings.PROXY_URL,
|
||||
key: this.settings.PROXY_KEY
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
|
||||
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
|
||||
</li>
|
||||
<li>
|
||||
<label for="action" class="hide-on-small-screen"> </label>
|
||||
<button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
|
||||
<button :disabled="!urlValid" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
@@ -27,11 +27,11 @@
|
||||
<ul>
|
||||
<li>
|
||||
<label for="message">Message</label>
|
||||
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
|
||||
<input id="message" name="message" type="text" v-model="communication.input" :disabled="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
|
||||
</li>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
|
||||
<button name="send" :disabled="!connectionState" @click="sendMessage">Send</button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
@@ -24,7 +24,21 @@ export const SETTINGS_KEYS = [
|
||||
* to emphasise the different sections.
|
||||
* This setting allows that to be turned off.
|
||||
*/
|
||||
"DISABLE_FRAME_COLORS"
|
||||
"DISABLE_FRAME_COLORS",
|
||||
|
||||
/**
|
||||
* Whether or not requests should be proxied.
|
||||
*/
|
||||
"PROXY_ENABLED",
|
||||
|
||||
/**
|
||||
* The URL of the proxy to connect to for requests.
|
||||
*/
|
||||
"PROXY_URL",
|
||||
/**
|
||||
* The security key of the proxy.
|
||||
*/
|
||||
"PROXY_KEY"
|
||||
];
|
||||
|
||||
export const state = () => ({
|
||||
@@ -43,9 +57,9 @@ export const mutations = {
|
||||
// Add your settings key to the SETTINGS_KEYS array at the
|
||||
// top of the file.
|
||||
// This is to ensure that application settings remain documented.
|
||||
if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings key does not include the key " + key);
|
||||
if(!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
|
||||
|
||||
state.settings[key] = value;
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user