btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ Added option to collapseand expand fieldsets

Browse Source
This commit is contained in:
liyasthomas
2019-08-21 20:28:37 +05:30
parent f85a15f85e
commit e077546f5d
3 changed files with 151 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
index.html
View File

@@ -76,134 +76,144 @@
</div> </div>
</header> </header>
<fieldset class="request"> <fieldset class="request">
<legend>Request</legend> <legend v-on:click="collapse">Request ⇵</legend>
<ul> <div class="collapsible">
<li> <ul>
<label for="method">Method</label> <li>
<select v-model="method"> <label for="method">Method</label>
<option>GET</option> <select v-model="method">
<option>POST</option> <option>GET</option>
<option>PUT</option> <option>POST</option>
<option>DELETE</option> <option>PUT</option>
<option>OPTIONS</option> <option>DELETE</option>
</select> <option>OPTIONS</option>
</li> </select>
<li> </li>
<label for="url">URL</label> <li>
<input v-model="url"> <label for="url">URL</label>
</li> <input v-model="url">
<li> </li>
<label for="path">Path</label> <li>
<input v-model="path"> <label for="path">Path</label>
</li> <input v-model="path">
<li> </li>
<label for="action">Action</label> <li>
<button name="action" @click="sendRequest">Send</button> <label for="action">Action</label>
</li> <button name="action" @click="sendRequest">Send</button>
</ul> </li>
</ul>
</div>
</fieldset> </fieldset>
<fieldset class="authentication"> <fieldset class="authentication">
<legend>Authentication</legend> <legend v-on:click="collapse">Authentication ⇵</legend>
<ul> <div class="collapsible">
<li> <ul>
<label for="auth">Authentication Type</label> <li>
<select v-model="auth"> <label for="auth">Authentication Type</label>
<option>None</option> <select v-model="auth">
<option>Basic</option> <option>None</option>
</select> <option>Basic</option>
</li> </select>
</ul> </li>
<ul v-if="auth === 'Basic'"> </ul>
<li> <ul v-if="auth === 'Basic'">
<label for="http_basic_user">User</label> <li>
<input v-model="httpUser"> <label for="http_basic_user">User</label>
</li> <input v-model="httpUser">
<li> </li>
<label for="http_basic_passwd">Password</label> <li>
<input v-model="httpPassword" type="password"> <label for="http_basic_passwd">Password</label>
</li> <input v-model="httpPassword" type="password">
</ul> </li>
</ul>
</div>
</fieldset> </fieldset>
<fieldset class="parameters"> <fieldset class="parameters">
<legend>Parameters</legend> <legend v-on:click="collapse">Parameters ⇵</legend>
<ol v-for="(param, index) in params"> <div class="collapsible">
<li> <ol v-for="(param, index) in params">
<label :for="'param'+index">Key {{index + 1}}</label> <li>
<input :name="'param'+index" v-model="param.key"> <label :for="'param'+index">Key {{index + 1}}</label>
</li> <input :name="'param'+index" v-model="param.key">
<li> </li>
<label :for="'value'+index">Value {{index + 1}}</label> <li>
<input :name="'value'+index" v-model="param.value"> <label :for="'value'+index">Value {{index + 1}}</label>
</li> <input :name="'value'+index" v-model="param.value">
<li> </li>
<label for="param">Action</label> <li>
<button name="param" @click="removeRequestParam(index)">Remove</button> <label for="param">Action</label>
</li> <button name="param" @click="removeRequestParam(index)">Remove</button>
</ol> </li>
<ul> </ol>
<li> <ul>
<label for="add">Action</label> <li>
<button name="add" @click="addRequestParam">Add</button> <label for="add">Action</label>
</li> <button name="add" @click="addRequestParam">Add</button>
</ul> </li>
<ul> </ul>
<li> <ul>
<label for="request">Parameter List</label> <li>
<textarea name="request" rows="1" readonly>{{queryString || '(add atleast one parameter)'}}</textarea> <label for="request">Parameter List</label>
</li> <textarea name="request" rows="1" readonly>{{queryString || '(add atleast one parameter)'}}</textarea>
</ul> </li>
</ul>
</div>
</fieldset> </fieldset>
<fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'"> <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
<legend>Request Body</legend> <legend v-on:click="collapse">Request Body ⇵</legend>
<ol v-for="(param, index) in bodyParams"> <div class="collapsible">
<li> <ol v-for="(param, index) in bodyParams">
<label :for="'bparam'+index">Key {{index + 1}}</label> <li>
<input :name="'bparam'+index" v-model="param.key"> <label :for="'bparam'+index">Key {{index + 1}}</label>
</li> <input :name="'bparam'+index" v-model="param.key">
<li> </li>
<label :for="'bvalue'+index">Value {{index + 1}}</label> <li>
<input :name="'bvalue'+index" v-model="param.value"> <label :for="'bvalue'+index">Value {{index + 1}}</label>
</li> <input :name="'bvalue'+index" v-model="param.value">
<li> </li>
<label for="request">Action</label> <li>
<button name="request" @click="removeRequestBodyParam(index)">Remove</button> <label for="request">Action</label>
</li> <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
</ol> </li>
<ul> </ol>
<li> <ul>
<label>Content Type</label> <li>
<select v-model="contentType"> <label>Content Type</label>
<option>application/json</option> <select v-model="contentType">
<option>www-form/urlencoded</option> <option>application/json</option>
</select> <option>www-form/urlencoded</option>
</li> </select>
<li> </li>
<label for="addrequest">Action</label> <li>
<button name="addrequest" @click="addRequestBodyParam">Add</button> <label for="addrequest">Action</label>
</li> <button name="addrequest" @click="addRequestBodyParam">Add</button>
</ul> </li>
<ul> </ul>
<li> <ul>
<label for="request">Parameter List</label> <li>
<textarea name="request" rows="1" readonly>{{rawRequestBody || '(add atleast one parameter)'}}</textarea> <label for="request">Parameter List</label>
</li> <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add atleast one parameter)'}}</textarea>
</ul> </li>
</ul>
</div>
</fieldset> </fieldset>
<fieldset class="5 response" id="response" ref="response"> <fieldset class="response" id="response" ref="response">
<legend>Response</legend> <legend v-on:click="collapse">Response ⇵</legend>
<ul> <div class="collapsible">
<li> <ul>
<label for="status">Status</label> <li>
<input name="status" type="text" readonly :value="response.status || 'waiting for request'"> <label for="status">Status</label>
</li> <input name="status" type="text" readonly :value="response.status || 'waiting for request'">
</ul> </li>
<ul v-for="(value, key) in response.headers"> </ul>
<li> <ul v-for="(value, key) in response.headers">
<label for="value">{{key}}</label> <li>
<input name="value" :value="value" readonly> <label for="value">{{key}}</label>
</li> <input name="value" :value="value" readonly>
</ul> </li>
<textarea rows="5" readonly>{{response.body}}</textarea> </ul>
<textarea rows="5" readonly>{{response.body}}</textarea>
</div>
</fieldset> </fieldset>
<footer> <footer>
<a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a> <a href="https://github.com/liyasthomas/postwoman"><img src="icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>

