From dabb7c370a529d256dd071f746f98d86905a22df Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Sat, 24 Aug 2019 23:52:54 +0300
Subject: [PATCH] Virtualscroll added for the history fieldset.

---
 package.json    |  1 +
 pages/index.vue | 72 ++++++++++++++++++++++++++++++-------------------
 2 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 0230a2b48..fce0bb2d3 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/pages/index.vue b/pages/index.vue
index 135aa4832..0802e307b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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'
               })