From f0962e112a7c8e30930542b3632a98e9617c84dd Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 22 Aug 2019 15:45:27 +0530
Subject: [PATCH] :sparkles: Added History support

---
 index.html | 27 +++++++++++++++++++++++++++
 script.js  | 23 ++++++++++++++++++++++-
 style.css  | 10 +++++++++-
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 612deda90..6e0827644 100644
--- a/index.html
+++ b/index.html
@@ -104,6 +104,33 @@
         </ul>
       </div>
     </fieldset>
+    <fieldset class="history hidden">
+      <legend v-on:click="collapse">History ⭥</legend>
+      <div class="collapsible">
+        <ul v-for="entry in history">
+          <li>
+            <label for="use">{{entry.time}}</label>
+            <button name="use" @click="useHistory(entry)">Use</button>
+          </li>
+          <li>
+            <label for="name">Method</label>
+            <input name="name" type="text" readonly :value="entry.method">
+          </li>
+          <li>
+            <label for="name">URL</label>
+            <input name="name" type="text" readonly :value="entry.url">
+          </li>
+          <li>
+            <label for="name">Path</label>
+            <input name="name" type="text" readonly :value="entry.path">
+          </li>
+          <li>
+            <label for="delete">&nbsp;</label>
+            <button name="delete" @click="deleteHistory(entry)">Delete</button>
+          </li>
+        </ul>
+      </div>
+    </fieldset>
     <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
       <legend v-on:click="collapse">Request Body ⭥</legend>
       <div class="collapsible">
diff --git a/script.js b/script.js
index ec81d1c22..6e2b8b431 100644
--- a/script.js
+++ b/script.js
@@ -25,7 +25,8 @@ const app = new Vue({
       status: '',
       headers: '',
       body: ''
-    }
+    },
+    history: []
   },
   computed: {
     rawRequestBody() {
@@ -65,6 +66,18 @@ const app = new Vue({
     }
   },
   methods: {
+    deleteHistory(entry) {
+      this.history.splice(this.history.indexOf(entry), 1)
+    },
+    useHistory({
+      method,
+      url,
+      path
+    }) {
+      this.method = method
+      this.url = url
+      this.path = path
+    },
     collapse({
       target
     }) {
@@ -72,6 +85,14 @@ const app = new Vue({
       document.getElementsByClassName(el)[0].classList.toggle('hidden')
     },
     sendRequest() {
+      const d = new Date()
+      const n = d.toLocaleTimeString()
+      this.history.push({
+        time: n,
+        method: this.method,
+        url: this.url,
+        path: this.path
+      })
       this.$refs.response.scrollIntoView({
         behavior: 'smooth'
       })
diff --git a/style.css b/style.css
index d2762335b..ac167f0c9 100644
--- a/style.css
+++ b/style.css
@@ -88,7 +88,7 @@ fieldset {
 }
 
 legend {
-  color: #57b5f9;
+  color: var(--fg-color);
   font-weight: 700;
   cursor: pointer;
 }
@@ -105,6 +105,14 @@ fieldset.request legend {
   color: #57b5f9;
 }
 
+fieldset.history {
+  border-color: #9B9B9B;
+}
+
+fieldset.history legend {
+  color: #9B9B9B;
+}
+
 fieldset.authentication {
   border-color: #B8E986;
 }