Server-demo-v2: Add observe for instance

eclipse-leshan · May 27, 2021 · 5206b48 · 5206b48
1 parent 4a94128
commit 5206b48
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 24 deletions.
diff --git a/leshan-server-demo/webapp2/src/components/InstanceControl.vue b/leshan-server-demo/webapp2/src/components/InstanceControl.vue
@@ -1,5 +1,9 @@
 <template>
   <span>
+    <request-button @on-click="observe">Obs</request-button>
+    <request-button @on-click="stopObserve">
+      <v-icon dense small>mdi-eye-remove-outline</v-icon></request-button
+    >
     <request-button @on-click="read">R</request-button>
     <request-button @on-click="openWriteDialog" ref="W">W</request-button>
     <request-button @on-click="del">Delete</request-button>
@@ -42,9 +46,10 @@ export default {
   },
   methods: {
     requestPath() {
-      return `api/clients/${encodeURIComponent(this.endpoint)}${
-        this.path
-      }?timeout=${timeout.get()}&format=${format.get()}`;
+      return `api/clients/${encodeURIComponent(this.endpoint)}${this.path}`;
+    },
+    requestOption() {
+      return `?timeout=${timeout.get()}&format=${format.get()}`;
     },
     updateState(content, requestButton) {
       let state = !content.valid
@@ -56,7 +61,24 @@ export default {
     },
     read(requestButton) {
       this.axios
-        .get(this.requestPath())
+        .get(`${this.requestPath()}${this.requestOption()}`)
+        .then((response) => {
+          this.updateState(response.data, requestButton);
+          if (response.data.success) {
+            this.$store.newInstanceValue(
+              this.endpoint,
+              this.path,
+              response.data.content.resources
+            );
+          }
+        })
+        .catch(() => {
+          requestButton.resetState();
+        });
+    },
+    observe(requestButton) {
+      this.axios
+        .post(`${this.requestPath()}/observe${this.requestOption()}`)
         .then((response) => {
           this.updateState(response.data, requestButton);
           if (response.data.success) {
@@ -65,12 +87,24 @@ export default {
               this.path,
               response.data.content.resources
             );
+            this.$store.setObserved(this.endpoint, this.path, true);
           }
         })
         .catch(() => {
           requestButton.resetState();
         });
     },
+    stopObserve(requestButton) {
+      this.axios
+        .delete(`${this.requestPath()}/observe`)
+        .then(() => {
+          requestButton.changeState("success");
+          this.$store.setObserved(this.endpoint, this.path, false);
+        })
+        .catch(() => {
+          requestButton.resetState();
+        });
+    },
     openWriteDialog() {
       this.dialog = true;
     },
@@ -82,7 +116,10 @@ export default {
       }
 
       this.axios
-        .put(this.requestPath() + "&replace=" + replace, data)
+        .put(
+          `${this.requestPath()}${this.requestOption()}&replace=${replace}`,
+          data
+        )
         .then((response) => {
           this.updateState(response.data, requestButton);
           if (response.data.success) {
@@ -100,7 +137,7 @@ export default {
     },
     del(requestButton) {
       this.axios
-        .delete(this.requestPath())
+        .delete(`${this.requestPath()}?timeout=${timeout.get()}`)
         .then((response) => {
           this.updateState(response.data, requestButton);
           if (response.data.success) {

diff --git a/leshan-server-demo/webapp2/src/components/InstanceView.vue b/leshan-server-demo/webapp2/src/components/InstanceView.vue
@@ -1,13 +1,21 @@
 <template>
   <div>
     <h4 class="pa-1">
-      Instance {{ instanceId }} :
-      <instance-control
-        :objectdef="objectdef"
-        :endpoint="endpoint"
-        :id="instanceId"
-        :path="instancePath"
-      />
+      <span class="d-flex">
+        <span class="align-self-center"> Instance {{ instanceId }} : </span>
+
+        <instance-control
+          :objectdef="objectdef"
+          :endpoint="endpoint"
+          :id="instanceId"
+          :path="instancePath"
+          class='mr-auto'
+        />
+
+        <v-icon class="pr-3" small v-show="state.observed[instancePath]"
+          >mdi-eye-outline</v-icon
+        >
+      </span>
     </h4>
 
     <v-expansion-panels
@@ -40,9 +48,7 @@
                 align-self="center"
                 class="pa-2 text--disabled"
               >
-                <v-icon
-                  x-small
-                  v-show="state.observed[resource.path]"
+                <v-icon x-small v-show="state.observed[resource.path]"
                   >mdi-eye-outline</v-icon
                 ></v-col
               >
@@ -66,7 +72,11 @@
                 }"
               >
                 <div class="pr-3 text-truncate">
-                  {{ state.data[resource.path] ? state.data[resource.path].val : null }}
+                  {{
+                    state.data[resource.path]
+                      ? state.data[resource.path].val
+                      : null
+                  }}
                 </div>
               </v-col>
             </v-row>
@@ -96,7 +106,7 @@ export default {
     };
   },
   computed: {
-    state(){
+    state() {
       return this.$store.state[this.endpoint];
     },
     resources() {

diff --git a/leshan-server-demo/webapp2/src/views/Client.vue b/leshan-server-demo/webapp2/src/views/Client.vue
@@ -111,12 +111,21 @@ export default {
         this.registration = null;
       })
       .on("NOTIFICATION", (msg) => {
-        this.$store.newResourceValue(
-          this.$route.params.endpoint,
-          msg.res,
-          msg.val.value,
-          false
-        );
+        if (msg.val.resources) {
+          this.$store.newInstanceValue(
+              this.$route.params.endpoint,
+              msg.res,
+              msg.val.resources,
+              false
+            );
+        } else if (msg.val.value) {
+          this.$store.newResourceValue(
+            this.$route.params.endpoint,
+            msg.res,
+            msg.val.value,
+            false
+          );
+        }
         this.$store.setObserved(this.$route.params.endpoint, msg.res, true);
       })
       .on("error", (err) => {