From 1a89a1b5f54b3d39cb296b27a5d556ade063e828 Mon Sep 17 00:00:00 2001
From: izerozlu <izerozlu@gmail.com>
Date: Sun, 25 Aug 2019 11:37:21 +0300
Subject: [PATCH] Entry status color added.

---
 assets/css/styles.scss |  15 +++++-
 components/section.vue |   4 +-
 pages/index.vue        | 104 +++++++++++++++++++++++------------------
 3 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 6fc3f46ab..7007764c7 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -269,4 +269,17 @@ ol li {
 
 .sv-error-response {
   background-color: #b71c1c;
-}
\ No newline at end of file
+}
+
+fieldset#history {
+  .method-list-item {
+    position: relative;
+
+    span {
+      position: absolute;
+      top: 32px;
+      right: 8px;
+      color: #E0E0E0;
+    }
+  }
+}
diff --git a/components/section.vue b/components/section.vue
index 4d2af5b5e..5f290c4e1 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -1,5 +1,5 @@
 <template>
-    <fieldset :class="{ 'no-colored-frames': noFrameColors }">
+    <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
         <legend @click.prevent="collapse">{{ label }} ↕</legend>
         <div class="collapsible" :class="{ hidden: collapsed }">
             <slot />
@@ -44,4 +44,4 @@
         }
 
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index bc1c3f052..d40c5d82f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -156,17 +156,19 @@
           <label for="time">Time</label>
           <input name="time" type="text" readonly :value="entry.time">
         </li>
-        <li>
-          <label for="name">Method</label>
-          <input name="name" type="text" readonly :value="entry.method">
+        <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="name">URL</label>
-          <input name="name" type="text" readonly :value="entry.url">
+          <label for="url">URL</label>
+          <input name="url" type="text" readonly :value="entry.url">
         </li>
         <li>
-          <label for="name">Path</label>
-          <input name="name" type="text" readonly :value="entry.path">
+          <label for="path">Path</label>
+          <input name="path" type="text" readonly :value="entry.path">
         </li>
         <li>
           <label for="delete">&nbsp;</label>
@@ -183,22 +185,33 @@
 </template>
 
 <script>
-  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 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'},
+      ];
 
-  import section from "../components/section";
 
-  export default {
-    components: {
+      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));
+
+      import section from "../components/section";
+
+      export default {
+      components: {
       'pw-section': section
     },
 
@@ -224,13 +237,7 @@
       },
       computed: {
           statusCategory(){
-            return [
-              {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'},
-            ].find(status => status.statusCodeRegex.test(this.response.status));
+            return findStatusGroup(this.response.status);
           },
           noHistoryToClear() {
               return this.history.length === 0;
@@ -280,6 +287,9 @@
           }
       },
       methods: {
+          findEntryStatus(entry){
+            return findStatusGroup(entry.status);
+          },
           deleteHistory(entry) {
               this.history.splice(this.history.indexOf(entry), 1)
               window.localStorage.setItem('history', JSON.stringify(this.history))
@@ -301,17 +311,6 @@
               })
           },
           sendRequest() {
-              if (!this.isValidURL) {
-                  alert('Please check the formatting of the URL');
-                  return
-              }
-              const n = new Date().toLocaleTimeString()
-              this.history = [{
-                  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.$el.classList.contains('hidden')) {
                   this.$refs.response.$el.classList.toggle('hidden')
@@ -337,13 +336,26 @@
                   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
-                  }
+                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]
               }
               xhr.onerror = e => {
                   this.response.status = xhr.status