style(events): add event button and dialog

Signed-off-by: rovast <rovast@163.com>

src/components/IgntCrudCreate.vue

@@ -163,7 +163,7 @@ const submitItem = async () => {
             <option :value="i" v-for="i in instructions">{{ i }}</option>
           </select>
         </div>
-        <div>
+        <div class="mb-10">
           <label class="sp-label capitalize-first-letter">Data</label>
           <input v-model="payloadForm.data" class="sp-input" />
         </div>

src/views/iot/device/detail/events.vue

@@ -1,22 +1,25 @@
 <script setup lang="ts">
+import IgntCrudCreate from "@/components/IgntCrudCreate.vue";
 import { useClient } from "@/composables/useClient";
 import { smallCamelCase } from "@/utils/shared";
 import { useRoute } from "vue-router";
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
+import { getNewNostrPrivateKey } from "@/utils/shared";
+import { useAddress } from "@/def-composables/useAddress";
 
 const route = useRoute();
 const client = useClient();
 
 const events = ref([]);
+const storeName = "StccommunityIotdepinprotocolIotdepinprotocol";
+const itemName = "EventPb";
 
 const fetchEvents = async () => {
-  (client["StccommunityIotdepinprotocolIotdepinprotocol"] as any).query[
-    "queryEventPbAll"
-  ]({
+  (client[storeName] as any).query["queryEventPbAll"]({
     deviceName: route.params.name,
     "pagination.reverse": true
   }).then(res => {
-    events.value = res.data[smallCamelCase("EventPb")];
+    events.value = res.data[smallCamelCase(itemName)];
   });
 };
 
@@ -26,6 +29,7 @@ interface Payload {
   payload_type: string;
   path: string;
   data: string;
+  result: string;
 }
 const payloads = computed<Payload[]>(() => {
   return events.value.map(e => {
@@ -36,17 +40,40 @@ const payloads = computed<Payload[]>(() => {
       return {
         payload_type: obj?.payload_type,
         path: obj?.path,
-        data: obj?.data
+        data: obj?.data,
+        result: obj?.result
       };
     } catch (e) {
       return {
         payload_type: "-",
         path: "-",
-        data: "-"
+        data: "-",
+        result: "-"
       };
     }
   });
 });
+
+// Add event
+const { address } = useAddress();
+const moduleNameNormalized = computed(() =>
+  itemName.replace(/^\w/, c => c.toUpperCase())
+);
+const visibleModal = ref("");
+const createModalInitalForm = computed(() => {
+  return {
+    deviceName: route.params.name,
+    index: getNewNostrPrivateKey()
+  };
+});
+
+const onAdd = () => {
+  visibleModal.value = "create-item";
+};
+const onClose = () => {
+  visibleModal.value = "";
+  fetchEvents();
+};
 </script>
 <template>
   <h2>Event Sources</h2>
@@ -56,6 +83,21 @@ const payloads = computed<Payload[]>(() => {
     such as the Cron Job or Smart Contract Monitor.
   </p>
 
+  <div class="text-right">
+    <button class="btn btn-primary mt-5" @click="onAdd" v-if="address">
+      Add Event
+    </button>
+  </div>
+
+  <IgntCrudCreate
+    v-if="visibleModal === 'create-item'"
+    :store-name="storeName"
+    :item-name="moduleNameNormalized"
+    :command-name="`sendMsgCreate${moduleNameNormalized}`"
+    :inital-data="createModalInitalForm"
+    @close="onClose"
+  />
+
   <div class="overflow-x-auto mt-10">
     <table class="table">
       <!-- head -->
@@ -65,6 +107,7 @@ const payloads = computed<Payload[]>(() => {
           <th>Payload Type</th>
           <th>Path</th>
           <th>Data</th>
+          <th>Result</th>
         </tr>
       </thead>
       <tbody>
@@ -73,6 +116,7 @@ const payloads = computed<Payload[]>(() => {
           <td>{{ data.payload_type }}</td>
           <td>{{ data.path }}</td>
           <td>{{ data.data }}</td>
+          <td>{{ data.result }}</td>
         </tr>
       </tbody>
     </table>