btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 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
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

72
pages/index.vue
View File

@@ -162,40 +162,44 @@
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button> <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
</li> </li>
</ul> </ul>
<ul v-for="entry in history"> <virtual-list class="virtual-list" :size="88" :remain="Math.min(5, history.length)">
<li> <ul v-for="entry in history" :key="entry.millis">
<label for="time">Time</label> <li>
<input name="time" type="text" readonly :value="entry.time"> <label for="time">Time</label>
</li> <input name="time" type="text" readonly :value="entry.time">
<li class="method-list-item"> </li>
<label for="method">Method</label> <liclass="method-list-item">
<input name="method" type="text" readonly <label for="method">Method</label>
<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>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<script> <script>
import VirtualList from 'vue-virtual-scroll-list'
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'},
@@ -223,7 +227,8 @@
export default { export default {
components: { components: {
'pw-section': section 'pw-section': section,
VirtualList
}, },
data () { data () {
@@ -327,6 +332,19 @@
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')
} }
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({ this.$refs.response.$el.scrollIntoView({
behavior: 'smooth' behavior: 'smooth'
}) })