From e077546f5d42b584a2d892706c4181292799bcc9 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 21 Aug 2019 20:28:37 +0530
Subject: [PATCH] :sparkles: Added option to collapseand expand fieldsets

---
 index.html | 252 ++++++++++++++++++++++++++++-------------------------
 script.js  |   6 ++
 style.css  |  22 +++--
 3 files changed, 151 insertions(+), 129 deletions(-)

diff --git a/index.html b/index.html
index 0450a1570..eca1052eb 100644
--- a/index.html
+++ b/index.html
@@ -76,134 +76,144 @@
       </div>
     </header>
     <fieldset class="request">
-      <legend>Request</legend>
-      <ul>
-        <li>
-          <label for="method">Method</label>
-          <select v-model="method">
-            <option>GET</option>
-            <option>POST</option>
-            <option>PUT</option>
-            <option>DELETE</option>
-            <option>OPTIONS</option>
-          </select>
-        </li>
-        <li>
-          <label for="url">URL</label>
-          <input v-model="url">
-        </li>
-        <li>
-          <label for="path">Path</label>
-          <input v-model="path">
-        </li>
-        <li>
-          <label for="action">Action</label>
-          <button name="action" @click="sendRequest">Send</button>
-        </li>
-      </ul>
+      <legend v-on:click="collapse">Request ⇵</legend>
+      <div class="collapsible">
+        <ul>
+          <li>
+            <label for="method">Method</label>
+            <select v-model="method">
+              <option>GET</option>
+              <option>POST</option>
+              <option>PUT</option>
+              <option>DELETE</option>
+              <option>OPTIONS</option>
+            </select>
+          </li>
+          <li>
+            <label for="url">URL</label>
+            <input v-model="url">
+          </li>
+          <li>
+            <label for="path">Path</label>
+            <input v-model="path">
+          </li>
+          <li>
+            <label for="action">Action</label>
+            <button name="action" @click="sendRequest">Send</button>
+          </li>
+        </ul>
+      </div>
     </fieldset>
     <fieldset class="authentication">
-      <legend>Authentication</legend>
-      <ul>
-        <li>
-          <label for="auth">Authentication Type</label>
-          <select v-model="auth">
-            <option>None</option>
-            <option>Basic</option>
-          </select>
-        </li>
-      </ul>
-      <ul v-if="auth === 'Basic'">
-        <li>
-          <label for="http_basic_user">User</label>
-          <input v-model="httpUser">
-        </li>
-        <li>
-          <label for="http_basic_passwd">Password</label>
-          <input v-model="httpPassword" type="password">
-        </li>
-      </ul>
+      <legend v-on:click="collapse">Authentication ⇵</legend>
+      <div class="collapsible">
+        <ul>
+          <li>
+            <label for="auth">Authentication Type</label>
+            <select v-model="auth">
+              <option>None</option>
+              <option>Basic</option>
+            </select>
+          </li>
+        </ul>
+        <ul v-if="auth === 'Basic'">
+          <li>
+            <label for="http_basic_user">User</label>
+            <input v-model="httpUser">
+          </li>
+          <li>
+            <label for="http_basic_passwd">Password</label>
+            <input v-model="httpPassword" type="password">
+          </li>
+        </ul>
+      </div>
     </fieldset>
     <fieldset class="parameters">
-      <legend>Parameters</legend>
-      <ol v-for="(param, index) in params">
-        <li>
-          <label :for="'param'+index">Key {{index + 1}}</label>
-          <input :name="'param'+index" v-model="param.key">
-        </li>
-        <li>
-          <label :for="'value'+index">Value {{index + 1}}</label>
-          <input :name="'value'+index" v-model="param.value">
-        </li>
-        <li>
-          <label for="param">Action</label>
-          <button name="param" @click="removeRequestParam(index)">Remove</button>
-        </li>
-      </ol>
-      <ul>
-        <li>
-          <label for="add">Action</label>
-          <button name="add" @click="addRequestParam">Add</button>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <label for="request">Parameter List</label>
-          <textarea name="request" rows="1" readonly>{{queryString || '(add atleast one parameter)'}}</textarea>
-        </li>
-      </ul>
+      <legend v-on:click="collapse">Parameters ⇵</legend>
+      <div class="collapsible">
+        <ol v-for="(param, index) in params">
+          <li>
+            <label :for="'param'+index">Key {{index + 1}}</label>
+            <input :name="'param'+index" v-model="param.key">
+          </li>
+          <li>
+            <label :for="'value'+index">Value {{index + 1}}</label>
+            <input :name="'value'+index" v-model="param.value">
+          </li>
+          <li>
+            <label for="param">Action</label>
+            <button name="param" @click="removeRequestParam(index)">Remove</button>
+          </li>
+        </ol>
+        <ul>
+          <li>
+            <label for="add">Action</label>
+            <button name="add" @click="addRequestParam">Add</button>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <label for="request">Parameter List</label>
+            <textarea name="request" rows="1" readonly>{{queryString || '(add atleast one parameter)'}}</textarea>
+          </li>
+        </ul>
+      </div>
     </fieldset>
     <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
