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

refactor(ui): minor improvements on buttons and actions

Browse Source
This commit is contained in:
liyasthomas
2021-07-28 22:23:43 +05:30
parent 1a4d3dc91a
commit 4f71e801d5
15 changed files with 80 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/realtime/Mqtt.vue
View File

@@ -29,10 +29,9 @@
<ButtonPrimary
id="connect"
:disabled="!validUrl"
class="rounded-l-none"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
class="rounded-l-none w-28"
:label="connectionState ? $t('disconnect') : $t('connect')"
reverse
:loading="connectingState"
@click.native="toggleConnection"
/>
</div>
@@ -88,7 +87,6 @@
name="get"
class="rounded-l-none"
:disabled="!canpublish"
icon="send"
:label="$t('mqtt_publish')"
@click.native="publish"
/>
@@ -120,7 +118,6 @@
name="get"
:disabled="!cansubscribe"
class="rounded-l-none"
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label="
subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
"
@@ -157,6 +154,7 @@ export default defineComponent({
sub_topic: "",
msg: "",
connectionState: false,
connectingState: false,
log: null,
manualDisconnect: false,
subscriptionState: false,
@@ -195,6 +193,7 @@ export default defineComponent({
if (data.url === this.url) this.isUrlValid = data.result
},
connect() {
this.connectingState = true
this.log = [
{
payload: this.$t("connecting_to", { name: this.url }),
@@ -222,6 +221,7 @@ export default defineComponent({
})
},
onConnectionFailure() {
this.connectingState = false
this.connectionState = false
this.log.push({
payload: this.$t("error_occurred"),
@@ -231,6 +231,7 @@ export default defineComponent({
})
},
onConnectionSuccess() {
this.connectingState = false
this.connectionState = true
this.log.push({
payload: this.$t("connected_to", { name: this.url }),
@@ -268,6 +269,7 @@ export default defineComponent({
})
},
onConnectionLost() {
this.connectingState = false
this.connectionState = false
if (this.manualDisconnect) {
this.$toast.error(this.$t("disconnected"), {

15
components/realtime/Socketio.vue
View File

@@ -16,7 +16,9 @@
bg-primaryLight
border border-divider
rounded-l
flex
font-semibold font-mono
flex-1
text-secondaryDark
w-full
py-1
@@ -34,7 +36,9 @@
class="
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
text-secondaryDark
w-full
py-1
@@ -49,10 +53,9 @@
id="connect"
:disabled="!urlValid"
name="connect"
class="rounded-l-none"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
class="rounded-l-none w-28"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
:loading="connectingState"
@click.native="toggleConnection"
/>
</div>
@@ -132,7 +135,6 @@
name="send"
:disabled="!connectionState"
class="rounded-l-none"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
@@ -165,6 +167,7 @@ export default defineComponent({
url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
path: "/socket.io",
isUrlValid: true,
connectingState: false,
connectionState: false,
io: null,
communication: {
@@ -213,6 +216,7 @@ export default defineComponent({
else return this.disconnect()
},
connect() {
this.connectingState = true
this.communication.log = [
{
payload: this.$t("connecting_to", { name: this.url }),
@@ -231,6 +235,7 @@ export default defineComponent({
// Add ability to listen to all events
wildcard(Client.Manager)(this.io)
this.io.on("connect", () => {
this.connectingState = false
this.connectionState = true
this.communication.log = [
{
@@ -262,6 +267,7 @@ export default defineComponent({
this.handleError()
})
this.io.on("disconnect", () => {
this.connectingState = false
this.connectionState = false
this.communication.log.push({
payload: this.$t("disconnected_from", { name: this.url }),
@@ -289,6 +295,7 @@ export default defineComponent({
},
handleError(error) {
this.disconnect()
this.connectingState = false
this.connectionState = false
this.communication.log.push({
payload: this.$t("error_occurred"),

8
components/realtime/Sse.vue
View File

@@ -29,10 +29,9 @@
id="start"
:disabled="!serverValid"
name="start"
class="rounded-l-none"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
class="rounded-l-none w-22"
:label="!connectionSSEState ? $t('start') : $t('stop')"
reverse
:loading="connectingState"
@click.native="toggleSSEConnection"
/>
</div>
@@ -62,6 +61,7 @@ export default {
data() {
return {
connectionSSEState: false,
connectingState: false,
server: "https://express-eventsource.herokuapp.com/events",
isUrlValid: true,
sse: null,
@@ -104,6 +104,7 @@ export default {
else return this.stop()
},
start() {
this.connectingState = true
this.events.log = [
{
payload: this.$t("connecting_to", { name: this.server }),
@@ -115,6 +116,7 @@ export default {
try {
this.sse = new EventSource(this.server)
this.sse.onopen = () => {
this.connectingState = false
this.connectionSSEState = true
this.events.log = [
{

9
components/realtime/Websocket.vue
View File

@@ -31,11 +31,10 @@
<ButtonPrimary
id="connect"
:disabled="!urlValid"
class="rounded-l-none"
class="rounded-l-none w-28"
name="connect"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="!connectionState ? $t('connect') : $t('disconnect')"
reverse
:loading="connectingState"
@click.native="toggleConnection"
/>
</div>
@@ -171,7 +170,6 @@
name="send"
:disabled="!connectionState"
class="rounded-l-none"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
@@ -198,6 +196,7 @@ export default defineComponent({
data() {
return {
connectionState: false,
connectingState: false,
url: "wss://echo.websocket.org",
isUrlValid: true,
socket: null,
@@ -263,8 +262,10 @@ export default defineComponent({
},
]
try {
this.connectingState = true
this.socket = new WebSocket(this.url, this.activeProtocols)
this.socket.onopen = () => {
this.connectingState = false
this.connectionState = true
this.communication.log = [
{