BS-Server-demo-v2: use dialog to display errors.

eclipse-leshan · Jun 25, 2021 · 15feb05 · 15feb05
1 parent b6ffcbc
commit 15feb05
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 35 deletions.
diff --git a/leshan-bsserver-demo/webapp2/src/plugins/axios.js b/leshan-bsserver-demo/webapp2/src/plugins/axios.js
@@ -1,6 +1,6 @@
 "use strict";
 
-import Vue from 'vue';
+import Vue from "vue";
 import axios from "axios";
 
 // Full config:  https://github.com/axios/axios#request-config
@@ -12,6 +12,7 @@ let config = {
   // baseURL: process.env.baseURL || process.env.apiUrl || ""
   // timeout: 60 * 1000, // Timeout
   // withCredentials: true, // Check cross-site Access-Control
+  responseType: "text",
 };
 
 const _axios = axios.create(config);
@@ -30,11 +31,35 @@ _axios.interceptors.request.use(
 // Add a response interceptor
 _axios.interceptors.response.use(
   function(response) {
-    // Do something with response data
+    // show error message if device return a failure code
+    if (response.data && response.data.failure) {
+      let msg = `Device response : ${response.data.status}`;
+      if (response.data.errormessage) msg += ` - ${response.data.errormessage}`;
+      Vue.prototype.$dialog.notify.warning(msg, {
+        position: "bottom-right",
+        timeout: 5000,
+      });
+    }
     return response;
   },
   function(error) {
-    // Do something with response error
+    let message;
+    if (error.response) {
+      console.log(
+        `${error.message}[${error.response.status}]:${error.response.data}`
+      );
+      message = error.response.data ? error.response.data : error.message;
+    } else if (error.request) {
+      console.log(`${error.message}:${error.request.data}`);
+      message = error.request.data ? error.request.data : error.message;
+    } else {
+      console.log(error.message);
+      message = error.message;
+    }
+    Vue.prototype.$dialog.notify.error(message, {
+      position: "bottom-right",
+      timeout: 5000,
+    });
     return Promise.reject(error);
   }
 );
@@ -46,16 +71,16 @@ Plugin.install = function(Vue) {
     axios: {
       get() {
         return _axios;
-      }
+      },
     },
     $axios: {
       get() {
         return _axios;
-      }
+      },
     },
   });
 };
 
-Vue.use(Plugin)
+Vue.use(Plugin);
 
 export default Plugin;
diff --git a/leshan-bsserver-demo/webapp2/src/views/Server.vue b/leshan-bsserver-demo/webapp2/src/views/Server.vue
@@ -7,7 +7,7 @@
         </v-card-title>
 
         <v-card-subtitle class="text-center">
-           Here some information about this server.
+          Here some information about this server.
         </v-card-subtitle>
       </v-card-text>
     </v-card>
@@ -72,9 +72,9 @@
 
           <v-card-text>
             <p>
-              If you want to connect a client using DTLS with Raw Public Key(RPK)
-              mode, your client need to trust this key to accept DTLS connection
-              with this server.
+              If you want to connect a client using DTLS with Raw Public
+              Key(RPK) mode, your client need to trust this key to accept DTLS
+              connection with this server.
             </p>
             <u>Elliptic Curve parameters :</u>
             <div>
@@ -171,31 +171,25 @@ export default {
     },
   },
   beforeMount() {
-    this.axios
-      .get("api/server/endpoint")
-      .then((response) => {
-        this.coapurl = `coap://${location.hostname}:${response.data.unsecuredEndpointPort}`;
-        this.coapsurl = `coaps://${location.hostname}:${response.data.securedEndpointPort}`;
-      })
-      .catch((error) => console.log(error));
-    this.axios
-      .get("api/server/security")
-      .then((response) => {
-        if (response.data.certificate) {
-          this.certificate = response.data.certificate;
-          this.certificate.bytesDer = base64ToBytes(this.certificate.b64Der);
-          this.certificate.hexDer = toHex(this.certificate.bytesDer);
-          this.pubkey = response.data.certificate.pubkey;
-          this.pubkey.bytesDer = base64ToBytes(this.pubkey.b64Der);
-          this.pubkey.hexDer = toHex(this.pubkey.bytesDer);
-        } else if (response.data.pubkey) {
-          this.certificate = null;
-          this.pubkey = response.data.pubkey;
-          this.pubkey.bytesDer = base64ToBytes(this.pubkey.b64Der);
-          this.pubkey.hexDer = toHex(this.pubkey.bytesDer);
-        }
-      })
-      .catch((error) => console.log(error));
+    this.axios.get("api/server/endpoint").then((response) => {
+      this.coapurl = `coap://${location.hostname}:${response.data.unsecuredEndpointPort}`;
+      this.coapsurl = `coaps://${location.hostname}:${response.data.securedEndpointPort}`;
+    });
+    this.axios.get("api/server/security").then((response) => {
+      if (response.data.certificate) {
+        this.certificate = response.data.certificate;
+        this.certificate.bytesDer = base64ToBytes(this.certificate.b64Der);
+        this.certificate.hexDer = toHex(this.certificate.bytesDer);
+        this.pubkey = response.data.certificate.pubkey;
+        this.pubkey.bytesDer = base64ToBytes(this.pubkey.b64Der);
+        this.pubkey.hexDer = toHex(this.pubkey.bytesDer);
+      } else if (response.data.pubkey) {
+        this.certificate = null;
+        this.pubkey = response.data.pubkey;
+        this.pubkey.bytesDer = base64ToBytes(this.pubkey.b64Der);
+        this.pubkey.hexDer = toHex(this.pubkey.bytesDer);
+      }
+    });
   },
 };
 </script>