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 {

66
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,20 +213,35 @@
</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'
},
{
name: 'redirection',
statusCodeRegex: new RegExp(/[3][0-9]+/),
className: 'redir-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'
},
]; ];
const parseHeaders = xhr => { const parseHeaders = xhr => {
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/); const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
const headerMap = {}; const headerMap = {};
@@ -246,17 +253,13 @@
}); });
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"; import section from "../components/section";
export default { export default {
components: { components: {
'pw-section': section 'pw-section': section
}, },
data() {
data () {
return { return {
method: 'GET', method: 'GET',
url: 'https://reqres.in', url: 'https://reqres.in',
@@ -280,7 +283,7 @@
} }
}, },
computed: { computed: {
statusCategory(){ statusCategory() {
return findStatusGroup(this.response.status); return findStatusGroup(this.response.status);
}, },
noHistoryToClear() { noHistoryToClear() {
@@ -288,10 +291,8 @@
}, },
isValidURL() { isValidURL() {
const protocol = '^(https?:\\/\\/)?'; const protocol = '^(https?:\\/\\/)?';
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 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])$"); 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])$");
return validIP.test(this.url) || validHostname.test(this.url); return validIP.test(this.url) || validHostname.test(this.url);
}, },
rawRequestBody() { rawRequestBody() {
@@ -342,7 +343,7 @@
} }
}, },
methods: { methods: {
findEntryStatus(entry){ findEntryStatus(entry) {
return findStatusGroup(entry.status); return findStatusGroup(entry.status);
}, },
deleteHistory(entry) { deleteHistory(entry) {
@@ -382,7 +383,7 @@
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken); xhr.setRequestHeader('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)
}) })
} }
@@ -402,7 +403,6 @@
} else { } else {
this.response.body = xhr.responseText this.response.body = xhr.responseText
} }
if (!this.isValidURL) { if (!this.isValidURL) {
alert('Please check the formatting of the URL'); alert('Please check the formatting of the URL');
return return
@@ -459,7 +459,6 @@
const textBody = event.target.value; const textBody = event.target.value;
const textBeforeCursor = textBody.substring(0, event.target.selectionStart); const textBeforeCursor = textBody.substring(0, event.target.selectionStart);
const textAfterCursor = textBody.substring(event.target.selectionEnd); const textAfterCursor = textBody.substring(event.target.selectionEnd);
if (event.which === 13) { if (event.which === 13) {
event.preventDefault(); event.preventDefault();
const oldSelectionStart = event.target.selectionStart; const oldSelectionStart = event.target.selectionStart;
@@ -467,15 +466,13 @@
const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || ""; const rightPadding = lastLine.match(/([\s\t]*).*/)[1] || "";
event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor; event.target.value = textBeforeCursor + '\n' + rightPadding + textAfterCursor;
setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1); setTimeout(() => event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + rightPadding.length + 1, 1);
} } else if (event.which === 9) {
else if (event.which === 9) {
event.preventDefault(); event.preventDefault();
const oldSelectionStart = event.target.selectionStart; const oldSelectionStart = event.target.selectionStart;
event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor; event.target.value = textBeforeCursor + '\xa0\xa0' + textAfterCursor;
event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2; event.target.selectionStart = event.target.selectionEnd = oldSelectionStart + 2;
return false; return false;
} }
}, },
copyResponse() { copyResponse() {
var copyText = document.getElementById("response-details"); var copyText = document.getElementById("response-details");
@@ -484,4 +481,5 @@
} }
} }
} }
</script> </script>

