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

Merge branch 'master' of https://github.com/liyasthomas/postwoman

Browse Source
This commit is contained in:
NBTX
2019-08-29 22:15:15 +01:00
parent 85d51b2362 4237dfc9d1
commit bb76c6c3da
10 changed files with 244 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.editorconfig Normal file
View File

@@ -0,0 +1,11 @@
# https://editorconfig.org
root = true
[*]
indent_size = 2
indent_style = space
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

1
.gitignore vendored
View File

@@ -79,7 +79,6 @@ dist
# IDE / Editor # IDE / Editor
.idea .idea
.editorconfig
# Service worker # Service worker
sw.* sw.*

34
README.md
View File

@@ -17,7 +17,9 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
# <img src="static/icon.png" alt="postwoman" width="32"> Postwoman # <img src="static/icon.png" alt="postwoman" width="32"> Postwoman
### 👽 API request builder by [Liyas Thomas](https://github.com/liyasthomas) ### API request builder
**Start here: _[Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md)_**
<div align="center"> <div align="center">
<br> <br>
@@ -35,11 +37,13 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
:zap: **Real-time**: Send requests and get/copy responses right away! :zap: **Real-time**: Send requests and get/copy responses right away!
**Methods:** **Methods:**
- GET - Retrieve information about the REST API resource - `GET` - Retrieve information about the REST API resource
- POST - Create a REST API resource - `HEAD` - Asks for a response identical to that of a GET request, but without the response body.
- PUT - Update a REST API resource - `POST` - Create a REST API resource
- DELETE - Delete a REST API resource or related component - `PUT` - Update a REST API resource
- OPTIONS - Describe the communication options for the target resource. - `DELETE` - Delete a REST API resource or related component
- `OPTIONS` - Describe the communication options for the target resource
- `PATCH` - Applies partial modifications to a REST API resource
_History entries are synced with local session storage_ _History entries are synced with local session storage_
@@ -57,7 +61,7 @@ _Customized themes are also synced with local session storage_
**Features:** **Features:**
- Instant loading with Service Workers - Instant loading with Service Workers
- Offline support - Offline support
- Low RAM/memory and CUP usage - Low RAM/memory and CPU usage
:electric_plug: **Web Socket**: Establish full-duplex communication channels over a single TCP connection :electric_plug: **Web Socket**: Establish full-duplex communication channels over a single TCP connection
@@ -80,6 +84,21 @@ _Customized themes are also synced with local session storage_
- Set content Type - Set content Type
- Toggle between RAW input and parameter list - Toggle between RAW input and parameter list
:wave: **Responses**: Contains the status line, headers and the message/response body
_HTML responses have "Preview HTML" feature_
:alarm_clock: **History**: Request entries are synced with local session storage to reuse with a single click
**Fields**
- Timestamp
- Method
- Status code
- URL
- Path
_History entries can be deleted one-by-one or all together_
--- ---
## Demo ## Demo
@@ -155,6 +174,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
### Testing and Debugging ### Testing and Debugging
* [Liyas Thomas](https://github.com/liyasthomas) * [Liyas Thomas](https://github.com/liyasthomas)
* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
### Contributors ### Contributors
* [NBTX](https://github.com/NBTX) * [NBTX](https://github.com/NBTX)

76
assets/css/styles.scss
View File

@@ -58,18 +58,6 @@ footer {
justify-content: space-between; justify-content: space-between;
} }
@media(max-width: $responsiveWidth) {
header {
display: block;
text-align: center;
nav {
display: inline-flex;
margin-top: 20px;
}
}
}
nav { nav {
a:not(:last-of-type) { a:not(:last-of-type) {
margin-right: 15px; margin-right: 15px;
@@ -182,8 +170,8 @@ textarea,
pre { pre {
margin: 4px; margin: 4px;
padding: 8px 16px; padding: 8px 16px;
width: calc(100% - 8px);
border-radius: 4px; border-radius: 4px;
width: calc(100% - 8px);
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
color: var(--fg-color); color: var(--fg-color);
font-weight: 700; font-weight: 700;
@@ -195,15 +183,36 @@ pre {
select, select,
input, input,
option { option {
height: 38px; height: 41px;
} }
input[type="checkbox"] { input[type="checkbox"] {
width: initial; display: none;
&, &,
& + label { & + label {
vertical-align: middle; vertical-align: middle;
cursor: pointer;
&:before {
content: "\2714";
border: 2px solid var(--fg-color);
border-radius: 4px;
display: inline-flex;
height: 16px;
width: 16px;
align-items: center;
justify-content: center;
margin: 8px 8px 8px 0;
color: transparent;
transition: .2s;
}
}
&:checked + label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
} }
} }
@@ -242,6 +251,15 @@ ol li {
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
header {
display: block;
text-align: center;
nav {
display: inline-flex;
margin-top: 20px;
}
}
ul, ul,
ol { ol {
@@ -252,6 +270,10 @@ ol li {
ol li { ol li {
display: flex; display: flex;
} }
.hide-on-small-screen {
display: none;
}
} }
#installPWA { #installPWA {
@@ -278,6 +300,14 @@ ol li {
background-color: #B71C1C; background-color: #B71C1C;
} }
.missing-data-response {
background-color: #676767;
}
.virtual-list::-webkit-scrollbar {
width: 0;
}
fieldset#history { fieldset#history {
.method-list-item { .method-list-item {
position: relative; position: relative;
@@ -291,8 +321,13 @@ fieldset#history {
} }
} }
.align-left { text-align: left; } .align-left {
.align-right { text-align: right; } text-align: left;
}
.align-right {
text-align: right;
}
#response-details-wrapper { #response-details-wrapper {
position: relative; position: relative;
@@ -300,6 +335,10 @@ fieldset#history {
border-radius: 4px; border-radius: 4px;
margin: 4px; margin: 4px;
textarea {
width: 100%;
}
#response-details { #response-details {
margin: 0; margin: 0;
} }
@@ -311,8 +350,7 @@ fieldset#history {
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: white; background-color: white;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }

61
layouts/default.vue
View File

@@ -3,55 +3,54 @@
<header> <header>
<div class="slide-in"> <div class="slide-in">
<nuxt-link to="/"> <nuxt-link to="/">
<h1 class="logo"><logo alt="" style="height: 24px; margin-right: 16px"/>Postwoman</h1> <h1 class="logo">
<logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
</nuxt-link> </nuxt-link>
<h3>API request builder</h3> <h3>API request builder</h3>
</div> </div>
<nav> <nav>
<nuxt-link to="/">HTTP</nuxt-link> <nuxt-link to="/">HTTP</nuxt-link>
<nuxt-link to="/websocket">WebSocket</nuxt-link> <nuxt-link to="/websocket">WebSocket</nuxt-link>
<nuxt-link to="/settings"> <nuxt-link to="/settings">
<!-- Settings cog --> <!-- Settings cog -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/> <path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
</svg> </svg>
</nuxt-link> </nuxt-link>
</nav> </nav>
</header> </header>
<nuxt id="main" /> <nuxt id="main" />
<footer> <footer>
<div> <div>
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a> <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
</div> </div>
<button id="installPWA" @click.prevent="showInstallPrompt()"> <button id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA Install PWA
</button> </button>
</footer> </footer>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.slide-in { .slide-in {
position: relative; position: relative;
animation: slideIn 0.4s forwards ease-in-out; animation: slideIn 0.2s forwards ease-in-out;
} }
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
opacity: 0; opacity: 0;
left: -30px; left: -16px;
} }
100% { 100% {
opacity: 1; opacity: 1;
left: 0px; left: 0px;
} }
} }
header, #main, footer { header,
#main,
footer {
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
} }
@@ -71,7 +70,11 @@
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
color: var(--act-color); color: var(--act-color);
fill: var(--act-color); fill: var(--act-color);
&:before { width: 100%; height: 100% }
&:before {
width: 100%;
height: 100%
}
} }
&:before { &:before {
@@ -81,7 +84,6 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: -1; z-index: -1;
background-color: var(--ac-color); background-color: var(--ac-color);
border-radius: 4px; border-radius: 4px;
margin: auto; margin: auto;
@@ -92,48 +94,52 @@
} }
@keyframes linkHover { @keyframes linkHover {
0% { width: 0; height: 2px; } 0% {
100% { width: 100%; height: 2px; } width: 0;
height: 2px;
}
100% {
width: 100%;
height: 2px;
}
} }
} }
} }
</style>
</style>
<script> <script>
import intializePwa from '../assets/js/pwa'; import intializePwa from '../assets/js/pwa';
import logo from "../components/logo"; import logo from "../components/logo";
export default { export default {
components: { components: {
logo logo
}, },
data() {
data () {
return { return {
// Once the PWA code is initialized, this holds a method // Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation // that can be called to show the user the installation
// prompt. // prompt.
showInstallPrompt: null showInstallPrompt: null,
logoStyle() {
return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
}
} }
}, },
beforeMount() {
beforeMount () {
// Load theme settings // Load theme settings
(() => { (() => {
// Apply theme from settings. // Apply theme from settings.
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || ''; document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
// Load theme color data from settings, or use default color. // Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D'; let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT; let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
if(vibrant == null) vibrant = true; if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color); document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff'); document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
})(); })();
}, },
mounted() {
mounted () {
// Initializes the PWA code - checks if the app is installed, // Initializes the PWA code - checks if the app is installed,
// etc. // etc.
(async () => { (async () => {
@@ -141,4 +147,5 @@
})(); })();
} }
} }
</script> </script>

