Server-demo-v2: Add more info about registration.

eclipse-leshan · Jun 1, 2021 · 748e9c5 · 748e9c5
1 parent 890818d
commit 748e9c5
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 9 deletions.
diff --git a/leshan-server-demo/webapp2/src/components/ClientInfo.vue b/leshan-server-demo/webapp2/src/components/ClientInfo.vue
@@ -0,0 +1,50 @@
+<template>
+  <span>
+    <!-- info icon -->
+    <v-tooltip :left="tooltipleft" :bottom="tooltipbottom">
+      <template v-slot:activator="{ on }">
+        <v-icon v-on="on" class="pr-2" :small="small">
+          mdi-information
+        </v-icon>
+      </template>
+      lifetime : {{ registration.lifetime }}s
+      <br />
+      Binding mode : {{ registration.bindingMode }}
+      <br />
+      Protocole version : {{ registration.lwM2mVersion }}
+      <br />
+      Address : {{ registration.address }}
+      <span
+        v-for="(key, val) in registration.additionalRegistrationAttributes"
+        :key="key"
+      >
+        <br />
+        {{ key }} {{ val }}
+      </span>
+    </v-tooltip>
+    <!-- secure icon -->
+    <v-tooltip :left="tooltipleft" :bottom="tooltipbottom">
+      <template v-slot:activator="{ on }">
+        <v-icon v-on="on" class="pr-2" :small="small" v-visible="registration.secure">
+          mdi-lock
+        </v-icon>
+      </template>
+      Communication over DTLS
+    </v-tooltip>
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    registration: Object,
+    small: Boolean,
+    tooltipleft: Boolean,
+    tooltipbottom: Boolean,
+  },
+  computed: {
+    unsecure() {
+     return !this.registration.secure;
+    },
+  },
+};
+</script>
diff --git a/leshan-server-demo/webapp2/src/main.js b/leshan-server-demo/webapp2/src/main.js
@@ -11,8 +11,18 @@ import router from './router'
 
 Vue.config.productionTip = false
 
+/**
+ * directive to hide content without changing layout unlike v-show or v-if
+ */
+Vue.directive('visible', function(el, binding) {
+  el.style.visibility = binding.value ? 'visible' : 'hidden';
+});
+
+
 new Vue({
   vuetify,
   router,
   render: h => h(App)
 }).$mount('#app')
+
+
diff --git a/leshan-server-demo/webapp2/src/views/Client.vue b/leshan-server-demo/webapp2/src/views/Client.vue
@@ -4,10 +4,21 @@
       <!-- registration info -->
       <v-sheet color="grey lighten-5" class="pa-4" width="100%">
         <div>
-          <h3>{{ $route.params.endpoint }}</h3>
+          <h3>
+            {{ $route.params.endpoint }}
+            <client-info
+              v-if="registration"
+              :registration="registration"
+              small
+              tooltipbottom
+            />
+          </h3>
           <div v-if="registration">
             <div>Reg. ID: {{ registration.registrationId }}</div>
-            <div>Using LWM2M v{{ registration.lwM2mVersion }}</div>
+            <div>
+              Registered:
+              {{ registration.registrationDate | moment("MMM D, h:mm:ss A") }}
+            </div>
             <div>
               Updated:
               {{ registration.lastUpdate | moment("MMM D, h:mm:ss A") }}
@@ -36,12 +47,13 @@
 </template>
 
 <script>
+import ClientInfo from "../components/ClientInfo.vue";
 import ClientSetting from "../components/ClientSetting.vue";
 import ObjectSelector from "../components/ObjectSelector.vue";
 
 // get models for this endpoint
 export default {
-  components: { ObjectSelector, ClientSetting },
+  components: { ObjectSelector, ClientSetting, ClientInfo },
   name: "Client",
   data: () => ({
     registration: null,
@@ -113,11 +125,11 @@ export default {
       .on("NOTIFICATION", (msg) => {
         if (msg.val.resources) {
           this.$store.newInstanceValue(
-              this.$route.params.endpoint,
-              msg.res,
-              msg.val.resources,
-              false
-            );
+            this.$route.params.endpoint,
+            msg.res,
+            msg.val.resources,
+            false
+          );
         } else if (msg.val.value) {
           this.$store.newResourceValue(
             this.$route.params.endpoint,

diff --git a/leshan-server-demo/webapp2/src/views/Clients.vue b/leshan-server-demo/webapp2/src/views/Clients.vue
@@ -16,11 +16,16 @@
     <template v-slot:item.lastUpdate="{ item }">
       {{ new Date(item.lastUpdate) | moment("MMM D, h:mm:ss A") }}
     </template>
+    <template v-slot:item.infos="{ item }">
+      <client-info :registration="item" tooltipleft/>
+    </template>
   </v-data-table>
 </template>
 
 <script>
+import ClientInfo from "../components/ClientInfo.vue";
 export default {
+  components: { ClientInfo },
   useSSE: true,
   name: "Clients",
   data: () => ({
@@ -31,6 +36,7 @@ export default {
       { text: "Registration ID", value: "registrationId" },
       { text: "Registration Date", value: "registrationDate" },
       { text: "Last Update", value: "lastUpdate" },
+      { text: "", value: "infos", sortable: false, align: "end" },
     ],
   }),
   methods: {
@@ -72,7 +78,7 @@ export default {
         (response) => (
           (this.loading = false), (this.registrations = response.data)
         )
-      )
+      );
   },
   beforeDestroy() {
     // close eventsource on destroy