btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Virtual List added for history section.

Browse Source
This commit is contained in:
izerozlu
2019-08-27 13:33:31 +03:00
parent dabb7c370a
commit 515ea7e83d
1 changed files with 100 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
pages/index.vue
View File

@@ -163,74 +163,72 @@
</li> </li>
</ul> </ul>
<virtual-list class="virtual-list" :size="88" :remain="Math.min(5, history.length)"> <virtual-list class="virtual-list" :size="88" :remain="Math.min(5, history.length)">
<ul v-for="entry in history" :key="entry.millis"> <ul v-for="entry in history" :key="entry.millis">
<li> <li>
<label for="time">Time</label> <label for="time">Time</label>
<input name="time" type="text" readonly :value="entry.time"> <input name="time" type="text" readonly :value="entry.time">
</li> </li>
<liclass="method-list-item"> <li class="method-list-item">
<label for="method">Method</label> <label for="method">Method</label>
<input name="method" type="text" readonly <input name="method" type="text" readonly
:value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}"> :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<span class="entry-status-code">{{entry.status}}</span> <span class="entry-status-code">{{entry.status}}</span>
</li> </li>
<li> <li>
<label for="url">URL</label> <label for="url">URL</label>
<input name="url" type="text" readonly :value="entry.url"> <input name="url" type="text" readonly :value="entry.url">
</li> </li>
<li> <li>
<label for="path">Path</label> <label for="path">Path</label>
<input name="path" type="text" readonly :value="entry.path"> <input name="path" type="text" readonly :value="entry.path">
</li> </li>
<li> <li>
<label for="delete">&nbsp;</label> <label for="delete">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button> <button name="delete" @click="deleteHistory(entry)">Delete</button>
</li> </li>
<li> <li>
<label for="use">&nbsp;</label> <label for="use">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button> <button name="use" @click="useHistory(entry)">Use</button>
</li> </li>
</ul> </ul>
</virtual-list> </virtual-list>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<script> <script>
import VirtualList from 'vue-virtual-scroll-list' import VirtualList from 'vue-virtual-scroll-list'
import section from "../components/section";
const statusCategories = [ const statusCategories = [
{name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'}, {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
{name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'}, {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
{name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'}, {name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'},
{name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'}, {name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'},
{name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'}, {name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
]; ];
const parseHeaders = xhr => { const parseHeaders = xhr => {
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/); const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
const headerMap = {}; const headerMap = {};
headers.forEach(line => { headers.forEach(line => {
const parts = line.split(': '); const parts = line.split(': ');
const header = parts.shift().toLowerCase(); const header = parts.shift().toLowerCase();
const value = parts.join(': '); const value = parts.join(': ');
headerMap[header] = value headerMap[header] = value
}); });
return headerMap return headerMap
}; };
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus)); const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
import section from "../components/section"; export default {
export default {
components: { components: {
'pw-section': section, 'pw-section': section,
VirtualList VirtualList
}, },
data () { data () {
return { return {
method: 'GET', method: 'GET',
@@ -301,12 +299,13 @@
key, key,
value value
}) => `${key}=${encodeURIComponent(value)}`).join('&') }) => `${key}=${encodeURIComponent(value)}`).join('&')
return result == '' ? '' : `?${result}` return result === '' ? '' : `?${result}`
} }
}, },
methods: { methods: {
findEntryStatus(entry){ findEntryStatus(entry){
return findStatusGroup(entry.status); let foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {className: ''};
}, },
deleteHistory(entry) { deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1) this.history.splice(this.history.indexOf(entry), 1)
@@ -329,69 +328,56 @@
}) })
}, },
sendRequest() { sendRequest() {
if (this.$refs.response.$el.classList.contains('hidden')) { if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden') this.$refs.response.$el.classList.toggle('hidden')
}
this.$refs.response.$el.scrollIntoView({
behavior: 'smooth'
})
this.response.status = 'Fetching...'
this.response.body = 'Loading...'
const xhr = new XMLHttpRequest()
const user = this.auth === 'Basic' ? this.httpUser : null
const pswd = this.auth === 'Basic' ? this.httpPassword : null
xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
if (this.auth === 'Bearer Token') {
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
}
if (this.method === 'POST' || this.method === 'PUT') {
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()
}
xhr.onload = e => {
this.response.status = xhr.status
const headers = this.response.headers = parseHeaders(xhr)
if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
} else {
this.response.body = xhr.responseText
} }
let now = new Date();
const n = now.toLocaleTimeString() if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
}
const n = new Date().toLocaleTimeString()
this.history = [{ this.history = [{
millis: now.getTime(), status: xhr.status,
time: n, time: n,
method: this.method, method: this.method,
url: this.url, url: this.url,
path: this.path path: this.path
}, ...this.history] }, ...this.history]
window.localStorage.setItem('history', JSON.stringify(this.history)) window.localStorage.setItem('history', JSON.stringify(this.history))
if (this.$refs.response.classList.contains('hidden')) { }
this.$refs.response.classList.toggle('hidden') xhr.onerror = e => {
} this.response.status = xhr.status
this.$refs.response.$el.scrollIntoView({ this.response.body = xhr.statusText
behavior: 'smooth' }
})
this.response.status = 'Fetching...'
this.response.body = 'Loading...'
const xhr = new XMLHttpRequest()
const user = this.auth === 'Basic' ? this.httpUser : null
const pswd = this.auth === 'Basic' ? this.httpPassword : null
xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
if (this.auth === 'Bearer Token') {
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
}
if (this.method === 'POST' || this.method === 'PUT') {
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()
}
xhr.onload = e => {
this.response.status = xhr.status
const headers = this.response.headers = parseHeaders(xhr)
if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
} else {
this.response.body = xhr.responseText
}
if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
}
const n = new Date().toLocaleTimeString()
this.history = [{
status: xhr.status,
time: n,
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
}
}, },
addRequestParam() { addRequestParam() {
this.params.push({ this.params.push({