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

⚗️ Prolly fixed PWA

Browse Source
This commit is contained in:
liyasthomas
2019-08-22 10:04:41 +05:30
parent e077546f5d
commit 1619c94062
4 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
index.html
View File

@@ -76,7 +76,7 @@
</div> </div>
</header> </header>
<fieldset class="request"> <fieldset class="request">
<legend v-on:click="collapse">Request ⇵</legend> <legend v-on:click="collapse">Request ⭥</legend>
<div class="collapsible"> <div class="collapsible">
<ul> <ul>
<li> <li>
@@ -98,14 +98,54 @@
<input v-model="path"> <input v-model="path">
</li> </li>
<li> <li>
<label for="action">Action</label> <label for="action">&nbsp;</label>
<button name="action" @click="sendRequest">Send</button> <button name="action" @click="sendRequest">Send</button>
</li> </li>
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="authentication"> <fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
<legend v-on:click="collapse">Authentication ⇵</legend> <legend v-on:click="collapse">Request Body ⭥</legend>
<div class="collapsible">
<ul>
<li>
<label>Content Type</label>
<select v-model="contentType">
<option>application/json</option>
<option>www-form/urlencoded</option>
</select>
</li>
</ul>
<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">&nbsp;</label>
<button name="request" @click="removeRequestBodyParam(index)">Remove</button>
</li>
</ol>
<ul>
<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="authentication hidden">
<legend v-on:click="collapse">Authentication ⭥</legend>
<div class="collapsible"> <div class="collapsible">
<ul> <ul>
<li> <li>
@@ -128,8 +168,8 @@
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="parameters"> <fieldset class="parameters hidden">
<legend v-on:click="collapse">Parameters ⇵</legend> <legend v-on:click="collapse">Parameters ⭥</legend>
<div class="collapsible"> <div class="collapsible">
<ol v-for="(param, index) in params"> <ol v-for="(param, index) in params">
<li> <li>
@@ -141,7 +181,7 @@
<input :name="'value'+index" v-model="param.value"> <input :name="'value'+index" v-model="param.value">
</li> </li>
<li> <li>
<label for="param">Action</label> <label for="param">&nbsp;</label>
<button name="param" @click="removeRequestParam(index)">Remove</button> <button name="param" @click="removeRequestParam(index)">Remove</button>
</li> </li>
</ol> </ol>
@@ -159,51 +199,13 @@
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="reqbody" v-if="method === 'POST' || method === 'PUT'">
<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="response" id="response" ref="response"> <fieldset class="response" id="response" ref="response">
<legend v-on:click="collapse">Response ⇵</legend> <legend v-on:click="collapse">Response ⭥</legend>
<div class="collapsible"> <div class="collapsible">
<ul> <ul>
<li> <li>
<label for="status">Status</label> <label for="status">status</label>
<input name="status" type="text" readonly :value="response.status || 'waiting for request'"> <input name="status" type="text" readonly :value="response.status || '(waiting to send request)'">
</li> </li>
</ul> </ul>
<ul v-for="(value, key) in response.headers"> <ul v-for="(value, key) in response.headers">
@@ -212,13 +214,18 @@
<input name="value" :value="value" readonly> <input name="value" :value="value" readonly>
</li> </li>
</ul> </ul>
<textarea rows="5" readonly>{{response.body}}</textarea> <ul>
<li>
<label for="body">response</label>
<textarea name="body" rows="6" readonly>{{response.body || '(waiting to send request)'}}</textarea>
</li>
</ul>
</div> </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>
<button id="installPWA" onclick="installPWA()"> <button id="installPWA" onclick="installPWA()">
PWA Install PWA
</button> </button>
</footer> </footer>
</main> </main>

3
script.js
View File

@@ -75,7 +75,8 @@ const app = new Vue({
this.$refs.response.scrollIntoView({ this.$refs.response.scrollIntoView({
behavior: 'smooth' behavior: 'smooth'
}) })
this.response.status = 'Loading...' this.response.status = 'Fetching...'
this.response.body = 'Loading...'
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
const user = this.auth === 'Basic' ? this.httpUser : null const user = this.auth === 'Basic' ? this.httpUser : null
const pswd = this.auth === 'Basic' ? this.httpPassword : null const pswd = this.auth === 'Basic' ? this.httpPassword : null

20
style.css
View File

@@ -34,11 +34,9 @@ a {
} }
body { body {
padding: 0;
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-color);
font-weight: 500; font-weight: 500;
font-size: 16px;
line-height: 1.5; line-height: 1.5;
animation: fadein .2s; animation: fadein .2s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
@@ -108,21 +106,21 @@ fieldset.request legend {
} }
fieldset.authentication { fieldset.authentication {
border-color: #50E3C2;
}
fieldset.authentication legend {
color: #50E3C2;
}
fieldset.parameters {
border-color: #B8E986; border-color: #B8E986;
} }
fieldset.parameters legend { fieldset.authentication legend {
color: #B8E986; color: #B8E986;
} }
fieldset.parameters {
border-color: #50E3C2;
}
fieldset.parameters legend {
color: #50E3C2;
}
fieldset.reqbody { fieldset.reqbody {
border-color: #4A90E2; border-color: #4A90E2;
} }

5
sw.js
View File

@@ -35,9 +35,8 @@ workbox.routing.registerRoute(
}) })
); );
workbox.precaching.precacheAndRoute([ workbox.precaching.precacheAndRoute([
'/index.css', '/style.css',
'/index.js', '/script.js',
'/manage.js',
{ {
url: '/index.html', url: '/index.html',
revision: '383676' revision: '383676'