106
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>Background</h3> <h3 class="title">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> </li>
</ul> </ul>
<br><br>
<ul> <ul>
<li> <li>
<h3 class="title">Color</h3>
<h3>Color</h3>
<div class="colors"> <div class="colors">
<span v-for="entry in colors" :key="entry.color" <span v-for="entry in colors" :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)">
@click.prevent="setActiveColor(entry.color, entry.vibrant)"> <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
<swatch
:color="entry.color"
:name="entry.name"
:class="{ vibrant: entry.vibrant }"
:active="settings.THEME_COLOR === entry.color.toUpperCase()" />
</span> </span>
</div> </div>
<p> <p>
<input id="disableFrameColors" type="checkbox" <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
:checked="!settings.DISABLE_FRAME_COLORS"
@change="toggleSetting('DISABLE_FRAME_COLORS')">
<label for="disableFrameColors">Enable multi-colored frames</label> <label for="disableFrameColors">Enable multi-colored frames</label>
</p> </p>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
</div> </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", "name": "Dark (Default)", "class": "" }, "color": "#121212",
{ "color": "#DFDFDF", "name": "Light", "vibrant": true, "class": "light" } "name": "Dark (Default)",
"class": ""
},
{
"color": "#DFDFDF",
"name": "Light",
"vibrant": true,
"class": "light"
}
], ],
// You can define a new color here! It will simply store the color value. // You can define a new color here! It will simply store the color value.
colors: [ colors: [
// If the color is vibrant, black is used as the active foreground color. // If the color is vibrant, black is used as the active foreground color.
{ "color": "#51ff0d", "name":"Lime (Default)", "vibrant": true }, {
{ "color": "#FFC107", "name":"Yellow", "vibrant": true }, "color": "#51ff0d",
{ "color": "#E91E63", "name":"Pink", "vibrant": false }, "name": "Lime (Default)",
{ "color": "#e74c3c", "name":"Red", "vibrant": false }, "vibrant": true
{ "color": "#9b59b6", "name":"Purple", "vibrant": false }, },
{ "color": "#2980b9", "name":"Blue", "vibrant": false }, {
"color": "#FFC107",
"name": "Yellow",
"vibrant": true
},
{
"color": "#E91E63",
"name": "Pink",
"vibrant": false
},
{
"color": "#e74c3c",
"name": "Red",
"vibrant": false
},
{
"color": "#9b59b6",
"name": "Purple",
"vibrant": false
},
{
"color": "#2980b9",
"name": "Blue",
"vibrant": false
},
], ],
settings: { settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '', THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
THEME_COLOR: '', THEME_COLOR: '',
THEME_COLOR_VIBRANT: true, THEME_COLOR_VIBRANT: true,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
} }
} }
}, },
components: { components: {
'pw-section': section, 'pw-section': section,
'swatch': swatch 'swatch': swatch
}, },
methods: { methods: {
applyTheme (name) { applyTheme(name) {
this.applySetting('THEME_CLASS', name); this.applySetting('THEME_CLASS', name);
document.documentElement.className = name; document.documentElement.className = name;
}, },
setActiveColor(color, vibrant) {
setActiveColor (color, vibrant) {
// By default, the color is vibrant. // By default, the color is 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');
this.applySetting('THEME_COLOR', color.toUpperCase()); this.applySetting('THEME_COLOR', color.toUpperCase());
this.applySetting('THEME_COLOR_VIBRANT', vibrant); this.applySetting('THEME_COLOR_VIBRANT', vibrant);
}, },
getActiveColor() {
getActiveColor () {
// This strips extra spaces and # signs from the strings. // This strips extra spaces and # signs from the strings.
const strip = (str) => str.replace(/#/g, '').replace(/ /g, ''); const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');
return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`; return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
}, },
applySetting(key, value) {
applySetting (key, value) {
this.settings[key] = value; this.settings[key] = value;
this.$store.commit('postwoman/applySetting', [key, value]); this.$store.commit('postwoman/applySetting', [key, value]);
}, },
toggleSetting(key) {
toggleSetting (key) {
this.settings[key] = !this.settings[key]; this.settings[key] = !this.settings[key];
this.$store.commit('postwoman/applySetting', [key, this.settings[key]]); this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
} }
}, },
beforeMount() {
beforeMount () {
this.settings.THEME_COLOR = this.getActiveColor(); this.settings.THEME_COLOR = this.getActiveColor();
} }
} }
</script> </script>

80
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,7 +12,6 @@
</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>
@@ -26,23 +24,19 @@
</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,36 +60,30 @@
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}))' +
@@ -104,103 +93,83 @@
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}...`, payload: `Connecting to ${this.url}...`,
source: 'info', source: 'info',
color: 'lime' 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 = [{
this.communication.log = [
{
payload: `Connected to ${this.url}.`, payload: `Connected to ${this.url}.`,
source: 'info', source: 'info',
color: 'lime' color: 'lime'
} }];
];
}; };
this.socket.onerror = (event) => { this.socket.onerror = (event) => {
this.handleError(); this.handleError();
}; };
this.socket.onclose = (event) => { this.socket.onclose = (event) => {
this.connectionState = false; this.connectionState = false;
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'
}); });
}; };
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'
}); });
} }
}catch(ex){ } catch (ex) {
this.handleError(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({ this.communication.log.push({
payload: `An error has occurred.`, payload: `An error has occurred.`,
source: 'info', source: 'info',
color: 'red' color: 'red'
}); });
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'
}); });
}, },
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>