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

Initial prettier formatted files

Browse Source
This commit is contained in:
Dmitry Yankowski
2020-02-24 13:44:50 -05:00
parent 1543c990ca
commit 777e629b3d
83 changed files with 18556 additions and 19258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
pages/realtime.vue
View File

@@ -2,12 +2,12 @@
<div class="page">
<section id="options">
<input id="tab-one" type="radio" name="options" checked="checked" />
<label for="tab-one">{{ $t("websocket") }}</label>
<label for="tab-one">{{ $t('websocket') }}</label>
<div class="tab">
<pw-section class="blue" :label="$t('request')" ref="request">
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
<label for="url">{{ $t('url') }}</label>
<input
id="url"
type="url"
@@ -19,16 +19,11 @@
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
{{ !connectionState ? $t('connect') : $t('disconnect') }}
<span>
<i class="material-icons">
{{ !connectionState ? "sync" : "sync_disabled" }}
{{ !connectionState ? 'sync' : 'sync_disabled' }}
</i>
</span>
</button>
@@ -37,15 +32,10 @@
</ul>
</pw-section>
<pw-section
class="purple"
:label="$t('communication')"
id="response"
ref="response"
>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
<ul>
<li>
<label for="log">{{ $t("log") }}</label>
<label for="log">{{ $t('log') }}</label>
<div id="log" name="log" class="log">
<span v-if="communication.log">
<span
@@ -56,13 +46,13 @@
}}{{ logEntry.payload }}</span
>
</span>
<span v-else>{{ $t("waiting_for_connection") }}</span>
<span v-else>{{ $t('waiting_for_connection') }}</span>
</div>
</li>
</ul>
<ul>
<li>
<label for="message">{{ $t("message") }}</label>
<label for="message">{{ $t('message') }}</label>
<input
id="message"
name="message"
@@ -75,13 +65,8 @@
<div>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
{{ $t("send") }}
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
{{ $t('send') }}
<span>
<i class="material-icons">send</i>
</span>
@@ -92,12 +77,12 @@
</pw-section>
</div>
<input id="tab-two" type="radio" name="options" />
<label for="tab-two">{{ $t("sse") }}</label>
<label for="tab-two">{{ $t('sse') }}</label>
<div class="tab">
<pw-section class="blue" :label="$t('request')" ref="request">
<ul>
<li>
<label for="server">{{ $t("server") }}</label>
<label for="server">{{ $t('server') }}</label>
<input
id="server"
type="url"
@@ -115,10 +100,10 @@
name="start"
@click="toggleSSEConnection"
>
{{ !connectionSSEState ? $t("start") : $t("stop") }}
{{ !connectionSSEState ? $t('start') : $t('stop') }}
<span>
<i class="material-icons">
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
{{ !connectionSSEState ? 'sync' : 'sync_disabled' }}
</i>
</span>
</button>
@@ -127,15 +112,10 @@
</ul>
</pw-section>
<pw-section
class="purple"
:label="$t('communication')"
id="response"
ref="response"
>
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
<ul>
<li>
<label for="log">{{ $t("events") }}</label>
<label for="log">{{ $t('events') }}</label>
<div id="log" name="log" class="log">
<span v-if="events.log">
<span
@@ -146,7 +126,7 @@
}}{{ logEntry.payload }}</span
>
</span>
<span v-else>{{ $t("waiting_for_connection") }}</span>
<span v-else>{{ $t('waiting_for_connection') }}</span>
</div>
<div id="result"></div>
</li>
@@ -171,7 +151,7 @@ div.log {
&,
span {
font-size: 16px;
font-family: "Roboto Mono", monospace;
font-family: 'Roboto Mono', monospace;
font-weight: 400;
}
@@ -187,252 +167,251 @@ div.log {
<script>
export default {
components: {
"pw-section": () => import("../components/section")
'pw-section': () => import('../components/section'),
},
data() {
return {
connectionState: false,
url: "wss://echo.websocket.org",
url: 'wss://echo.websocket.org',
socket: null,
communication: {
log: null,
input: ""
input: '',
},
connectionSSEState: false,
server: "https://express-eventsource.herokuapp.com/events",
server: 'https://express-eventsource.herokuapp.com/events',
sse: null,
events: {
log: null,
input: ""
}
};
input: '',
},
}
},
computed: {
urlValid() {
const protocol = "^(wss?:\\/\\/)?";
const protocol = '^(wss?:\\/\\/)?'
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/])$`
);
return validIP.test(this.url) || validHostname.test(this.url);
)
return validIP.test(this.url) || validHostname.test(this.url)
},
serverValid() {
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 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.server) || validHostname.test(this.server);
}
)
return validIP.test(this.server) || validHostname.test(this.server)
},
},
methods: {
toggleConnection() {
// If it is connecting:
if (!this.connectionState) return this.connect();
if (!this.connectionState) return this.connect()
// Otherwise, it's disconnecting.
else return this.disconnect();
else return this.disconnect()
},
connect() {
this.communication.log = [
{
payload: this.$t("connecting_to", { name: this.url }),
source: "info",
color: "var(--ac-color)"
}
];
payload: this.$t('connecting_to', { name: this.url }),
source: 'info',
color: 'var(--ac-color)',
},
]
try {
this.socket = new WebSocket(this.url);
this.socket = new WebSocket(this.url)
this.socket.onopen = event => {
this.connectionState = true;
this.connectionState = true
this.communication.log = [
{
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success(this.$t("connected"), {
icon: "sync"
});
};
payload: this.$t('connected_to', { name: this.url }),
source: 'info',
color: 'var(--ac-color)',
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t('connected'), {
icon: 'sync',
})
}
this.socket.onerror = event => {
this.handleError();
};
this.handleError()
}
this.socket.onclose = event => {
this.connectionState = false;
this.connectionState = false
this.communication.log.push({
payload: this.$t("disconnected_from", { name: this.url }),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error(this.$t("disconnected"), {
icon: "sync_disabled"
});
};
payload: this.$t('disconnected_from', { name: this.url }),
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t('disconnected'), {
icon: 'sync_disabled',
})
}
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(this.$t("something_went_wrong"), {
icon: "error"
});
this.handleError(ex)
this.$toast.error(this.$t('something_went_wrong'), {
icon: 'error',
})
}
},
disconnect() {
this.socket.close();
this.socket.close()
},
handleError(error) {
this.disconnect();
this.connectionState = false;
this.disconnect()
this.connectionState = false
this.communication.log.push({
payload: this.$t("error_occurred"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
payload: this.$t('error_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(),
})
},
sendMessage() {
const message = this.communication.input;
this.socket.send(message);
const message = this.communication.input
this.socket.send(message)
this.communication.log.push({
payload: message,
source: "client",
ts: new Date().toLocaleTimeString()
});
this.communication.input = "";
source: 'client',
ts: new Date().toLocaleTimeString(),
})
this.communication.input = ''
},
collapse({ target }) {
const el = target.parentNode.className;
document.getElementsByClassName(el)[0].classList.toggle("hidden");
const el = target.parentNode.className
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"
};
if (Object.keys(sourceEmojis).includes(source))
return sourceEmojis[source];
return "";
server: '\t📥 [RECEIVED]:\t',
}
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
return ''
},
toggleSSEConnection() {
// If it is connecting:
if (!this.connectionSSEState) return this.start();
if (!this.connectionSSEState) return this.start()
// Otherwise, it's disconnecting.
else return this.stop();
else return this.stop()
},
start() {
this.events.log = [
{
payload: this.$t("connecting_to", { name: this.server }),
source: "info",
color: "var(--ac-color)"
}
];
if (typeof EventSource !== "undefined") {
payload: this.$t('connecting_to', { name: this.server }),
source: 'info',
color: 'var(--ac-color)',
},
]
if (typeof EventSource !== 'undefined') {
try {
this.sse = new EventSource(this.server);
this.sse = new EventSource(this.server)
this.sse.onopen = event => {
this.connectionSSEState = true;
this.connectionSSEState = true
this.events.log = [
{
payload: this.$t("connected_to", { name: this.server }),
source: "info",
color: "var(--ac-color)",
ts: new Date().toLocaleTimeString()
}
];
this.$toast.success(this.$t("connected"), {
icon: "sync"
});
};
payload: this.$t('connected_to', { name: this.server }),
source: 'info',
color: 'var(--ac-color)',
ts: new Date().toLocaleTimeString(),
},
]
this.$toast.success(this.$t('connected'), {
icon: 'sync',
})
}
this.sse.onerror = event => {
this.handleSSEError();
};
this.handleSSEError()
}
this.sse.onclose = event => {
this.connectionSSEState = false;
this.connectionSSEState = false
this.events.log.push({
payload: this.$t("disconnected_from", { name: this.server }),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
this.$toast.error(this.$t("disconnected"), {
icon: "sync_disabled"
});
};
payload: this.$t('disconnected_from', { name: this.server }),
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
})
this.$toast.error(this.$t('disconnected'), {
icon: 'sync_disabled',
})
}
this.sse.onmessage = event => {
this.events.log.push({
payload: event.data,
source: "server",
ts: new Date().toLocaleTimeString()
});
};
source: 'server',
ts: new Date().toLocaleTimeString(),
})
}
} catch (ex) {
this.handleSSEError(ex);
this.$toast.error(this.$t("something_went_wrong"), {
icon: "error"
});
this.handleSSEError(ex)
this.$toast.error(this.$t('something_went_wrong'), {
icon: 'error',
})
}
} else {
this.events.log = [
{
payload: this.$t("browser_support_sse"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
}
];
payload: this.$t('browser_support_sse'),
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
},
]
}
},
handleSSEError(error) {
this.stop();
this.connectionSSEState = false;
this.stop()
this.connectionSSEState = false
this.events.log.push({
payload: this.$t("error_occurred"),
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
payload: this.$t('error_occurred'),
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
})
if (error !== null)
this.events.log.push({
payload: error,
source: "info",
color: "#ff5555",
ts: new Date().toLocaleTimeString()
});
source: 'info',
color: '#ff5555',
ts: new Date().toLocaleTimeString(),
})
},
stop() {
this.sse.onclose();
this.sse.close();
}
this.sse.onclose()
this.sse.close()
},
},
updated: function() {
this.$nextTick(function() {
const divLog = document.getElementById("log");
divLog.scrollBy(0, divLog.scrollHeight + 100);
});
}
};
const divLog = document.getElementById('log')
divLog.scrollBy(0, divLog.scrollHeight + 100)
})
},
}
</script>