✨ Added History support

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">

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'
       })

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;
 }