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

🚨 Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-27 17:22:24 +05:30
parent 36a07290f2
commit f265046676
5 changed files with 470 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/styles.scss
View File

@@ -20,16 +20,6 @@ $responsiveWidth: 720px;
font-family: "Poppins", "Roboto", "Noto", sans-serif; font-family: "Poppins", "Roboto", "Noto", sans-serif;
} }
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
a { a {
display: inline-flex; display: inline-flex;
color: inherit; color: inherit;
@@ -42,7 +32,6 @@ body {
color: var(--fg-color); color: var(--fg-color);
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
animation: fadein 0.2s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@@ -56,6 +45,10 @@ h3 {
font-weight: 700; font-weight: 700;
} }
h3.title {
margin: 4px;
}
header, header,
footer { footer {
display: flex; display: flex;
@@ -85,9 +78,9 @@ nav {
body.sticky-footer footer { body.sticky-footer footer {
position: fixed; position: fixed;
right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0;
} }
.logo { .logo {

11
components/settings/swatch.vue
View File

@@ -12,10 +12,11 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 8px 15px; padding: 8px 16px;
margin: 5px; margin: 4px;
background-color: rgba(93, 93, 93, 0.2); background-color: rgba(93, 93, 93, 0.2);
border-radius: 4px; border-radius: 4px;
cursor: pointer;
&.active { &.active {
background-color: rgba(93, 93, 93, 0.3); background-color: rgba(93, 93, 93, 0.3);
@@ -24,10 +25,10 @@
.preview { .preview {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
width: 36px; width: 32px;
height: 36px; height: 32px;
border-radius: 100%; border-radius: 100%;
margin-right: 10px; margin-right: 8px;
position: relative; position: relative;
.activeTick { .activeTick {

518
pages/index.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" label="Request" ref="request">
<ul> <ul>
<li> <li>
@@ -27,7 +26,6 @@
</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'">
<ul> <ul>
<li> <li>
@@ -74,7 +72,6 @@
<textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea> <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
</div> </div>
</pw-section> </pw-section>
<pw-section class="green" label="Authentication" collapsed> <pw-section class="green" label="Authentication" collapsed>
<ul> <ul>
<li> <li>
@@ -103,7 +100,6 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="orange" label="Headers" collapsed> <pw-section class="orange" label="Headers" collapsed>
<ol v-for="(header, index) in headers"> <ol v-for="(header, index) in headers">
<li> <li>
@@ -132,7 +128,6 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="cyan" label="Parameters" collapsed> <pw-section class="cyan" label="Parameters" collapsed>
<ol v-for="(param, index) in params"> <ol v-for="(param, index) in params">
<li> <li>
@@ -161,7 +156,6 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Response" id="response" ref="response"> <pw-section class="purple" label="Response" id="response" ref="response">
<ul> <ul>
<li> <li>
@@ -185,7 +179,6 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="gray" label="History"> <pw-section class="gray" label="History">
<ul> <ul>
<li> <li>
@@ -199,8 +192,7 @@
</li> </li>
<li class="method-list-item"> <li class="method-list-item">
<label for="method">Method</label> <label for="method">Method</label>
<input name="method" type="text" readonly <input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
:value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
<span class="entry-status-code">{{entry.status}}</span> <span class="entry-status-code">{{entry.status}}</span>
</li> </li>
<li> <li>
@@ -221,267 +213,273 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<script> <script>
const statusCategories = [ const statusCategories = [{
{name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'}, name: 'informational',
{name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'}, statusCodeRegex: new RegExp(/[1][0-9]+/),
{name: 'redirection', statusCodeRegex: new RegExp(/[3][0-9]+/), className: 'redir-response'}, className: 'info-response'
{name: 'client error', statusCodeRegex: new RegExp(/[4][0-9]+/), className: 'cl-error-response'}, },
{name: 'server error', statusCodeRegex: new RegExp(/[5][0-9]+/), className: 'sv-error-response'}, {
]; name: 'successful',
statusCodeRegex: new RegExp(/[2][0-9]+/),
className: 'success-response'
const parseHeaders = xhr => { },
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/); {
const headerMap = {}; name: 'redirection',
headers.forEach(line => { statusCodeRegex: new RegExp(/[3][0-9]+/),
const parts = line.split(': '); className: 'redir-response'
const header = parts.shift().toLowerCase(); },
const value = parts.join(': '); {
headerMap[header] = value name: 'client error',
}); statusCodeRegex: new RegExp(/[4][0-9]+/),
return headerMap className: 'cl-error-response'
}; },
{
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus)); name: 'server error',
statusCodeRegex: new RegExp(/[5][0-9]+/),
import section from "../components/section"; className: 'sv-error-response'
},
export default { ];
components: { const parseHeaders = xhr => {
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
const headerMap = {};
headers.forEach(line => {
const parts = line.split(': ');
const header = parts.shift().toLowerCase();
const value = parts.join(': ');
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
}, },
data() {
data () { return {
return { method: 'GET',
method: 'GET', url: 'https://reqres.in',
url: 'https://reqres.in', auth: 'None',
auth: 'None', path: '/api/users',
path: '/api/users', httpUser: '',
httpUser: '', httpPassword: '',
httpPassword: '', bearerToken: '',
bearerToken: '', headers: [],
headers: [], params: [],
params: [], bodyParams: [],
bodyParams: [], rawParams: '',
rawParams: '', rawInput: false,
rawInput: false, contentType: 'application/json',
contentType: 'application/json', response: {
response: { status: '',
status: '', headers: '',
headers: '', body: ''
body: '' },
}, history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : []
history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [] }
} },
computed: {
statusCategory() {
return findStatusGroup(this.response.status);
}, },
computed: { noHistoryToClear() {
statusCategory(){ return this.history.length === 0;
return findStatusGroup(this.response.status); },
}, isValidURL() {
noHistoryToClear() { const protocol = '^(https?:\\/\\/)?';
return this.history.length === 0; const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
}, const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
isValidURL() { return validIP.test(this.url) || validHostname.test(this.url);
const protocol = '^(https?:\\/\\/)?'; },
rawRequestBody() {
const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"); const {
const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$"); bodyParams
} = this
return validIP.test(this.url) || validHostname.test(this.url); if (this.contentType === 'application/json') {
}, try {
rawRequestBody() { const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
const {
bodyParams
} = this
if (this.contentType === 'application/json') {
try {
const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
"${key}": "${value}" "${key}": "${value}"
`).join()}}`) `).join()}}`)
return JSON.stringify(obj) return JSON.stringify(obj)
} catch (ex) { } catch (ex) {
return 'invalid' return 'invalid'
}
} else {
return bodyParams
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
}
},
headerString() {
const result = this.headers
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}: ${value}`).join(',\n')
return result == '' ? '' : `${result}`
},
queryString() {
const result = this.params
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
return result == '' ? '' : `?${result}`
} }
} else {
return bodyParams
.filter(({
key
}) => !!key)
.map(({
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
}
}, },
methods: { headerString() {
findEntryStatus(entry){ const result = this.headers
return findStatusGroup(entry.status); .filter(({
}, key
deleteHistory(entry) { }) => !!key)
this.history.splice(this.history.indexOf(entry), 1) .map(({
window.localStorage.setItem('history', JSON.stringify(this.history)) key,
}, value
clearHistory() { }) => `${key}: ${value}`).join(',\n')
this.history = [] return result == '' ? '' : `${result}`
window.localStorage.setItem('history', JSON.stringify(this.history)) },
}, queryString() {
useHistory({ const result = this.params
method, .filter(({
url, key
path }) => !!key)
}) { .map(({
this.method = method key,
this.url = url value
this.path = path }) => `${key}=${encodeURIComponent(value)}`).join('&')
this.$refs.request.$el.scrollIntoView({ return result == '' ? '' : `?${result}`
behavior: 'smooth'
})
},
sendRequest() {
if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden')
}
this.$refs.response.$el.scrollIntoView({
behavior: 'smooth'
})
this.response.status = 'Fetching...'
this.response.body = 'Loading...'
const xhr = new XMLHttpRequest()
const user = this.auth === 'Basic' ? this.httpUser : null
const pswd = this.auth === 'Basic' ? this.httpPassword : null
xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
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') {
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
xhr.setRequestHeader('Content-Length', requestBody.length)
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`)
xhr.send(requestBody)
} else {
xhr.send()
}
xhr.onload = e => {
this.response.status = xhr.status
const headers = this.response.headers = parseHeaders(xhr)
if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
} else {
this.response.body = xhr.responseText
}
if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
}
const n = new Date().toLocaleTimeString()
this.history = [{
status: xhr.status,
time: n,
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
}
},
addRequestHeader() {
this.headers.push({
key: '',
value: ''
})
return false
},
removeRequestHeader(index) {
this.headers.splice(index, 1)
},
addRequestParam() {
this.params.push({
key: '',
value: ''
})
return false
},
removeRequestParam(index) {
this.params.splice(index, 1)
},
addRequestBodyParam() {
this.bodyParams.push({
key: '',
value: ''
})
return false
},
removeRequestBodyParam(index) {
this.bodyParams.splice(index, 1)
},
formatRawParams(event) {
if ((event.which !== 13 && event.which !== 9)) {
return;
}
const textBody = event.target.value;
const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
const textAfterCursor = textBody.substring(event.target.selectionEnd);
if (event.which === 13) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
}
else if (event.which === 9) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
return false;
}
},
copyResponse() {
var copyText = document.getElementById("response-details");
copyText.select();
document.execCommand("copy");
}
} }
},
methods: {
findEntryStatus(entry) {
return findStatusGroup(entry.status);
},
deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1)
window.localStorage.setItem('history', JSON.stringify(this.history))
},
clearHistory() {
this.history = []
window.localStorage.setItem('history', JSON.stringify(this.history))
},
useHistory({
method,
url,
path
}) {
this.method = method
this.url = url
this.path = path
this.$refs.request.$el.scrollIntoView({
behavior: 'smooth'
})
},
sendRequest() {
if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden')
}
this.$refs.response.$el.scrollIntoView({
behavior: 'smooth'
})
this.response.status = 'Fetching...'
this.response.body = 'Loading...'
const xhr = new XMLHttpRequest()
const user = this.auth === 'Basic' ? this.httpUser : null
const pswd = this.auth === 'Basic' ? this.httpPassword : null
xhr.open(this.method, this.url + this.path + this.queryString, true, user, pswd)
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') {
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
xhr.setRequestHeader('Content-Length', requestBody.length)
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`)
xhr.send(requestBody)
} else {
xhr.send()
}
xhr.onload = e => {
this.response.status = xhr.status
const headers = this.response.headers = parseHeaders(xhr)
if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(xhr.responseText), null, 2)
} else {
this.response.body = xhr.responseText
}
if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
}
const n = new Date().toLocaleTimeString()
this.history = [{
status: xhr.status,
time: n,
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
}
},
addRequestHeader() {
this.headers.push({
key: '',
value: ''
})
return false
},
removeRequestHeader(index) {
this.headers.splice(index, 1)
},
addRequestParam() {
this.params.push({
key: '',
value: ''
})
return false
},
removeRequestParam(index) {
this.params.splice(index, 1)
},
addRequestBodyParam() {
this.bodyParams.push({
key: '',
value: ''
})
return false
},
removeRequestBodyParam(index) {
this.bodyParams.splice(index, 1)
},
formatRawParams(event) {
if ((event.which !== 13 && event.which !== 9)) {
return;
}
const textBody = event.target.value;
const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
const textAfterCursor = textBody.substring(event.target.selectionEnd);
if (event.which === 13) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
} else if (event.which === 9) {
event.preventDefault();
const oldSelectionStart = event.target.selectionStart;
event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
return false;
}
},
copyResponse() {
var copyText = document.getElementById("response-details");
copyText.select();
document.execCommand("copy");
}
}
} }
</script> </script>

244
pages/settings.vue
View File

@@ -1,126 +1,130 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Theme">
<pw-section class="blue" label="Theme"> <ul>
<ul> <li>
<li> <h3 class="title">Background</h3>
<h3>Background</h3> <div class="backgrounds">
<div class="backgrounds"> <span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
<span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)"> <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
<swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch> </span>
</span> </div>
</div> </li>
</ul>
</li> <ul>
</ul> <li>
<h3 class="title">Color</h3>
<br><br> <div class="colors">
<span v-for="entry in colors" :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)">
<ul> <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
<li> </span>
</div>
<h3>Color</h3> <p>
<div class="colors"> <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
<span v-for="entry in colors" :key="entry.color" <label for="disableFrameColors">Enable multi-colored frames</label>
@click.prevent="setActiveColor(entry.color, entry.vibrant)"> </p>
<swatch </li>
:color="entry.color" </ul>
:name="entry.name" </pw-section>
:class="{ vibrant: entry.vibrant }" </div>
:active="settings.THEME_COLOR === entry.color.toUpperCase()" />
</span>
</div>
<p>
<input id="disableFrameColors" type="checkbox"
:checked="!settings.DISABLE_FRAME_COLORS"
@change="toggleSetting('DISABLE_FRAME_COLORS')">
<label for="disableFrameColors">Enable multi-colored frames</label>
</p>
</li>
</ul>
</pw-section>
</div>
</template> </template>
<script> <script>
import section from "../components/section"; import section from "../components/section";
import swatch from "../components/settings/swatch"; import swatch from "../components/settings/swatch";
export default {
export default { data() {
data () { return {
return { // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss // You should copy the existing light theme as a template and then just
// You should copy the existing light theme as a template and then just // set the relevant values.
// set the relevant values. themes: [{
themes: [ "color": "#121212",
{ "color": "#121212", "name": "Dark (Default)", "class": "" }, "name": "Dark (Default)",
{ "color": "#DFDFDF", "name": "Light", "vibrant": true, "class": "light" } "class": ""
], },
{
// You can define a new color here! It will simply store the color value. "color": "#DFDFDF",
colors: [ "name": "Light",
// If the color is vibrant, black is used as the active foreground color. "vibrant": true,
{ "color": "#51ff0d", "name":"Lime (Default)", "vibrant": true }, "class": "light"
{ "color": "#FFC107", "name":"Yellow", "vibrant": true }, }
{ "color": "#E91E63", "name":"Pink", "vibrant": false }, ],
{ "color": "#e74c3c", "name":"Red", "vibrant": false }, // You can define a new color here! It will simply store the color value.
{ "color": "#9b59b6", "name":"Purple", "vibrant": false }, colors: [
{ "color": "#2980b9", "name":"Blue", "vibrant": false }, // If the color is vibrant, black is used as the active foreground color.
], {
settings: { "color": "#51ff0d",
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '', "name": "Lime (Default)",
THEME_COLOR: '', "vibrant": true
THEME_COLOR_VIBRANT: true, },
{
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false "color": "#FFC107",
} "name": "Yellow",
} "vibrant": true
}, },
{
components: { "color": "#E91E63",
'pw-section': section, "name": "Pink",
'swatch': swatch "vibrant": false
}, },
{
methods: { "color": "#e74c3c",
applyTheme (name) { "name": "Red",
this.applySetting('THEME_CLASS', name); "vibrant": false
document.documentElement.className = name; },
}, {
"color": "#9b59b6",
setActiveColor (color, vibrant) { "name": "Purple",
// By default, the color is vibrant. "vibrant": false
if(vibrant == null) vibrant = true; },
{
document.documentElement.style.setProperty('--ac-color', color); "color": "#2980b9",
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff'); "name": "Blue",
"vibrant": false
this.applySetting('THEME_COLOR', color.toUpperCase()); },
this.applySetting('THEME_COLOR_VIBRANT', vibrant); ],
}, settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
getActiveColor () { THEME_COLOR: '',
// This strips extra spaces and # signs from the strings. THEME_COLOR_VIBRANT: true,
const strip = (str) => str.replace(/#/g, '').replace(/ /g, ''); DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
},
applySetting (key, value) {
this.settings[key] = value;
this.$store.commit('postwoman/applySetting', [key, value]);
},
toggleSetting (key) {
this.settings[key] = !this.settings[key];
this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
}
},
beforeMount () {
this.settings.THEME_COLOR = this.getActiveColor();
} }
}
},
components: {
'pw-section': section,
'swatch': swatch
},
methods: {
applyTheme(name) {
this.applySetting('THEME_CLASS', name);
document.documentElement.className = name;
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant == null) vibrant = true;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant);
},
getActiveColor() {
// This strips extra spaces and # signs from the strings.
const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
},
applySetting(key, value) {
this.settings[key] = value;
this.$store.commit('postwoman/applySetting', [key, value]);
},
toggleSetting(key) {
this.settings[key] = !this.settings[key];
this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
} }
}
</script> </script>

184
pages/websocket.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" label="Request" ref="request">
<ul> <ul>
<li> <li>
@@ -13,36 +12,31 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Communication" id="response" ref="response"> <pw-section class="purple" label="Communication" id="response" ref="response">
<ul> <ul>
<li> <li>
<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 }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span> </span>
<span v-else>(Waiting for connection...)</span> <span v-else>(Waiting for connection...)</span>
</div> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<label for="message">Message</label> <label for="message">Message</label>
<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>&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>
</pw-section> </pw-section>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
div.log { div.log {
margin: 4px; margin: 4px;
@@ -54,7 +48,8 @@
height: 256px; height: 256px;
overflow: auto; overflow: auto;
&, span { &,
span {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
font-family: monospace; font-family: monospace;
@@ -65,142 +60,116 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
} }
</style>
</style>
<script> <script>
import section from "../components/section"; import section from "../components/section";
export default { export default {
components: { components: {
'pw-section': section 'pw-section': section
}, },
data() {
data () {
return { return {
connectionState: false, connectionState: false,
url: "wss://echo.websocket.org", url: "wss://echo.websocket.org",
socket: null, socket: null,
communication: { communication: {
log: null, log: null,
input: "" input: ""
} }
} }
}, },
computed: { computed: {
toggleConnectionVerb () { toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect"; return !this.connectionState ? "Connect" : "Disconnect";
}, },
urlValid() {
urlValid () { const pattern = new RegExp('^(wss?:\\/\\/)?' +
const pattern = new RegExp('^(wss?:\\/\\/)?' + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + '((\\d{1,3}\\.){3}\\d{1,3}))' +
'((\\d{1,3}\\.){3}\\d{1,3}))' + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + '(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\?[;&a-z\\d%_.~+=-]*)?' + '(\\#[-a-z\\d_]*)?$', 'i');
'(\\#[-a-z\\d_]*)?$', 'i'); return pattern.test(this.url);
return pattern.test(this.url);
} }
}, },
methods: { methods: {
toggleConnection () { toggleConnection() {
// If it is connecting: // If it is connecting:
if(!this.connectionState) return this.connect(); if (!this.connectionState) return this.connect();
// Otherwise, it's disconnecting. // Otherwise, it's disconnecting.
else return this.disconnect(); else return this.disconnect();
}, },
connect() {
connect () { this.communication.log = [{
this.communication.log = [ payload: `Connecting to ${this.url}...`,
{ source: 'info',
payload: `Connecting to ${this.url}...`, color: 'lime'
source: 'info', }];
color: 'lime'
}
];
try { try {
this.socket = new WebSocket(this.url); this.socket = new WebSocket(this.url);
this.socket.onopen = (event) => {
this.socket.onopen = (event) => { this.connectionState = true;
this.connectionState = true; this.communication.log = [{
payload: `Connected to ${this.url}.`,
this.communication.log = [ source: 'info',
{ color: 'lime'
payload: `Connected to ${this.url}.`, }];
source: 'info', };
color: 'lime' this.socket.onerror = (event) => {
} this.handleError();
]; };
}; this.socket.onclose = (event) => {
this.connectionState = false;
this.socket.onerror = (event) => { this.communication.log.push({
this.handleError(); payload: `Disconnected from ${this.url}.`,
}; source: 'info',
color: 'red'
this.socket.onclose = (event) => { });
this.connectionState = false; };
this.socket.onmessage = (event) => {
this.communication.log.push({ this.communication.log.push({
payload: `Disconnected from ${this.url}.`, payload: event.data,
source: 'info', source: 'server'
color: 'red' });
}); }
}; } catch (ex) {
this.handleError(ex);
this.socket.onmessage = (event) => {
this.communication.log.push({
payload: event.data,
source: 'server'
});
}
}catch(ex){
this.handleError(ex);
} }
}, },
disconnect() {
disconnect () { if (this.socket != null) this.socket.close();
if(this.socket != null) this.socket.close();
}, },
handleError(error) {
handleError (error) { this.disconnect();
this.disconnect(); this.connectionState = false;
this.connectionState = false; this.communication.log.push({
payload: `An error has occurred.`,
this.communication.log.push({ source: 'info',
payload: `An error has occurred.`, color: 'red'
source: 'info', });
color: 'red' if (error != null) this.communication.log.push({
}); payload: error,
if(error != null) this.communication.log.push({ source: 'info',
payload: error, color: 'red'
source: 'info', });
color: 'red'
});
}, },
sendMessage() {
sendMessage () {
const message = this.communication.input; const message = this.communication.input;
this.socket.send(message); this.socket.send(message);
this.communication.log.push({ this.communication.log.push({
payload: message, payload: message,
source: 'client' source: 'client'
}); });
this.communication.input = ""; this.communication.input = "";
}, },
collapse({
collapse({target}) { target
}) {
const el = target.parentNode.className; const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle('hidden'); document.getElementsByClassName(el)[0].classList.toggle('hidden');
}, },
getSourcePrefix(source) {
getSourcePrefix(source){
const sourceEmojis = { const sourceEmojis = {
// Source used for info messages. // Source used for info messages.
'info': 'ℹ️ [INFO]:\t', 'info': 'ℹ️ [INFO]:\t',
@@ -209,11 +178,10 @@
// Source used for server to client messages. // Source used for server to client messages.
'server': '📥 [RECEIVED]:\t' 'server': '📥 [RECEIVED]:\t'
}; };
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]; if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return ''; return '';
} }
} }
} }
</script> </script>