Merge remote-tracking branch 'liyasthomas/master'
This commit is contained in:
Igor Guastalla de Lima
@@ -3,7 +3,7 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_size = 2
|
||||
indent_size = 1
|
||||
indent_style = space
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -354,3 +359,21 @@ fieldset#history {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#action {
|
||||
#hidden-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
|
||||
#hidden-message {
|
||||
display: block;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
151
components/history.vue
Normal file
151
components/history.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<pw-section class="gray" label="History">
|
||||
<ul>
|
||||
<li id="filter-history">
|
||||
<label for="filter-history-input">Search History</label>
|
||||
<input id="filter-history-input" type="text" :disabled="history.length === 0 || isClearingHistory" v-model="filterText">
|
||||
</li>
|
||||
</ul>
|
||||
<virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">
|
||||
<ul v-for="entry in filteredHistory" :key="entry.millis" class="entry">
|
||||
<li>
|
||||
<label :for="'time#' + entry.millis">Time</label>
|
||||
<input :id="'time#' + entry.millis" type="text" readonly :value="entry.time" :title="entry.date">
|
||||
</li>
|
||||
<li class="method-list-item">
|
||||
<label :for="'time#' + entry.millis">Method</label>
|
||||
<input :id="'method#' + entry.millis" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
|
||||
<span class="entry-status-code">{{entry.status}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<label :for="'url#' + entry.millis">URL</label>
|
||||
<input :id="'url#' + entry.millis" type="text" readonly :value="entry.url">
|
||||
</li>
|
||||
<li>
|
||||
<label :for="'path#' + entry.millis">Path</label>
|
||||
<input :id="'path#' + entry.millis" type="text" readonly :value="entry.path">
|
||||
</li>
|
||||
<li>
|
||||
<label :for="'delete-button#' + entry.millis" class="hide-on-small-screen"> </label>
|
||||
<button :id="'delete-button#' + entry.millis" :disabled="isClearingHistory" @click="deleteHistory(entry)">
|
||||
Delete
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<label :for="'use-button#' + entry.millis" class="hide-on-small-screen"> </label>
|
||||
<button :id="'use-button#' + entry.millis" :disabled="isClearingHistory" @click="useHistory(entry)">
|
||||
Use
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</virtual-list>
|
||||
<ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
|
||||
<li>
|
||||
<label>Nothing found for "{{filterText}}"</label>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-if="!isClearingHistory">
|
||||
<button id="clear-history-button" :class="{ disabled: history.length === 0 }" @click="enableHistoryClearing">
|
||||
Clear History
|
||||
</button>
|
||||
</li>
|
||||
<li v-else>
|
||||
<div class="flex-wrap">
|
||||
<label for="clear-history-button">Are you sure?</label>
|
||||
<div>
|
||||
<button id="confirm-clear-history-button" @click="clearHistory">
|
||||
Yes
|
||||
</button>
|
||||
<button id="reject-clear-history-button" @click="disableHistoryClearing">
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</template>
|
||||
<script>
|
||||
import VirtualList from 'vue-virtual-scroll-list'
|
||||
import section from "./section";
|
||||
import {findStatusGroup} from "../pages/index";
|
||||
|
||||
const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': section,
|
||||
VirtualList
|
||||
},
|
||||
data() {
|
||||
const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
|
||||
return {
|
||||
history: localStorageHistory || [],
|
||||
filterText: '',
|
||||
showFilter: false,
|
||||
isClearingHistory: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredHistory() {
|
||||
return this.history.filter(entry => {
|
||||
const filterText = this.filterText.toLowerCase();
|
||||
return Object.keys(entry).some(key => {
|
||||
let value = entry[key];
|
||||
value = typeof value !== 'string' ? value.toString() : value;
|
||||
return value.toLowerCase().includes(filterText);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearHistory() {
|
||||
this.history = [];
|
||||
this.filterText = '';
|
||||
this.disableHistoryClearing();
|
||||
updateOnLocalStorage('history', this.history);
|
||||
},
|
||||
useHistory(entry) {
|
||||
this.$emit('useHistory', entry);
|
||||
},
|
||||
findEntryStatus(entry) {
|
||||
const foundStatusGroup = findStatusGroup(entry.status);
|
||||
return foundStatusGroup || {
|
||||
className: ''
|
||||
};
|
||||
},
|
||||
deleteHistory(entry) {
|
||||
this.history.splice(this.history.indexOf(entry), 1);
|
||||
if (this.history.length === 0) {
|
||||
this.filterText = '';
|
||||
}
|
||||
updateOnLocalStorage('history', this.history);
|
||||
},
|
||||
addEntry(entry) {
|
||||
this.history.push(entry);
|
||||
updateOnLocalStorage('history', this.history);
|
||||
},
|
||||
enableHistoryClearing() {
|
||||
this.isClearingHistory = true;
|
||||
},
|
||||
disableHistoryClearing() {
|
||||
this.isClearingHistory = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
[readonly] {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.virtual-list.filled {
|
||||
min-height: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
101
components/toggle.vue
Normal file
101
components/toggle.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<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(--act-color);
|
||||
|
||||
$width: 50px;
|
||||
$height: 20px;
|
||||
$handleSpacing: 4px;
|
||||
|
||||
$transition: all 0.2s ease-in-out;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label.caption {
|
||||
margin-left: 4px;
|
||||
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",
|
||||
|
||||
247
pages/index.vue
247
pages/index.vue
@@ -16,15 +16,15 @@
|
||||
</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>
|
||||
<button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
|
||||
<button id="action" name="action" @click="sendRequest" :disabled="!isValidURL" ref="sendButton">Send <span id="hidden-message">Again</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
@@ -187,49 +187,15 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
<pw-section class="gray" label="History">
|
||||
<ul>
|
||||
<li>
|
||||
<button v-bind: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)">
|
||||
<ul v-for="entry in history" :key="entry.millis" class="entry">
|
||||
<li>
|
||||
<label for="time">Time</label>
|
||||
<input name="time" type="text" readonly :value="entry.time" :title="entry.date">
|
||||
</li>
|
||||
<li class="method-list-item">
|
||||
<label for="method">Method</label>
|
||||
<input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
|
||||
<span class="entry-status-code">{{entry.status}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input name="url" type="text" readonly :value="entry.url">
|
||||
</li>
|
||||
<li>
|
||||
<label for="path">Path</label>
|
||||
<input name="path" type="text" readonly :value="entry.path">
|
||||
</li>
|
||||
<li>
|
||||
<label for="delete" class="hide-on-small-screen"> </label>
|
||||
<button name="delete" @click="deleteHistory(entry)">Delete</button>
|
||||
</li>
|
||||
<li>
|
||||
<label for="use" class="hide-on-small-screen"> </label>
|
||||
<button name="use" @click="useHistory(entry)">Use</button>
|
||||
</li>
|
||||
</ul>
|
||||
</virtual-list>
|
||||
</pw-section>
|
||||
<history @useHistory="handleUseHistory" ref="historyComponent" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import VirtualList from 'vue-virtual-scroll-list'
|
||||
import section from "../components/section";
|
||||
|
||||
const statusCategories = [{
|
||||
<script>
|
||||
import history from "../components/history";
|
||||
import section from "../components/section";
|
||||
|
||||
const statusCategories = [{
|
||||
name: 'informational',
|
||||
statusCodeRegex: new RegExp(/[1][0-9]+/),
|
||||
className: 'info-response'
|
||||
@@ -273,12 +239,12 @@
|
||||
return headerMap
|
||||
|
||||
};
|
||||
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
|
||||
export const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': section,
|
||||
VirtualList
|
||||
history
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -300,7 +266,6 @@
|
||||
headers: '',
|
||||
body: ''
|
||||
},
|
||||
history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [],
|
||||
previewEnabled: false
|
||||
}
|
||||
},
|
||||
@@ -308,15 +273,15 @@
|
||||
statusCategory() {
|
||||
return findStatusGroup(this.response.status);
|
||||
},
|
||||
noHistoryToClear() {
|
||||
return this.history.length === 0;
|
||||
},
|
||||
isValidURL() {
|
||||
const protocol = '^(https?:\\/\\/)?';
|
||||
const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
|
||||
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
|
||||
@@ -368,37 +333,28 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findEntryStatus(entry) {
|
||||
let foundStatusGroup = findStatusGroup(entry.status);
|
||||
return foundStatusGroup || {
|
||||
className: ''
|
||||
};
|
||||
},
|
||||
deleteHistory(entry) {
|
||||
this.history.splice(this.history.indexOf(entry), 1)
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history))
|
||||
},
|
||||
clearHistory() {
|
||||
this.history = []
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history))
|
||||
},
|
||||
useHistory({
|
||||
handleUseHistory({
|
||||
method,
|
||||
url,
|
||||
path
|
||||
}) {
|
||||
this.method = method
|
||||
this.url = url
|
||||
this.path = path
|
||||
this.method = method;
|
||||
this.url = url;
|
||||
this.path = path;
|
||||
this.$refs.request.$el.scrollIntoView({
|
||||
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 +364,92 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
const d = new Date().toLocaleDateString();
|
||||
const t = new Date().toLocaleTimeString();
|
||||
this.history = [{
|
||||
status: xhr.status,
|
||||
date: d,
|
||||
time: t,
|
||||
|
||||
// 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,
|
||||
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;
|
||||
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();
|
||||
|
||||
// Addition of an entry to the history component.
|
||||
const entry = {
|
||||
status,
|
||||
date,
|
||||
time,
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
};
|
||||
this.$refs.historyComponent.addEntry(entry);
|
||||
})();
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
this.response.headers = error.response.headers;
|
||||
this.response.status = error.response.status;
|
||||
this.response.body = error.response.data;
|
||||
|
||||
// Addition of an entry to the history component.
|
||||
const entry = {
|
||||
status: this.response.status,
|
||||
date: new Date().toLocaleDateString(),
|
||||
time: new Date().toLocaleTimeString(),
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
};
|
||||
this.$refs.historyComponent.addEntry(entry);
|
||||
return;
|
||||
}
|
||||
|
||||
this.response.status = error.message;
|
||||
this.response.body = "See JavaScript console (F12) for details.";
|
||||
}
|
||||
},
|
||||
|
||||
addRequestHeader() {
|
||||
this.headers.push({
|
||||
key: '',
|
||||
@@ -528,7 +525,35 @@
|
||||
this.$refs.previewFrame.setAttribute('data-previewing-url', this.url);
|
||||
}
|
||||
}
|
||||
},
|
||||
setRouteQueries(queries) {
|
||||
for (const key in queries) {
|
||||
if (this[key]) this[key] = queries[key];
|
||||
}
|
||||
},
|
||||
observeRequestButton: function () {
|
||||
let isTheInitialIntersection = true;
|
||||
const sendButtonElement = this.$refs.sendButton;
|
||||
const requestElement = this.$refs.request.$el;
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
if (!isTheInitialIntersection) {
|
||||
sendButtonElement.classList.toggle('show');
|
||||
} else {
|
||||
isTheInitialIntersection = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {threshold: 1});
|
||||
observer.observe(requestElement);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
|
||||
},
|
||||
mounted() {
|
||||
this.observeRequestButton();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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