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

: rotating_light: Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-25 13:44:34 +05:30
parent 96adfa0b5a
commit a09d7d76d3
35 changed files with 3133 additions and 2620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
pages/websocket.vue
View File

@@ -4,7 +4,13 @@
<ul>
<li>
<label for="url">URL</label>
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
<input
id="url"
type="url"
:class="{ error: !urlValid }"
v-model="url"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
@@ -18,13 +24,23 @@
</li>
</ul>
</pw-section>
<pw-section class="purple" icon="cloud_download" label="Communication" id="response" ref="response">
<pw-section
class="purple"
icon="cloud_download"
label="Communication"
id="response"
ref="response"
>
<ul>
<li>
<label for="log">Log</label>
<div id="log" name="log" class="log">
<span v-if="communication.log">
<span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
<span
v-for="(logEntry, index) in communication.log"
:style="{ color: logEntry.color }"
:key="index"
>@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
</span>
<span v-else>(waiting for connection)</span>
</div>
@@ -33,7 +49,14 @@
<ul>
<li>
<label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
<input
id="message"
name="message"
type="text"
v-model="communication.input"
:readonly="!connectionState"
@keyup.enter="connectionState ? sendMessage() : null"
/>
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
@@ -62,7 +85,7 @@
&,
span {
font-size: 18px;
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
}
span {
@@ -70,13 +93,13 @@
white-space: pre-wrap;
}
}
</style>
<script>
import section from "../components/section";
export default {
components: {
'pw-section': section
"pw-section": section
},
data() {
return {
@@ -87,19 +110,22 @@
log: null,
input: ""
}
}
};
},
computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid() {
const pattern = new RegExp('^(wss?:\\/\\/)?' +
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
'((\\d{1,3}\\.){3}\\d{1,3}))' +
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
'(\\?[;&a-z\\d%_.~+=-]*)?' +
'(\\#[-a-z\\d_]*)?$', 'i');
const pattern = new RegExp(
"^(wss?:\\/\\/)?" +
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
"((\\d{1,3}\\.){3}\\d{1,3}))" +
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
"(\\?[;&a-z\\d%_.~+=-]*)?" +
"(\\#[-a-z\\d_]*)?$",
"i"
);
return pattern.test(this.url);
}
},
@@ -111,51 +137,55 @@
else return this.disconnect();
},
connect() {
this.communication.log = [{
payload: `Connecting to ${this.url}...`,
source: 'info',
color: 'var(--ac-color)'
}];
this.communication.log = [
{
payload: `Connecting to ${this.url}...`,
source: "info",
color: "var(--ac-color)"
}
];
try {
this.socket = new WebSocket(this.url);
this.socket.onopen = (event) => {
this.socket.onopen = event => {
this.connectionState = true;
this.communication.log = [{
payload: `Connected to ${this.url}.`,
source: 'info',
color: 'var(--ac-color)',
ts: (new Date()).toLocaleTimeString()
}];
this.$toast.success('Connected', {
icon: 'sync'
this.communication.log = [
{
payload: `Connected to ${this.url}.`,
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success("Connected", {
icon: "sync"
});
};
this.socket.onerror = (event) => {
this.socket.onerror = event => {
this.handleError();
};
this.socket.onclose = (event) => {
this.socket.onclose = event => {
this.connectionState = false;
this.communication.log.push({
payload: `Disconnected from ${this.url}.`,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error('Disconnected', {
icon: 'sync_disabled'
this.$toast.error("Disconnected", {
icon: "sync_disabled"
});
};
this.socket.onmessage = (event) => {
this.socket.onmessage = event => {
this.communication.log.push({
payload: event.data,
source: 'server',
ts: (new Date()).toLocaleTimeString()
source: "server",
ts: new Date().toLocaleTimeString()
});
}
};
} catch (ex) {
this.handleError(ex);
this.$toast.error('Something went wrong!', {
icon: 'error'
this.$toast.error("Something went wrong!", {
icon: "error"
});
}
},
@@ -167,52 +197,51 @@
this.connectionState = false;
this.communication.log.push({
payload: `An error has occurred.`,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
});
if (error != null) this.communication.log.push({
payload: error,
source: 'info',
color: '#ff5555',
ts: (new Date()).toLocaleTimeString()
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
if (error != null)
this.communication.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
this.communication.log.push({
payload: message,
source: 'client',
ts: (new Date()).toLocaleTimeString()
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
},
collapse({
target
}) {
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle('hidden');
document.getElementsByClassName(el)[0].classList.toggle("hidden");
},
getSourcePrefix(source) {
const sourceEmojis = {
// Source used for info messages.
'info': '\tℹ️ [INFO]:\t',
info: "\tℹ️ [INFO]:\t",
// Source used for client to server messages.
'client': '\t👽 [SENT]:\t',
client: "\t👽 [SENT]:\t",
// Source used for server to client messages.
'server': '\t📥 [RECEIVED]:\t'
server: "\t📥 [RECEIVED]:\t"
};
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
return '';
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)
})
updated: function() {
this.$nextTick(function() {
var divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
}
};
</script>