From 515ea7e83dfbb37f64477ec327055b788b3f516d Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Tue, 27 Aug 2019 13:33:31 +0300
Subject: [PATCH] Virtual List added for history section.

---
 pages/index.vue | 214 ++++++++++++++++++++++--------------------------
 1 file changed, 100 insertions(+), 114 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 0802e307b..8280c7d44 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -163,74 +163,72 @@
         </li>
       </ul>
       <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 v-for="entry in history" :key="entry.millis">
+          <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
+                   :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>
-        </virtual-list>
+      </virtual-list>
     </pw-section>
 
   </div>
 </template>
 
 <script>
-	  import VirtualList from 'vue-virtual-scroll-list'
+  import VirtualList from 'vue-virtual-scroll-list'
+  import section from "../components/section";
 
-      const statusCategories = [
-        {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
-        {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-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: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
-      ];
+  const statusCategories = [
+    {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
+    {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-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: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
+  ];
 
 
-      const parseHeaders = xhr => {
-          const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
-          const headerMap = {};
-          headers.forEach(line => {
-              const parts = line.split(': ');
-              const header = parts.shift().toLowerCase();
-              const value = parts.join(': ');
-              headerMap[header] = value
-          });
-          return headerMap
-      };
+  const parseHeaders = xhr => {
+      const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
+      const headerMap = {};
+      headers.forEach(line => {
+          const parts = line.split(': ');
+          const header = parts.shift().toLowerCase();
+          const value = parts.join(': ');
+          headerMap[header] = value
+      });
+      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: {
       'pw-section': section,
-	      VirtualList
+      VirtualList
     },
-
       data () {
           return {
               method: 'GET',
@@ -301,12 +299,13 @@
                             key,
                             value
                         }) => `${key}=${encodeURIComponent(value)}`).join('&')
-              return result == '' ? '' : `?${result}`
+              return result === '' ? '' : `?${result}`
           }
       },
       methods: {
           findEntryStatus(entry){
-            return findStatusGroup(entry.status);
+            let foundStatusGroup = findStatusGroup(entry.status);
+            return foundStatusGroup || {className: ''};
           },
           deleteHistory(entry) {
               this.history.splice(this.history.indexOf(entry), 1)
@@ -329,69 +328,56 @@
               })
           },
           sendRequest() {
-              if (this.$refs.response.$el.classList.contains('hidden')) {
-                  this.$refs.response.$el.classList.toggle('hidden')
+            if (this.$refs.response.$el.classList.contains('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 = [{
-                  millis: now.getTime(),
-                  time: n,
-                  method: this.method,
-                  url: this.url,
-                  path: this.path
+                status: xhr.status,
+                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'
-              })
-              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
-              }
+            }
+            xhr.onerror = e => {
+              this.response.status = xhr.status
+              this.response.body = xhr.statusText
+            }
           },
           addRequestParam() {
               this.params.push({