mirror of
https://github.com/hoppscotch/hoppscotch
synced 2024-11-21 22:50:51 +00:00
✨ Added History support
This commit is contained in:
parent
a3ed07b3dc
commit
f0962e112a
27
index.html
27
index.html
@ -104,6 +104,33 @@
|
||||
</ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="history hidden">
|
||||
<legend v-on:click="collapse">History ⭥</legend>
|
||||
<div class="collapsible">
|
||||
<ul v-for="entry in history">
|
||||
<li>
|
||||
<label for="use">{{entry.time}}</label>
|
||||
<button name="use" @click="useHistory(entry)">Use</button>
|
||||
</li>
|
||||
<li>
|
||||
<label for="name">Method</label>
|
||||
<input name="name" type="text" readonly :value="entry.method">
|
||||
</li>
|
||||
<li>
|
||||
<label for="name">URL</label>
|
||||
<input name="name" type="text" readonly :value="entry.url">
|
||||
</li>
|
||||
<li>
|
||||
<label for="name">Path</label>
|
||||
<input name="name" type="text" readonly :value="entry.path">
|
||||
</li>
|
||||
<li>
|
||||
<label for="delete"> </label>
|
||||
<button name="delete" @click="deleteHistory(entry)">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
|
||||
<legend v-on:click="collapse">Request Body ⭥</legend>
|
||||
<div class="collapsible">
|
||||
|
23
script.js
23
script.js
@ -25,7 +25,8 @@ const app = new Vue({
|
||||
status: '',
|
||||
headers: '',
|
||||
body: ''
|
||||
}
|
||||
},
|
||||
history: []
|
||||
},
|
||||
computed: {
|
||||
rawRequestBody() {
|
||||
@ -65,6 +66,18 @@ const app = new Vue({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteHistory(entry) {
|
||||
this.history.splice(this.history.indexOf(entry), 1)
|
||||
},
|
||||
useHistory({
|
||||
method,
|
||||
url,
|
||||
path
|
||||
}) {
|
||||
this.method = method
|
||||
this.url = url
|
||||
this.path = path
|
||||
},
|
||||
collapse({
|
||||
target
|
||||
}) {
|
||||
@ -72,6 +85,14 @@ const app = new Vue({
|
||||
document.getElementsByClassName(el)[0].classList.toggle('hidden')
|
||||
},
|
||||
sendRequest() {
|
||||
const d = new Date()
|
||||
const n = d.toLocaleTimeString()
|
||||
this.history.push({
|
||||
time: n,
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
})
|
||||
this.$refs.response.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
|
10
style.css
10
style.css
@ -88,7 +88,7 @@ fieldset {
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #57b5f9;
|
||||
color: var(--fg-color);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -105,6 +105,14 @@ fieldset.request legend {
|
||||
color: #57b5f9;
|
||||
}
|
||||
|
||||
fieldset.history {
|
||||
border-color: #9B9B9B;
|
||||
}
|
||||
|
||||
fieldset.history legend {
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
fieldset.authentication {
|
||||
border-color: #B8E986;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user