-      <legend>Request Body</legend>
-      <ol v-for="(param, index) in bodyParams">
-        <li>
-          <label :for="'bparam'+index">Key {{index + 1}}</label>
-          <input :name="'bparam'+index" v-model="param.key">
-        </li>
-        <li>
-          <label :for="'bvalue'+index">Value {{index + 1}}</label>
-          <input :name="'bvalue'+index" v-model="param.value">
-        </li>
-        <li>
-          <label for="request">Action</label>
-          <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
-        </li>
-      </ol>
-      <ul>
-        <li>
-          <label>Content Type</label>
-          <select v-model="contentType">
-            <option>application/json</option>
-            <option>www-form/urlencoded</option>
-          </select>
-        </li>
-        <li>
-          <label for="addrequest">Action</label>
-          <button name="addrequest" @click="addRequestBodyParam">Add</button>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <label for="request">Parameter List</label>
-          <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add atleast one parameter)'}}</textarea>
-        </li>
-      </ul>
+      <legend v-on:click="collapse">Request Body ⇵</legend>
+      <div class="collapsible">
+        <ol v-for="(param, index) in bodyParams">
+          <li>
+            <label :for="'bparam'+index">Key {{index + 1}}</label>
+            <input :name="'bparam'+index" v-model="param.key">
+          </li>
+          <li>
+            <label :for="'bvalue'+index">Value {{index + 1}}</label>
+            <input :name="'bvalue'+index" v-model="param.value">
+          </li>
+          <li>
+            <label for="request">Action</label>
+            <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
+          </li>
+        </ol>
+        <ul>
+          <li>
+            <label>Content Type</label>
+            <select v-model="contentType">
+              <option>application/json</option>
+              <option>www-form/urlencoded</option>
+            </select>
+          </li>
+          <li>
+            <label for="addrequest">Action</label>
+            <button name="addrequest" @click="addRequestBodyParam">Add</button>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <label for="request">Parameter List</label>
+            <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add atleast one parameter)'}}</textarea>
+          </li>
+        </ul>
+      </div>
     </fieldset>
-    <fieldset class="5 response" id="response" ref="response">
-      <legend>Response</legend>
-      <ul>
-        <li>
-          <label for="status">Status</label>
-          <input name="status" type="text" readonly :value="response.status || 'waiting for request'">
-        </li>
-      </ul>
-      <ul v-for="(value, key) in response.headers">
-        <li>
-          <label for="value">{{key}}</label>
-          <input name="value" :value="value" readonly>
-        </li>
-      </ul>
-      <textarea rows="5" readonly>{{response.body}}</textarea>
+    <fieldset class="response" id="response" ref="response">
+      <legend v-on:click="collapse">Response ⇵</legend>
+      <div class="collapsible">
+        <ul>
+          <li>
+            <label for="status">Status</label>
+            <input name="status" type="text" readonly :value="response.status || 'waiting for request'">
+          </li>
+        </ul>
+        <ul v-for="(value, key) in response.headers">
+          <li>
+            <label for="value">{{key}}</label>
+            <input name="value" :value="value" readonly>
+          </li>
+        </ul>
+        <textarea rows="5" readonly>{{response.body}}</textarea>
+      </div>
     </fieldset>
     <footer>
       <a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
diff --git a/script.js b/script.js
index 059dff780..544a6e31c 100644
--- a/script.js
+++ b/script.js
@@ -65,6 +65,12 @@ const app = new Vue({
     }
   },
   methods: {
+    collapse({
+      target
+    }) {
+      const el = target.parentNode.className
+      document.getElementsByClassName(el)[0].classList.toggle('hidden')
+    },
     sendRequest() {
       this.$refs.response.scrollIntoView({
         behavior: 'smooth'
diff --git a/style.css b/style.css
index 312fb2881..82c796871 100644
--- a/style.css
+++ b/style.css
@@ -92,6 +92,7 @@ fieldset {
 legend {
   color: #57b5f9;
   font-weight: 700;
+  cursor: pointer;
 }
 
 fieldset textarea {
@@ -138,19 +139,23 @@ fieldset.response legend {
   color: #C198FB;
 }
 
+.hidden .collapsible {
+  display: none;
+}
+
 select,
 input,
 option,
 textarea {
-  background-color: #000;
-  border-radius: 4px;
-  font-size: 18px;
-  padding: 8px 16px;
-  color: var(--fg-color);
   margin: 4px;
-  font-family: monospace;
-  font-weight: 700;
+  padding: 8px 16px;
   width: calc(100% - 8px);
+  border-radius: 4px;
+  background-color: #000;
+  color: var(--fg-color);
+  font-weight: 700;
+  font-size: 18px;
+  font-family: monospace;
 }
 
 label {
@@ -159,10 +164,10 @@ label {
 
 ul,
 ol {
+  display: flex;
   margin: 8px 0 0;
   padding: 0;
   list-style-type: none;
-  display: flex;
 }
 
 ul li,
@@ -183,3 +188,4 @@ ol li {
   ol li {
     display: flex;
   }
+}