Merge remote-tracking branch 'upstream/master'
This commit is contained in:
izerozlu
146
components/history.vue
Normal file
146
components/history.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<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" :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;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -3,7 +3,8 @@
|
||||
<label class="toggle" :class="{on: on}" ref="toggle">
|
||||
<span class="handle"></span>
|
||||
</label>
|
||||
<label class="caption"><slot /></label>
|
||||
<label class="caption">
|
||||
<slot /></label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -14,7 +15,7 @@
|
||||
$inactiveColor: var(--fg-color);
|
||||
|
||||
$inactiveHandleColor: $inactiveColor;
|
||||
$activeHandleColor: var(--fg-color);
|
||||
$activeHandleColor: var(--act-color);
|
||||
|
||||
$width: 50px;
|
||||
$height: 20px;
|
||||
@@ -27,7 +28,7 @@
|
||||
}
|
||||
|
||||
label.caption {
|
||||
margin-left: 5px;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -62,7 +63,7 @@
|
||||
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);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
&.on {
|
||||
@@ -75,24 +76,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</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"));
|
||||
}
|
||||
props: {
|
||||
'on': {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$refs.toggle.classList.toggle("on");
|
||||
this.$emit('change', this.$refs.toggle.classList.contains("on"));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
172
pages/index.vue
172
pages/index.vue
@@ -187,46 +187,12 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
<pw-section class="gray" label="History">
|
||||
<ul>
|
||||
<li>
|
||||
<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)">
|
||||
<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 history from "../components/history";
|
||||
import section from "../components/section";
|
||||
|
||||
const statusCategories = [{
|
||||
@@ -261,7 +227,6 @@
|
||||
className: 'missing-data-response'
|
||||
}
|
||||
];
|
||||
|
||||
const parseHeaders = xhr => {
|
||||
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
|
||||
const headerMap = {};
|
||||
@@ -274,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 {
|
||||
@@ -301,7 +266,6 @@
|
||||
headers: '',
|
||||
body: ''
|
||||
},
|
||||
history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [],
|
||||
previewEnabled: false
|
||||
}
|
||||
},
|
||||
@@ -309,16 +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); },
|
||||
hasRequestBody() {
|
||||
return ['POST', 'PUT', 'PATCH'].includes(this.method);
|
||||
},
|
||||
rawRequestBody() {
|
||||
const {
|
||||
bodyParams
|
||||
@@ -370,33 +333,18 @@
|
||||
}
|
||||
},
|
||||
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'
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
async sendRequest() {
|
||||
if (!this.isValidURL) {
|
||||
alert('Please check the formatting of the URL.');
|
||||
@@ -418,8 +366,8 @@
|
||||
this.response.body = 'Loading...';
|
||||
|
||||
const auth = this.auth === 'Basic' ? {
|
||||
username: this.httpUser,
|
||||
password: this.httpPassword
|
||||
username: this.httpUser,
|
||||
password: this.httpPassword
|
||||
} : null;
|
||||
|
||||
let headers = {};
|
||||
@@ -430,65 +378,75 @@
|
||||
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
|
||||
|
||||
Object.assign(headers, {
|
||||
'Content-Length': requestBody.length,
|
||||
'Content-Type': `${this.contentType}; charset=utf-8`
|
||||
'Content-Length': requestBody.length,
|
||||
'Content-Type': `${this.contentType}; charset=utf-8`
|
||||
});
|
||||
}
|
||||
|
||||
// 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}`;
|
||||
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),
|
||||
// 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
|
||||
// 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
|
||||
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;
|
||||
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;
|
||||
// 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();
|
||||
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));
|
||||
// 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;
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
this.response.headers = error.response.headers;
|
||||
this.response.status = error.response.status;
|
||||
this.response.body = error.response.data;
|
||||
|
||||
this.response.status = error.message;
|
||||
this.response.body = "See JavaScript console (F12) for details.";
|
||||
// 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.";
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user