5
package-lock.json generated
View File

@@ -9997,6 +9997,11 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
}, },
"vue-virtual-scroll-list": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.2.tgz",
"integrity": "sha512-jcXl1cYDxGZX+aF9vsUauXWnUkXm8oQxnvLTJ8UMTmMxwzbmlHX7vs0xGDdEej91vJpBNrdNNseWPxboTvI+UA=="
},
"vuex": { "vuex": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

1
package.json
View File

@@ -13,6 +13,7 @@
"dependencies": { "dependencies": {
"@nuxtjs/pwa": "^3.0.0-0", "@nuxtjs/pwa": "^3.0.0-0",
"nuxt": "^2.0.0", "nuxt": "^2.0.0",
"vue-virtual-scroll-list": "^1.4.2",
"vuex-persist": "^2.0.1" "vuex-persist": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {

140
pages/index.vue
View File

@@ -6,10 +6,12 @@
<label for="method">Method</label> <label for="method">Method</label>
<select id="method" v-model="method"> <select id="method" v-model="method">
<option>GET</option> <option>GET</option>
<option>HEAD</option>
<option>POST</option> <option>POST</option>
<option>PUT</option> <option>PUT</option>
<option>DELETE</option> <option>DELETE</option>
<option>OPTIONS</option> <option>OPTIONS</option>
<option>PATCH</option>
</select> </select>
</li> </li>
<li> <li>
@@ -21,12 +23,12 @@
<input id="path" v-model="path" v-on:keyup.enter="sendRequest"> <input id="path" v-model="path" v-on:keyup.enter="sendRequest">
</li> </li>
<li> <li>
<label for="action">&nbsp;</label> <label for="action" class="hide-on-small-screen">&nbsp;</label>
<button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button> <button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'"> <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<ul> <ul>
<li> <li>
<label>Content Type</label> <label>Content Type</label>
@@ -51,7 +53,7 @@
<input :name="'bvalue'+index" v-model="param.value"> <input :name="'bvalue'+index" v-model="param.value">
</li> </li>
<li> <li>
<label for="request">&nbsp;</label> <label for="request" class="hide-on-small-screen">&nbsp;</label>
<button name="request" @click="removeRequestBodyParam(index)">Remove</button> <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
</li> </li>
</ol> </ol>
@@ -111,7 +113,7 @@
<input :name="'value'+index" v-model="header.value"> <input :name="'value'+index" v-model="header.value">
</li> </li>
<li> <li>
<label for="header">&nbsp;</label> <label for="header" class="hide-on-small-screen">&nbsp;</label>
<button name="header" @click="removeRequestHeader(index)">Remove</button> <button name="header" @click="removeRequestHeader(index)">Remove</button>
</li> </li>
</ol> </ol>
@@ -139,7 +141,7 @@
<input :name="'value'+index" v-model="param.value"> <input :name="'value'+index" v-model="param.value">
</li> </li>
<li> <li>
<label for="param">&nbsp;</label> <label for="param" class="hide-on-small-screen">&nbsp;</label>
<button name="param" @click="removeRequestParam(index)">Remove</button> <button name="param" @click="removeRequestParam(index)">Remove</button>
</li> </li>
</ol> </ol>
@@ -175,12 +177,10 @@
<label for="body">response</label> <label for="body">response</label>
<button v-if="response.body" name="action" @click="copyResponse">Copy Response</button> <button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
</div> </div>
<div id="response-details-wrapper"> <div id="response-details-wrapper">
<textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea> <textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
<iframe src="about:blank" class="covers-response" ref="previewFrame" :class="{hidden: !previewEnabled}"></iframe> <iframe src="about:blank" class="covers-response" ref="previewFrame" :class="{hidden: !previewEnabled}"></iframe>
</div> </div>
<div v-if="response.body && responseType === 'text/html'" class="align-right"> <div v-if="response.body && responseType === 'text/html'" class="align-right">
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button> <button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
</div> </div>
@@ -193,37 +193,42 @@
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button> <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
</li> </li>
</ul> </ul>
<ul v-for="entry in history"> <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
<li> <ul v-for="entry in history" :key="entry.millis" class="entry">
<label for="time">Time</label> <li>
<input name="time" type="text" readonly :value="entry.time"> <label for="time">Time</label>
</li> <input name="time" type="text" readonly :value="entry.time" :title="entry.date">
<li class="method-list-item"> </li>
<label for="method">Method</label> <li class="method-list-item">
<input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}"> <label for="method">Method</label>
<span class="entry-status-code">{{entry.status}}</span> <input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
</li> <span class="entry-status-code">{{entry.status}}</span>
<li> </li>
<label for="url">URL</label> <li>
<input name="url" type="text" readonly :value="entry.url"> <label for="url">URL</label>
</li> <input name="url" type="text" readonly :value="entry.url">
<li> </li>
<label for="path">Path</label> <li>
<input name="path" type="text" readonly :value="entry.path"> <label for="path">Path</label>
</li> <input name="path" type="text" readonly :value="entry.path">
<li> </li>
<label for="delete">&nbsp;</label> <li>
<button name="delete" @click="deleteHistory(entry)">Delete</button> <label for="delete" class="hide-on-small-screen">&nbsp;</label>
</li> <button name="delete" @click="deleteHistory(entry)">Delete</button>
<li> </li>
<label for="use">&nbsp;</label> <li>
<button name="use" @click="useHistory(entry)">Use</button> <label for="use" class="hide-on-small-screen">&nbsp;</label>
</li> <button name="use" @click="useHistory(entry)">Use</button>
</ul> </li>
</ul>
</virtual-list>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<script> <script>
import VirtualList from 'vue-virtual-scroll-list'
import section from "../components/section";
const statusCategories = [{ const statusCategories = [{
name: 'informational', name: 'informational',
statusCodeRegex: new RegExp(/[1][0-9]+/), statusCodeRegex: new RegExp(/[1][0-9]+/),
@@ -249,6 +254,12 @@
statusCodeRegex: new RegExp(/[5][0-9]+/), statusCodeRegex: new RegExp(/[5][0-9]+/),
className: 'sv-error-response' className: 'sv-error-response'
}, },
{
// this object is a catch-all for when no other objects match and should always be last
name: 'unknown',
statusCodeRegex: new RegExp(/.*/),
className: 'missing-data-response'
}
]; ];
const parseHeaders = xhr => { const parseHeaders = xhr => {
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/); const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
@@ -260,12 +271,14 @@
headerMap[header] = value headerMap[header] = value
}); });
return headerMap return headerMap
}; };
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus)); const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
import section from "../components/section";
export default { export default {
components: { components: {
'pw-section': section 'pw-section': section,
VirtualList
}, },
data() { data() {
return { return {
@@ -348,16 +361,18 @@
key, key,
value value
}) => `${key}=${encodeURIComponent(value)}`).join('&') }) => `${key}=${encodeURIComponent(value)}`).join('&')
return result == '' ? '' : `?${result}` return result === '' ? '' : `?${result}`
}, },
responseType() {
responseType () {
return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase(); return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
} }
}, },
methods: { methods: {
findEntryStatus(entry) { findEntryStatus(entry) {
return findStatusGroup(entry.status); let foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {
className: ''
};
}, },
deleteHistory(entry) { deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1) this.history.splice(this.history.indexOf(entry), 1)
@@ -384,36 +399,27 @@
alert('Please check the formatting of the URL'); alert('Please check the formatting of the URL');
return return
} }
if (this.$refs.response.$el.classList.contains('hidden')) { if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden') this.$refs.response.$el.classList.toggle('hidden')
} }
this.$refs.response.$el.scrollIntoView({ this.$refs.response.$el.scrollIntoView({
behavior: 'smooth' behavior: 'smooth'
}); });
this.previewEnabled = false; this.previewEnabled = false;
this.response.status = 'Fetching...'; this.response.status = 'Fetching...';
this.response.body = 'Loading...'; 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 password = this.auth === 'Basic' ? this.httpPassword : null; const password = this.auth === 'Basic' ? this.httpPassword : null;
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password); xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
if (this.auth === 'Bearer Token')
if (this.auth === 'Bearer Token') xhr.setRequestHeader( xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
'Authorization',
'Bearer ' + this.bearerToken
);
if (this.headers) { if (this.headers) {
this.headers.forEach(function(element) { this.headers.forEach(function(element) {
xhr.setRequestHeader(element.key, element.value) xhr.setRequestHeader(element.key, element.value)
}) })
} }
if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
if (this.method === 'POST' || this.method === 'PUT') {
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody; const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
xhr.setRequestHeader('Content-Length', requestBody.length); xhr.setRequestHeader('Content-Length', requestBody.length);
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`); xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
@@ -421,27 +427,27 @@
} else { } else {
xhr.send(); xhr.send();
} }
xhr.onload = e => { xhr.onload = e => {
this.response.status = xhr.status; this.response.status = xhr.status;
const headers = this.response.headers = parseHeaders(xhr); const headers = this.response.headers = parseHeaders(xhr);
this.response.body = xhr.responseText; this.response.body = xhr.responseText;
if ((headers['content-type'] || '').startsWith('application/json')) { if (this.method != 'HEAD') {
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2); if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
}
} }
const d = new Date().toLocaleDateString();
const n = new Date().toLocaleTimeString(); const t = new Date().toLocaleTimeString();
this.history = [{ this.history = [{
status: xhr.status, status: xhr.status,
time: n, date: d,
time: t,
method: this.method, method: this.method,
url: this.url, url: this.url,
path: this.path path: this.path
}, ...this.history]; }, ...this.history];
window.localStorage.setItem('history', JSON.stringify(this.history)); window.localStorage.setItem('history', JSON.stringify(this.history));
}; };
xhr.onerror = e => { xhr.onerror = e => {
this.response.status = xhr.status; this.response.status = xhr.status;
this.response.body = xhr.statusText; this.response.body = xhr.statusText;
@@ -452,7 +458,6 @@
key: '', key: '',
value: '' value: ''
}); });
return false return false
}, },
removeRequestHeader(index) { removeRequestHeader(index) {
@@ -500,24 +505,20 @@
return false; return false;
} }
}, },
copyResponse() { copyResponse() {
var copyText = document.getElementById("response-details"); var copyText = document.getElementById("response-details");
copyText.select(); copyText.select();
document.execCommand("copy"); document.execCommand("copy");
}, },
togglePreview() {
togglePreview () {
this.previewEnabled = !this.previewEnabled; this.previewEnabled = !this.previewEnabled;
if (this.previewEnabled) {
if(this.previewEnabled) {
// If you want to add 'preview' support for other response types, // If you want to add 'preview' support for other response types,
// just add them here. // just add them here.
if(this.responseType === "text/html"){ if (this.responseType === "text/html") {
// If the preview already has that URL loaded, let's not bother re-loading it all. // If the preview already has that URL loaded, let's not bother re-loading it all.
if(this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url) if (this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
return; return;
// Use DOMParser to parse document HTML. // Use DOMParser to parse document HTML.
const previewDocument = new DOMParser().parseFromString(this.response.body, this.responseType); const previewDocument = new DOMParser().parseFromString(this.response.body, this.responseType);
// Inject <base href="..."> tag to head, to fix relative CSS/HTML paths. // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
@@ -530,4 +531,5 @@
} }
} }
} }
</script> </script>

18
pages/settings.vue
View File

@@ -19,10 +19,13 @@
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" /> <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
</span> </span>
</div> </div>
<p> </li>
<input :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')" id="disableFrameColors" type="checkbox"> </ul>
<label for="disableFrameColors">Enable multi-colored frames</label> <ul>
</p> <li>
<h3 class="title">Frames</h3>
<input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
<label for="disableFrameColors">Enable multi-color</label>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
@@ -126,6 +129,13 @@
applyTheme(name) { applyTheme(name) {
this.applySetting('THEME_CLASS', name); this.applySetting('THEME_CLASS', name);
document.documentElement.className = name; document.documentElement.className = name;
let imgGitHub = document.getElementById("imgGitHub");
imgGitHub.style['filter'] = "";
imgGitHub.style['webkit-filter'] = "invert(100%)";
if (name.includes("light")){
imgGitHub.style['filter'] = "invert(100%)";
imgGitHub.style['webkit-filter'] = "invert(100%)";
}
}, },
setActiveColor(color, vibrant) { setActiveColor(color, vibrant) {
// By default, the color is vibrant. // By default, the color is vibrant.

36
pages/websocket.vue
View File

@@ -7,7 +7,7 @@
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection"> <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
</li> </li>
<li> <li>
<label>&nbsp;</label> <label for="action" class="hide-on-small-screen">&nbsp;</label>
<button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button> <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
</li> </li>
</ul> </ul>
@@ -18,7 +18,7 @@
<label for="log">Log</label> <label for="log">Log</label>
<div id="log" name="log" class="log"> <div id="log" name="log" class="log">
<span v-if="communication.log"> <span v-if="communication.log">
<span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span> <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
<span v-else>(Waiting for connection...)</span> <span v-else>(Waiting for connection...)</span>
</div> </div>
@@ -30,7 +30,7 @@
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage"> <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
</li> </li>
<li> <li>
<label>&nbsp;</label> <label for="send" class="hide-on-small-screen">&nbsp;</label>
<button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button> <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
</li> </li>
</ul> </ul>
@@ -113,7 +113,8 @@
this.communication.log = [{ this.communication.log = [{
payload: `Connected to ${this.url}.`, payload: `Connected to ${this.url}.`,
source: 'info', source: 'info',
color: 'lime' color: 'lime',
ts: (new Date()).toLocaleTimeString()
}]; }];
}; };
this.socket.onerror = (event) => { this.socket.onerror = (event) => {
@@ -124,13 +125,15 @@
this.communication.log.push({ this.communication.log.push({
payload: `Disconnected from ${this.url}.`, payload: `Disconnected from ${this.url}.`,
source: 'info', source: 'info',
color: 'red' color: 'red',
ts: (new Date()).toLocaleTimeString()
}); });
}; };
this.socket.onmessage = (event) => { this.socket.onmessage = (event) => {
this.communication.log.push({ this.communication.log.push({
payload: event.data, payload: event.data,
source: 'server' source: 'server',
ts: (new Date()).toLocaleTimeString()
}); });
} }
} catch (ex) { } catch (ex) {
@@ -146,12 +149,14 @@
this.communication.log.push({ this.communication.log.push({
payload: `An error has occurred.`, payload: `An error has occurred.`,
source: 'info', source: 'info',
color: 'red' color: 'red',
ts: (new Date()).toLocaleTimeString()
}); });
if (error != null) this.communication.log.push({ if (error != null) this.communication.log.push({
payload: error, payload: error,
source: 'info', source: 'info',
color: 'red' color: 'red',
ts: (new Date()).toLocaleTimeString()
}); });
}, },
sendMessage() { sendMessage() {
@@ -159,7 +164,8 @@
this.socket.send(message); this.socket.send(message);
this.communication.log.push({ this.communication.log.push({
payload: message, payload: message,
source: 'client' source: 'client',
ts: (new Date()).toLocaleTimeString()
}); });
this.communication.input = ""; this.communication.input = "";
}, },
@@ -172,15 +178,21 @@
getSourcePrefix(source) { getSourcePrefix(source) {
const sourceEmojis = { const sourceEmojis = {
// Source used for info messages. // Source used for info messages.
'info': 'ℹ️ [INFO]:\t', 'info': '\tℹ️ [INFO]:\t',
// Source used for client to server messages. // Source used for client to server messages.
'client': '👽 [SENT]:\t', 'client': '\t👽 [SENT]:\t',
// Source used for server to client messages. // Source used for server to client messages.
'server': '📥 [RECEIVED]:\t' 'server': '\t📥 [RECEIVED]:\t'
}; };
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]; if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return ''; return '';
} }
},
updated: function () {
this.$nextTick(function () {
var divLog = document.getElementById("log")
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
} }
} }