6
script.js
View File

@@ -65,6 +65,12 @@ const app = new Vue({
} }
}, },
methods: { methods: {
collapse({
target
}) {
const el = target.parentNode.className
document.getElementsByClassName(el)[0].classList.toggle('hidden')
},
sendRequest() { sendRequest() {
this.$refs.response.scrollIntoView({ this.$refs.response.scrollIntoView({
behavior: 'smooth' behavior: 'smooth'

22
style.css
View File

@@ -92,6 +92,7 @@ fieldset {
legend { legend {
color: #57b5f9; color: #57b5f9;
font-weight: 700; font-weight: 700;
cursor: pointer;
} }
fieldset textarea { fieldset textarea {
@@ -138,19 +139,23 @@ fieldset.response legend {
color: #C198FB; color: #C198FB;
} }
.hidden .collapsible {
display: none;
}
select, select,
input, input,
option, option,
textarea { textarea {
background-color: #000;
border-radius: 4px;
font-size: 18px;
padding: 8px 16px;
color: var(--fg-color);
margin: 4px; margin: 4px;
font-family: monospace; padding: 8px 16px;
font-weight: 700;
width: calc(100% - 8px); width: calc(100% - 8px);
border-radius: 4px;
background-color: #000;
color: var(--fg-color);
font-weight: 700;
font-size: 18px;
font-family: monospace;
} }
label { label {
@@ -159,10 +164,10 @@ label {
ul, ul,
ol { ol {
display: flex;
margin: 8px 0 0; margin: 8px 0 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
display: flex;
} }
ul li, ul li,
@@ -183,3 +188,4 @@ ol li {
ol li { ol li {
display: flex; display: flex;
} }
}