diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 43b3bade6..df628686b 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -1,5 +1,5 @@
-
+
-
diff --git a/components/http/Response.vue b/components/http/Response.vue
index af3993fdf..a799de11a 100644
--- a/components/http/Response.vue
+++ b/components/http/Response.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 556180165..7a4f2a4de 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,6 +1,6 @@
-
+
-
@@ -34,7 +34,7 @@
-
+
-
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 52a2edbe4..dd5309e4f 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,6 +1,6 @@
-
+
-
@@ -43,12 +43,7 @@
-
+
-
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 34f825402..e480d8503 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,6 +1,6 @@
-
+
-
@@ -36,12 +36,7 @@
-
+
-
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index df0b4936c..13ab1139b 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,6 +1,6 @@
-
+
-
@@ -10,7 +10,6 @@
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
- class="md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
@@ -22,7 +21,6 @@
id="connect"
:disabled="!urlValid"
name="connect"
- class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="toggleConnection"
>
{{ !connectionState ? $t("connect") : $t("disconnect") }}
@@ -35,14 +33,86 @@
+
+
+
+ -
+
+
+
-
+
-
@@ -100,6 +170,8 @@ export default {
input: "",
},
currentIndex: -1, // index of the message log array to put in input box
+ protocols: [],
+ activeProtocols: [],
}
},
computed: {
@@ -111,6 +183,18 @@ export default {
url() {
this.debouncer()
},
+ protocols: {
+ handler(newVal) {
+ this.activeProtocols = newVal
+ .filter((item) =>
+ Object.prototype.hasOwnProperty.call(item, "active")
+ ? item.active === true
+ : true
+ )
+ .map(({ value }) => value)
+ },
+ deep: true,
+ },
},
mounted() {
if (process.browser) {
@@ -143,7 +227,7 @@ export default {
},
]
try {
- this.socket = new WebSocket(this.url)
+ this.socket = new WebSocket(this.url, this.activeProtocols)
this.socket.onopen = () => {
this.connectionState = true
this.communication.log = [
@@ -255,6 +339,24 @@ export default {
break
}
},
+ addProtocol() {
+ this.protocols.push({ value: "", active: true })
+ },
+ deleteProtocol({ index }) {
+ const oldProtocols = this.protocols.slice()
+ this.$delete(this.protocols, index)
+ this.$toast.error(this.$t("deleted"), {
+ icon: "delete",
+ action: {
+ text: this.$t("undo"),
+ duration: 4000,
+ onClick: (_, toastObject) => {
+ this.protocols = oldProtocols
+ toastObject.remove()
+ },
+ },
+ })
+ },
},
}
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 2fec3efe8..671daa615 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -47,18 +47,6 @@ export default {
},
},
},
- mounted() {
- this._keyListener = function (e) {
- if (e.key === "Escape") {
- e.preventDefault()
- this.hideModal()
- }
- }
- document.addEventListener("keydown", this._keyListener.bind(this))
- },
- beforeDestroy() {
- document.removeEventListener("keydown", this._keyListener)
- },
methods: {
hideModal() {
this.$emit("hide-modal")
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 625ab9ee8..1758d8701 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -1,6 +1,13 @@
-
-