Merge branch 'master' of https://github.com/liyasthomas/postwoman
This commit is contained in:
NBTX
11
.editorconfig
Normal file
11
.editorconfig
Normal 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
1
.gitignore
vendored
@@ -79,7 +79,6 @@ dist
|
||||
|
||||
# IDE / Editor
|
||||
.idea
|
||||
.editorconfig
|
||||
|
||||
# Service worker
|
||||
sw.*
|
||||
|
||||
34
README.md
34
README.md
@@ -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
|
||||
|
||||
### 👽 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">
|
||||
<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!
|
||||
|
||||
**Methods:**
|
||||
- GET - Retrieve information about the REST API resource
|
||||
- POST - Create a REST API resource
|
||||
- PUT - Update a REST API resource
|
||||
- DELETE - Delete a REST API resource or related component
|
||||
- OPTIONS - Describe the communication options for the target resource.
|
||||
- `GET` - Retrieve information about the REST API resource
|
||||
- `HEAD` - Asks for a response identical to that of a GET request, but without the response body.
|
||||
- `POST` - Create a REST API resource
|
||||
- `PUT` - Update a REST API 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_
|
||||
|
||||
@@ -57,7 +61,7 @@ _Customized themes are also synced with local session storage_
|
||||
**Features:**
|
||||
- Instant loading with Service Workers
|
||||
- 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
|
||||
|
||||
@@ -80,6 +84,21 @@ _Customized themes are also synced with local session storage_
|
||||
- Set content Type
|
||||
- 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
|
||||
@@ -155,6 +174,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details.
|
||||
|
||||
### Testing and Debugging
|
||||
* [Liyas Thomas](https://github.com/liyasthomas)
|
||||
* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors))
|
||||
|
||||
### Contributors
|
||||
* [NBTX](https://github.com/NBTX)
|
||||
|
||||
@@ -58,18 +58,6 @@ footer {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media(max-width: $responsiveWidth) {
|
||||
header {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
nav {
|
||||
display: inline-flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
a:not(:last-of-type) {
|
||||
margin-right: 15px;
|
||||
@@ -182,8 +170,8 @@ textarea,
|
||||
pre {
|
||||
margin: 4px;
|
||||
padding: 8px 16px;
|
||||
width: calc(100% - 8px);
|
||||
border-radius: 4px;
|
||||
width: calc(100% - 8px);
|
||||
background-color: var(--bg-dark-color);
|
||||
color: var(--fg-color);
|
||||
font-weight: 700;
|
||||
@@ -195,15 +183,36 @@ pre {
|
||||
select,
|
||||
input,
|
||||
option {
|
||||
height: 38px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: initial;
|
||||
display: none;
|
||||
|
||||
&,
|
||||
& + label {
|
||||
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) {
|
||||
header {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
nav {
|
||||
display: inline-flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@@ -252,6 +270,10 @@ ol li {
|
||||
ol li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hide-on-small-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#installPWA {
|
||||
@@ -278,6 +300,14 @@ ol li {
|
||||
background-color: #B71C1C;
|
||||
}
|
||||
|
||||
.missing-data-response {
|
||||
background-color: #676767;
|
||||
}
|
||||
|
||||
.virtual-list::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
fieldset#history {
|
||||
.method-list-item {
|
||||
position: relative;
|
||||
@@ -291,8 +321,13 @@ fieldset#history {
|
||||
}
|
||||
}
|
||||
|
||||
.align-left { text-align: left; }
|
||||
.align-right { text-align: right; }
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#response-details-wrapper {
|
||||
position: relative;
|
||||
@@ -300,6 +335,10 @@ fieldset#history {
|
||||
border-radius: 4px;
|
||||
margin: 4px;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#response-details {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -311,7 +350,6 @@ fieldset#history {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -3,55 +3,54 @@
|
||||
<header>
|
||||
<div class="slide-in">
|
||||
<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>
|
||||
<h3>API request builder</h3>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<nuxt-link to="/">HTTP</nuxt-link>
|
||||
<nuxt-link to="/websocket">WebSocket</nuxt-link>
|
||||
<nuxt-link to="/settings">
|
||||
<!-- Settings cog -->
|
||||
<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>
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<nuxt id="main" />
|
||||
|
||||
<footer>
|
||||
<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>
|
||||
|
||||
<button id="installPWA" @click.prevent="showInstallPrompt()">
|
||||
Install PWA
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.slide-in {
|
||||
position: relative;
|
||||
animation: slideIn 0.4s forwards ease-in-out;
|
||||
animation: slideIn 0.2s forwards ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: -30px;
|
||||
left: -16px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
header, #main, footer {
|
||||
header,
|
||||
#main,
|
||||
footer {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
@@ -71,7 +70,11 @@
|
||||
&.nuxt-link-exact-active {
|
||||
color: var(--act-color);
|
||||
fill: var(--act-color);
|
||||
&:before { width: 100%; height: 100% }
|
||||
|
||||
&:before {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
@@ -81,7 +84,6 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
|
||||
background-color: var(--ac-color);
|
||||
border-radius: 4px;
|
||||
margin: auto;
|
||||
@@ -92,48 +94,52 @@
|
||||
}
|
||||
|
||||
@keyframes linkHover {
|
||||
0% { width: 0; height: 2px; }
|
||||
100% { width: 100%; height: 2px; }
|
||||
0% {
|
||||
width: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import intializePwa from '../assets/js/pwa';
|
||||
import logo from "../components/logo";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
logo
|
||||
},
|
||||
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
// Once the PWA code is initialized, this holds a method
|
||||
// that can be called to show the user the installation
|
||||
// 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
|
||||
(() => {
|
||||
// Apply theme from settings.
|
||||
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
|
||||
|
||||
// Load theme color data from settings, or use default color.
|
||||
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
|
||||
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('--act-color', vibrant ? '#121212' : '#fff');
|
||||
})();
|
||||
},
|
||||
|
||||
mounted () {
|
||||
mounted() {
|
||||
// Initializes the PWA code - checks if the app is installed,
|
||||
// etc.
|
||||
(async () => {
|
||||
@@ -141,4 +147,5 @@
|
||||
})();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@@ -9997,6 +9997,11 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
|
||||
"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": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"dependencies": {
|
||||
"@nuxtjs/pwa": "^3.0.0-0",
|
||||
"nuxt": "^2.0.0",
|
||||
"vue-virtual-scroll-list": "^1.4.2",
|
||||
"vuex-persist": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
140
pages/index.vue
140
pages/index.vue
@@ -6,10 +6,12 @@
|
||||
<label for="method">Method</label>
|
||||
<select id="method" v-model="method">
|
||||
<option>GET</option>
|
||||
<option>HEAD</option>
|
||||
<option>POST</option>
|
||||
<option>PUT</option>
|
||||
<option>DELETE</option>
|
||||
<option>OPTIONS</option>
|
||||
<option>PATCH</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
@@ -21,12 +23,12 @@
|
||||
<input id="path" v-model="path" v-on:keyup.enter="sendRequest">
|
||||
</li>
|
||||
<li>
|
||||
<label for="action"> </label>
|
||||
<label for="action" class="hide-on-small-screen"> </label>
|
||||
<button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<li>
|
||||
<label>Content Type</label>
|
||||
@@ -51,7 +53,7 @@
|
||||
<input :name="'bvalue'+index" v-model="param.value">
|
||||
</li>
|
||||
<li>
|
||||
<label for="request"> </label>
|
||||
<label for="request" class="hide-on-small-screen"> </label>
|
||||
<button name="request" @click="removeRequestBodyParam(index)">Remove</button>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -111,7 +113,7 @@
|
||||
<input :name="'value'+index" v-model="header.value">
|
||||
</li>
|
||||
<li>
|
||||
<label for="header"> </label>
|
||||
<label for="header" class="hide-on-small-screen"> </label>
|
||||
<button name="header" @click="removeRequestHeader(index)">Remove</button>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -139,7 +141,7 @@
|
||||
<input :name="'value'+index" v-model="param.value">
|
||||
</li>
|
||||
<li>
|
||||
<label for="param"> </label>
|
||||
<label for="param" class="hide-on-small-screen"> </label>
|
||||
<button name="param" @click="removeRequestParam(index)">Remove</button>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -175,12 +177,10 @@
|
||||
<label for="body">response</label>
|
||||
<button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
|
||||
</div>
|
||||
|
||||
<div id="response-details-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div v-if="response.body && responseType === 'text/html'" class="align-right">
|
||||
<button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
|
||||
</div>
|
||||
@@ -193,37 +193,42 @@
|
||||
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="entry in history">
|
||||
<li>
|
||||
<label for="time">Time</label>
|
||||
<input name="time" type="text" readonly :value="entry.time">
|
||||
</li>
|
||||
<li class="method-list-item">
|
||||
<label for="method">Method</label>
|
||||
<input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
|
||||
<span class="entry-status-code">{{entry.status}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input name="url" type="text" readonly :value="entry.url">
|
||||
</li>
|
||||
<li>
|
||||
<label for="path">Path</label>
|
||||
<input name="path" type="text" readonly :value="entry.path">
|
||||
</li>
|
||||
<li>
|
||||
<label for="delete"> </label>
|
||||
<button name="delete" @click="deleteHistory(entry)">Delete</button>
|
||||
</li>
|
||||
<li>
|
||||
<label for="use"> </label>
|
||||
<button name="use" @click="useHistory(entry)">Use</button>
|
||||
</li>
|
||||
</ul>
|
||||
<virtual-list class="virtual-list" :size="89" :remain="Math.min(5, history.length)">
|
||||
<ul v-for="entry in history" :key="entry.millis" class="entry">
|
||||
<li>
|
||||
<label for="time">Time</label>
|
||||
<input name="time" type="text" readonly :value="entry.time" :title="entry.date">
|
||||
</li>
|
||||
<li class="method-list-item">
|
||||
<label for="method">Method</label>
|
||||
<input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
|
||||
<span class="entry-status-code">{{entry.status}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<label for="url">URL</label>
|
||||
<input name="url" type="text" readonly :value="entry.url">
|
||||
</li>
|
||||
<li>
|
||||
<label for="path">Path</label>
|
||||
<input name="path" type="text" readonly :value="entry.path">
|
||||
</li>
|
||||
<li>
|
||||
<label for="delete" class="hide-on-small-screen"> </label>
|
||||
<button name="delete" @click="deleteHistory(entry)">Delete</button>
|
||||
</li>
|
||||
<li>
|
||||
<label for="use" class="hide-on-small-screen"> </label>
|
||||
<button name="use" @click="useHistory(entry)">Use</button>
|
||||
</li>
|
||||
</ul>
|
||||
</virtual-list>
|
||||
</pw-section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import VirtualList from 'vue-virtual-scroll-list'
|
||||
import section from "../components/section";
|
||||
|
||||
const statusCategories = [{
|
||||
name: 'informational',
|
||||
statusCodeRegex: new RegExp(/[1][0-9]+/),
|
||||
@@ -249,6 +254,12 @@
|
||||
statusCodeRegex: new RegExp(/[5][0-9]+/),
|
||||
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 headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
|
||||
@@ -260,12 +271,14 @@
|
||||
headerMap[header] = value
|
||||
});
|
||||
return headerMap
|
||||
|
||||
};
|
||||
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
|
||||
import section from "../components/section";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'pw-section': section
|
||||
'pw-section': section,
|
||||
VirtualList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -348,16 +361,18 @@
|
||||
key,
|
||||
value
|
||||
}) => `${key}=${encodeURIComponent(value)}`).join('&')
|
||||
return result == '' ? '' : `?${result}`
|
||||
return result === '' ? '' : `?${result}`
|
||||
},
|
||||
|
||||
responseType () {
|
||||
responseType() {
|
||||
return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findEntryStatus(entry) {
|
||||
return findStatusGroup(entry.status);
|
||||
let foundStatusGroup = findStatusGroup(entry.status);
|
||||
return foundStatusGroup || {
|
||||
className: ''
|
||||
};
|
||||
},
|
||||
deleteHistory(entry) {
|
||||
this.history.splice(this.history.indexOf(entry), 1)
|
||||
@@ -384,36 +399,27 @@
|
||||
alert('Please check the formatting of the URL');
|
||||
return
|
||||
}
|
||||
|
||||
if (this.$refs.response.$el.classList.contains('hidden')) {
|
||||
this.$refs.response.$el.classList.toggle('hidden')
|
||||
}
|
||||
|
||||
this.$refs.response.$el.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
this.previewEnabled = false;
|
||||
this.response.status = 'Fetching...';
|
||||
this.response.body = 'Loading...';
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
const user = this.auth === 'Basic' ? this.httpUser : null;
|
||||
const password = this.auth === 'Basic' ? this.httpPassword : null;
|
||||
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
|
||||
|
||||
if (this.auth === 'Bearer Token') xhr.setRequestHeader(
|
||||
'Authorization',
|
||||
'Bearer ' + this.bearerToken
|
||||
);
|
||||
|
||||
if (this.auth === 'Bearer Token')
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
|
||||
if (this.headers) {
|
||||
this.headers.forEach(function(element) {
|
||||
xhr.setRequestHeader(element.key, element.value)
|
||||
})
|
||||
}
|
||||
|
||||
if (this.method === 'POST' || this.method === 'PUT') {
|
||||
if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
|
||||
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
|
||||
xhr.setRequestHeader('Content-Length', requestBody.length);
|
||||
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
|
||||
@@ -421,27 +427,27 @@
|
||||
} else {
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
xhr.onload = e => {
|
||||
this.response.status = xhr.status;
|
||||
const headers = this.response.headers = parseHeaders(xhr);
|
||||
|
||||
this.response.body = xhr.responseText;
|
||||
if ((headers['content-type'] || '').startsWith('application/json')) {
|
||||
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
|
||||
if (this.method != 'HEAD') {
|
||||
if ((headers['content-type'] || '').startsWith('application/json')) {
|
||||
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
|
||||
}
|
||||
}
|
||||
|
||||
const n = new Date().toLocaleTimeString();
|
||||
const d = new Date().toLocaleDateString();
|
||||
const t = new Date().toLocaleTimeString();
|
||||
this.history = [{
|
||||
status: xhr.status,
|
||||
time: n,
|
||||
date: d,
|
||||
time: t,
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
}, ...this.history];
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history));
|
||||
};
|
||||
|
||||
xhr.onerror = e => {
|
||||
this.response.status = xhr.status;
|
||||
this.response.body = xhr.statusText;
|
||||
@@ -452,7 +458,6 @@
|
||||
key: '',
|
||||
value: ''
|
||||
});
|
||||
|
||||
return false
|
||||
},
|
||||
removeRequestHeader(index) {
|
||||
@@ -500,24 +505,20 @@
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
copyResponse() {
|
||||
var copyText = document.getElementById("response-details");
|
||||
copyText.select();
|
||||
document.execCommand("copy");
|
||||
},
|
||||
|
||||
togglePreview () {
|
||||
togglePreview() {
|
||||
this.previewEnabled = !this.previewEnabled;
|
||||
|
||||
if(this.previewEnabled) {
|
||||
if (this.previewEnabled) {
|
||||
// If you want to add 'preview' support for other response types,
|
||||
// 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(this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
|
||||
if (this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
|
||||
return;
|
||||
|
||||
// Use DOMParser to parse document HTML.
|
||||
const previewDocument = new DOMParser().parseFromString(this.response.body, this.responseType);
|
||||
// Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
|
||||
@@ -530,4 +531,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -19,10 +19,13 @@
|
||||
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
|
||||
</span>
|
||||
</div>
|
||||
<p>
|
||||
<input :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')" id="disableFrameColors" type="checkbox">
|
||||
<label for="disableFrameColors">Enable multi-colored frames</label>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
</pw-section>
|
||||
@@ -126,6 +129,13 @@
|
||||
applyTheme(name) {
|
||||
this.applySetting('THEME_CLASS', 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) {
|
||||
// By default, the color is vibrant.
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
|
||||
</li>
|
||||
<li>
|
||||
<label> </label>
|
||||
<label for="action" class="hide-on-small-screen"> </label>
|
||||
<button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -18,7 +18,7 @@
|
||||
<label for="log">Log</label>
|
||||
<div id="log" name="log" class="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 v-else>(Waiting for connection...)</span>
|
||||
</div>
|
||||
@@ -30,7 +30,7 @@
|
||||
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
|
||||
</li>
|
||||
<li>
|
||||
<label> </label>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -113,7 +113,8 @@
|
||||
this.communication.log = [{
|
||||
payload: `Connected to ${this.url}.`,
|
||||
source: 'info',
|
||||
color: 'lime'
|
||||
color: 'lime',
|
||||
ts: (new Date()).toLocaleTimeString()
|
||||
}];
|
||||
};
|
||||
this.socket.onerror = (event) => {
|
||||
@@ -124,13 +125,15 @@
|
||||
this.communication.log.push({
|
||||
payload: `Disconnected from ${this.url}.`,
|
||||
source: 'info',
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
ts: (new Date()).toLocaleTimeString()
|
||||
});
|
||||
};
|
||||
this.socket.onmessage = (event) => {
|
||||
this.communication.log.push({
|
||||
payload: event.data,
|
||||
source: 'server'
|
||||
source: 'server',
|
||||
ts: (new Date()).toLocaleTimeString()
|
||||
});
|
||||
}
|
||||
} catch (ex) {
|
||||
@@ -146,12 +149,14 @@
|
||||
this.communication.log.push({
|
||||
payload: `An error has occurred.`,
|
||||
source: 'info',
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
ts: (new Date()).toLocaleTimeString()
|
||||
});
|
||||
if (error != null) this.communication.log.push({
|
||||
payload: error,
|
||||
source: 'info',
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
ts: (new Date()).toLocaleTimeString()
|
||||
});
|
||||
},
|
||||
sendMessage() {
|
||||
@@ -159,7 +164,8 @@
|
||||
this.socket.send(message);
|
||||
this.communication.log.push({
|
||||
payload: message,
|
||||
source: 'client'
|
||||
source: 'client',
|
||||
ts: (new Date()).toLocaleTimeString()
|
||||
});
|
||||
this.communication.input = "";
|
||||
},
|
||||
@@ -172,15 +178,21 @@
|
||||
getSourcePrefix(source) {
|
||||
const sourceEmojis = {
|
||||
// Source used for info messages.
|
||||
'info': 'ℹ️ [INFO]:\t',
|
||||
'info': '\tℹ️ [INFO]:\t',
|
||||
// Source used for client to server messages.
|
||||
'client': '👽 [SENT]:\t',
|
||||
'client': '\t👽 [SENT]:\t',
|
||||
// Source used for server to client messages.
|
||||
'server': '📥 [RECEIVED]:\t'
|
||||
'server': '\t📥 [RECEIVED]:\t'
|
||||
};
|
||||
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
|
||||
return '';
|
||||
}
|
||||
},
|
||||
updated: function () {
|
||||
this.$nextTick(function () {
|
||||
var divLog = document.getElementById("log")
|
||||
divLog.scrollBy(0, divLog.scrollHeight + 100)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user