Merge branch 'master' into master

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;

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"
           />
         </li>
         <div>
@@ -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
+      }
+    },
   },
 }
 </script>

package-lock.json

@@ -2175,9 +2175,9 @@
             }
         },
         "@nuxtjs/axios": {
-            "version": "5.10.2",
+            "version": "5.10.3",
-            "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.10.2.tgz",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.10.3.tgz",
-            "integrity": "sha512-OIrA9gwWSxmHkUu5UNNfGkYtHu4l4c5MEhCsc9n+IgTT5u/oGgrvoVC1Kh+p0Cgqz+7IkRmyf0TKif7VoAnLLg==",
+            "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",
+            "version": "10.2.2",
-            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.0.tgz",
+            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.2.tgz",
-            "integrity": "sha512-4Dw2XMtEOGpICl0wvicE5KT/eFlt/kmwMmpNS4v09I/ywRWuR5udbMWjdfZez24jE6r0bQmPpkLZ1+wUGE1S+w==",
+            "integrity": "sha512-78kNqNdDeKrnqWsexAmkOU3Z5wi+1CsQmUmfCuYgMTE8E4rAIX8RHW7xgxwAZ+LAayb7Cca4uYX4P3LlevzjVg==",
             "dev": true,
             "requires": {
                 "chalk": "^4.0.0",
@@ -9653,9 +9653,9 @@
             }
         },
         "nuxt-i18n": {
-            "version": "6.10.1",
+            "version": "6.11.0",
-            "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.10.1.tgz",
+            "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.11.0.tgz",
-            "integrity": "sha512-ePnvYzKN/DglTU/R6YQHvEpg1lwP+7IdOIoovG8E2sDE1ILWHPD0IyRkDHWqbtCCPe01puopqyAWPCEFpuNyZg==",
+            "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",
+            "version": "8.17.4",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.17.3.tgz",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.17.4.tgz",
-            "integrity": "sha512-sWjGOL7dXo6rYcPQmlY8FN/beLxq2aCnTZMSxfW0yW78rRGpqWrqXJURH56kvMYCnyNCepBjGWEEW0rbFiig5Q=="
+            "integrity": "sha512-wpk/drIkPf6gHCtvHc8zAZ1nsWBZ+/OOJYtJxqhYD6CKT0FJAG5oypwgF9kABt30FBWhl8NEb/QY+vaaBARlFg=="
         },
         "vue-loader": {
             "version": "15.9.1",

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",

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",
         })

pages/index.vue

@@ -904,7 +904,7 @@
               />
             </li>
           </ul>
-          <ul v-for="(value, key) in response.headers" :key="key">
+          <ul v-for="(value, key) in response.headers" :key="key" class="response-headers">
             <li>
               <label :for="key">{{ key }}</label>
               <input :id="key" :value="value" :name="key" readonly />