Entry status color added.

assets/css/styles.scss

@@ -269,4 +269,17 @@ ol li {
 
 .sv-error-response {
   background-color: #b71c1c;
-}
+}
+
+fieldset#history {
+  .method-list-item {
+    position: relative;
+
+    span {
+      position: absolute;
+      top: 32px;
+      right: 8px;
+      color: #E0E0E0;
+    }
+  }
+}

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>
+</script>

pages/index.vue

@@ -156,17 +156,19 @@
           <label for="time">Time</label>
           <input name="time" type="text" readonly :value="entry.time">
         </li>
-        <li>
+        <li class="method-list-item">
-          <label for="name">Method</label>
+          <label for="method">Method</label>
-          <input name="name" type="text" readonly :value="entry.method">
+          <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>
+          <label for="url">URL</label>
-          <input name="name" type="text" readonly :value="entry.url">
+          <input name="url" type="text" readonly :value="entry.url">
         </li>
         <li>
-          <label for="name">Path</label>
+          <label for="path">Path</label>
-          <input name="name" type="text" readonly :value="entry.path">
+          <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 statusCategories = [
-      const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
+        {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
-      const headerMap = {};
+        {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
-      headers.forEach(line => {
+        {name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'},
-          const parts = line.split(': ');
+        {name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'},
-          const header = parts.shift().toLowerCase();
+        {name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'},
-          const value = parts.join(': ');
+      ];
-          headerMap[header] = value
-      });
-      return headerMap
-  };
 
-  import section from "../components/section";
 
-  export default {
+      const parseHeaders = xhr => {
-    components: {
+          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 [
+            return findStatusGroup(this.response.status);
-              {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));
           },
           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
+                this.response.status = xhr.status
-                  const headers = this.response.headers = parseHeaders(xhr)
+                const headers = this.response.headers = parseHeaders(xhr)
-                  if ((headers['content-type'] || '').startsWith('application/json')) {
+                if ((headers['content-type'] || '').startsWith('application/json')) {
-                      this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
+                  this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
-                  } else {
+                } else {
-                      this.response.body = xhr.responseText
+                  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