Server-demo-v2: Add UI for Create instance.

leshan-server-demo/webapp2/src/components/InstanceCreateDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-dialog
+    v-model="show"
+    hide-overlay
+    fullscreen
+    transition="dialog-bottom-transition"
+  >
+    <v-card>
+      <v-card-title class="headline grey lighten-2">
+        Create new Instance for Object {{ objectdef.name }} ({{
+          objectdef.id
+        }})
+      </v-card-title>
+      <v-card-text>
+        <v-form ref="form" @submit.prevent="write">
+          <v-text-field
+            v-model="instance.id"
+            label="InstanceId"
+            hint="Let this field empty to let the client choose the instance ID"
+          ></v-text-field>
+          <v-text-field
+            v-for="resourcedef in writableResourceDef"
+            :key="resourcedef.id"
+            v-model="instance.resources[resourcedef.id]"
+            :label="resourcedef.name"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="create">
+          Create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    objectdef: Object,
+  },
+  data() {
+    return {
+      instance: { id:null,resources:{}},
+    };
+  },
+  watch: {
+    value(v) {
+      // reset local state when dialog is open
+      if (v) {
+        this.instanceValue = { id:null,resources:{}},
+        this.id = null
+      }
+    },
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+    writableResourceDef() {
+      return this.objectdef.resourcedefs.filter((def) =>
+        def.operations.includes("W")
+      );
+    },
+  },
+  methods: {
+    create(){
+      this.show = false;
+      this.$emit("create", this.instance);
+    },
+  },
+};
+</script>

leshan-server-demo/webapp2/src/components/ObjectControl.vue

@@ -0,0 +1,81 @@
+<template>
+  <span>
+    <request-button
+      @on-click="openCreateDialog"
+      ref="C"
+      >Create</request-button
+    >
+    <instance-create-dialog
+      v-model="showDialog"
+      :objectdef="objectdef"
+      @create="create($event)"
+    />
+  </span>
+</template>
+<script>
+import RequestButton from "./RequestButton.vue";
+import InstanceCreateDialog from "./InstanceCreateDialog.vue";
+import { preference } from "vue-preferences";
+
+const timeout = preference("timeout", { defaultValue: 5 });
+const format = preference("multiformat", { defaultValue: "TLV" });
+
+export default {
+  components: { RequestButton ,InstanceCreateDialog },
+  props: { objectdef: Object, endpoint: String, value: Object,},
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  computed: {
+    showDialog: {
+      get() {
+        return this.dialog;
+      },
+      set(value) {
+        this.dialog = value;
+        this.$refs.C.resetState();
+      },
+    },
+  },
+  methods: {
+    resourcePath(resourceId) {
+      return this.path + "/" + resourceId;
+    },
+    requestPath() {
+      return `api/clients/${encodeURIComponent(this.endpoint)}/${this.objectdef.id}?timeout=${timeout.get()}&format=${format.get()}`;
+    },
+    updateState(content, requestButton) {
+      let state = !content.valid
+        ? "warning"
+        : content.success
+        ? "success"
+        : "error";
+      requestButton.changeState(state, content.status);
+    },
+    openCreateDialog() {
+      this.dialog = true;
+    },
+    create(value) {
+      let requestButton = this.$refs.C;
+      let data = {resources:[]};
+      for (let id in value.resources){
+          data.resources.push({id:id,value:value.resources[id]})
+      }
+      if (value.id) data.id = value.id;
+
+      this.axios
+        .post(this.requestPath(),data)
+        .then((response) => {
+          this.updateState(response.data, requestButton);
+        })
+        .catch((error) => {
+          console.log(error);
+          requestButton.resetState();
+          alert(error);
+        });
+    },
+  },
+};
+</script>

leshan-server-demo/webapp2/src/views/ObjectView.vue

@@ -2,26 +2,38 @@
   <!-- object info -->
   <v-sheet color="grey lighten-5" class="pa-4" width="100%" v-if="object">
     <div>
-      <h3><object-icon :objectId="object.id"/> {{ object.name }}-v{{object.version}}  </h3>
+      <h3>
+        <object-icon :objectId="object.id" /> {{ object.name }}-v{{
+          object.version
+        }}
+        <object-control :key="object.id" id="object.id" :objectdef="object" :endpoint="$route.params.endpoint"/>
+      </h3>
       <p>{{ object.description }}</p>
     </div>
     <v-divider></v-divider>
     <div v-for="instance in instances" :key="object.id + '/' + instance.id">
-      <instance-view :object="object" :instanceId="instance.id" :showTitle="instances.length > 1" :endpoint="$route.params.endpoint" :data="data"/>
+      <instance-view
+        :object="object"
+        :instanceId="instance.id"
+        :showTitle="instances.length > 1"
+        :endpoint="$route.params.endpoint"
+        v-model="data"
+      />
     </div>
   </v-sheet>
 </template>
 <script>
 import InstanceView from "../components/InstanceView.vue";
-import ObjectIcon from '../components/ObjectIcon.vue';
+import ObjectControl from "../components/ObjectControl.vue";
+import ObjectIcon from "../components/ObjectIcon.vue";
 
 export default {
-  components: { InstanceView, ObjectIcon },
-  props: { object: Object, instances: Array},
+  components: { InstanceView, ObjectIcon, ObjectControl },
+  props: { object: Object, instances: Array },
   data() {
     return {
-      data:{}
-    }
+      data: {},
+    };
   },
 };
 </script>