mirrors/hoppscotch
1
0
Fork 0
mirror of https://github.com/hoppscotch/hoppscotch synced 2024-11-21 22:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Virtualscroll added for the history fieldset.

Browse Source
This commit is contained in:
izerozlu 2019-08-24 23:52:54 +03:00 committed by izerozlu
parent 71393a3cf7
commit dabb7c370a
2 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
"dependencies": {
"@nuxtjs/pwa": "^3.0.0-0",
"nuxt": "^2.0.0",
"vue-virtual-scroll-list": "^1.4.2",
"vuex-persist": "^2.0.1"
},
"devDependencies": {

72
pages/index.vue
View File

@ -162,40 +162,44 @@
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
</li>
</ul>
<ul v-for="entry in history">
<li>
<label for="time">Time</label>
<input name="time" type="text" readonly :value="entry.time">
</li>
<li class="method-list-item">
<label for="method">Method</label>
<input name="method" type="text" readonly
<virtual-list class="virtual-list" :size="88" :remain="Math.min(5, history.length)">
<ul v-for="entry in history" :key="entry.millis">
<li>
<label for="time">Time</label>
<input name="time" type="text" readonly :value="entry.time">
</li>
<liclass="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">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button>
</li>
<li>
<label for="use">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button>
</li>
</ul>
</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">&nbsp;</label>
<button name="delete" @click="deleteHistory(entry)">Delete</button>
</li>
<li>
<label for="use">&nbsp;</label>
<button name="use" @click="useHistory(entry)">Use</button>
</li>
</ul>
</virtual-list>
</pw-section>
</div>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list'
const statusCategories = [
{name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
{name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
@ -223,7 +227,8 @@
export default {
components: {
'pw-section': section
'pw-section': section,
VirtualList
},
data () {
@ -327,6 +332,19 @@
if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden')
}
let now = new Date();
const n = now.toLocaleTimeString()
this.history = [{
millis: now.getTime(),
time: n,
method: this.method,
url: this.url,
path: this.path
}, ...this.history]
window.localStorage.setItem('history', JSON.stringify(this.history))
if (this.$refs.response.classList.contains('hidden')) {
this.$refs.response.classList.toggle('hidden')
}
this.$refs.response.$el.scrollIntoView({
behavior: 'smooth'
})