diff --git a/assets/css/styles.scss b/assets/css/styles.scss index db3c16a49..e1cb5301a 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -681,6 +681,11 @@ ol { padding: 0; list-style-type: none; + &.response-headers { + display: inline-flex; + width: 50%; + } + ul, ol { margin: 0; diff --git a/components/realtime/websocket.vue b/components/realtime/websocket.vue index fba150ece..a15d259fb 100644 --- a/components/realtime/websocket.vue +++ b/components/realtime/websocket.vue @@ -45,6 +45,8 @@ v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null" + @keyup.up="connectionState ? walkHistory('up') : null" + @keyup.down="connectionState ? walkHistory('down') : null" />
@@ -80,6 +82,7 @@ export default { log: null, input: "", }, + currentIndex: -1, //index of the message log array to put in input box } }, computed: { @@ -104,7 +107,7 @@ export default { ] try { this.socket = new WebSocket(this.url) - this.socket.onopen = event => { + this.socket.onopen = (event) => { this.connectionState = true this.communication.log = [ { @@ -118,10 +121,10 @@ export default { 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: this.$t("disconnected_from", { name: this.url }), @@ -133,7 +136,7 @@ export default { icon: "sync_disabled", }) } - this.socket.onmessage = event => { + this.socket.onmessage = (event) => { this.communication.log.push({ payload: event.data, source: "server", @@ -177,6 +180,37 @@ export default { }) this.communication.input = "" }, + walkHistory(direction) { + const clientMessages = this.communication.log.filter((msg) => msg.source === "client") + const length = clientMessages.length + switch (direction) { + case "up": + if (length > 0 && this.currentIndex !== 0) { + //does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed + if (this.currentIndex === -1) { + this.currentIndex = length - 1 + this.communication.input = clientMessages[this.currentIndex].payload + } else if (this.currentIndex === 0) { + this.communication.input = clientMessages[0].payload + } else if (this.currentIndex > 0) { + this.currentIndex = this.currentIndex - 1 + this.communication.input = clientMessages[this.currentIndex].payload + } + } + break + case "down": + if (length > 0 && this.currentIndex > -1) { + if (this.currentIndex === length - 1) { + this.currentIndex = -1 + this.communication.input = "" + } else if (this.currentIndex < length - 1) { + this.currentIndex = this.currentIndex + 1 + this.communication.input = clientMessages[this.currentIndex].payload + } + } + break + } + }, }, } diff --git a/package-lock.json b/package-lock.json index 8e69816c1..aabb7142e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2175,9 +2175,9 @@ } }, "@nuxtjs/axios": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.10.2.tgz", - "integrity": "sha512-OIrA9gwWSxmHkUu5UNNfGkYtHu4l4c5MEhCsc9n+IgTT5u/oGgrvoVC1Kh+p0Cgqz+7IkRmyf0TKif7VoAnLLg==", + "version": "5.10.3", + "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.10.3.tgz", + "integrity": "sha512-cCPeix6S0yLftiTnD9cpZSDsCNYD5/5EB9Q9iB8WaNZsGMPcwM5XQQVFcenMIv9Dr+SvySdOUdDL9rvlfyhdkg==", "requires": { "@nuxtjs/proxy": "^1.3.3", "axios": "^0.19.2", @@ -8156,9 +8156,9 @@ "dev": true }, "lint-staged": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.0.tgz", - "integrity": "sha512-4Dw2XMtEOGpICl0wvicE5KT/eFlt/kmwMmpNS4v09I/ywRWuR5udbMWjdfZez24jE6r0bQmPpkLZ1+wUGE1S+w==", + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.2.tgz", + "integrity": "sha512-78kNqNdDeKrnqWsexAmkOU3Z5wi+1CsQmUmfCuYgMTE8E4rAIX8RHW7xgxwAZ+LAayb7Cca4uYX4P3LlevzjVg==", "dev": true, "requires": { "chalk": "^4.0.0", @@ -9653,9 +9653,9 @@ } }, "nuxt-i18n": { - "version": "6.10.1", - "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.10.1.tgz", - "integrity": "sha512-ePnvYzKN/DglTU/R6YQHvEpg1lwP+7IdOIoovG8E2sDE1ILWHPD0IyRkDHWqbtCCPe01puopqyAWPCEFpuNyZg==", + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.11.0.tgz", + "integrity": "sha512-gavslWFIEezY0IUsmNb5GR25jSgWYoH4XKHUkRNGopDvIGA0+xmNx4kpA1BcWTKM9DVDI2BqXfxIROHy0XGtXQ==", "requires": { "@babel/parser": "^7.5.5", "@babel/traverse": "^7.5.5", @@ -13801,9 +13801,9 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==" }, "vue-i18n": { - "version": "8.17.3", - "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.17.3.tgz", - "integrity": "sha512-sWjGOL7dXo6rYcPQmlY8FN/beLxq2aCnTZMSxfW0yW78rRGpqWrqXJURH56kvMYCnyNCepBjGWEEW0rbFiig5Q==" + "version": "8.17.4", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.17.4.tgz", + "integrity": "sha512-wpk/drIkPf6gHCtvHc8zAZ1nsWBZ+/OOJYtJxqhYD6CKT0FJAG5oypwgF9kABt30FBWhl8NEb/QY+vaaBARlFg==" }, "vue-loader": { "version": "15.9.1", diff --git a/package.json b/package.json index 4537eaafe..3feb3353b 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "printWidth": 100 }, "dependencies": { - "@nuxtjs/axios": "^5.10.2", + "@nuxtjs/axios": "^5.10.3", "@nuxtjs/gtm": "^2.2.3", "@nuxtjs/pwa": "^3.0.0-beta.20", "@nuxtjs/robots": "^2.4.2", @@ -41,7 +41,7 @@ "graphql": "^14.6.0", "graphql-language-service-interface": "^2.3.3", "nuxt": "^2.12.2", - "nuxt-i18n": "^6.10.1", + "nuxt-i18n": "^6.11.0", "paho-mqtt": "^1.1.0", "socket.io-client": "^2.3.0", "socketio-wildcard": "^2.0.0", @@ -56,7 +56,7 @@ "@nuxtjs/google-analytics": "^2.2.3", "cypress": "^4.5.0", "husky": "^4.2.5", - "lint-staged": "^10.2.0", + "lint-staged": "^10.2.2", "node-sass": "^4.14.0", "prettier": "^2.0.5", "pretty-quick": "^2.0.1", diff --git a/pages/doc.vue b/pages/doc.vue index 601fef02a..a5ab7cd29 100644 --- a/pages/doc.vue +++ b/pages/doc.vue @@ -341,6 +341,7 @@ export default { getDoc() { try { this.items = JSON.parse(this.collectionJSON) + this.$toast.clear() this.$toast.info(this.$t("docs_generated"), { icon: "book", }) diff --git a/pages/index.vue b/pages/index.vue index dc449ad2e..a523eae4e 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -904,7 +904,7 @@ /> -