Update add event

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

package.json

@@ -44,6 +44,7 @@
     "dayjs": "^1.11.6",
     "ethers": "^6.1.0",
     "js-base64": "^3.7.5",
+    "js-yaml": "^4.1.0",
     "leaflet": "^1.9.3",
     "loadsh": "^0.0.4",
     "lodash": "^4.17.21",

src/components/IgntCrudCreate.vue

@@ -5,8 +5,14 @@ import { reactive, computed } from "vue";
 import { IgntModal } from "@ignt/vue-library";
 import { useRoute } from "vue-router";
 import { clone } from "lodash";
+import { useIotEvents } from "@/hooks/useIotEvents";
 
 const route = useRoute();
+const { getIotDeviceInstructions, instructions } = useIotEvents();
+
+if (route.name === "iot.device.events") {
+  getIotDeviceInstructions();
+}
 
 const props = defineProps({
   storeName: {
@@ -31,6 +37,14 @@ const props = defineProps({
     }
   }
 });
+
+const payloadForm = reactive({
+  payload_type: "subscribe",
+  name: route.params.name,
+  path: "path",
+  data: "data"
+});
+
 const emit = defineEmits(["close"]);
 const formData = reactive<any>(props.initalData);
 const { address } = useAddress();
@@ -80,8 +94,14 @@ const creator = address.value;
 const submitItem = async () => {
   const cloneFormData = clone(formData);
   if (route.name === "iot.device.events") {
+    const clonePayloadForm = clone(payloadForm);
+    clonePayloadForm["data"] = window.btoa(clonePayloadForm["data"]);
+
+    console.log(JSON.stringify(clonePayloadForm));
+
+    // wrap post data
     cloneFormData["index"] = "";
-    cloneFormData["payload"] = window.btoa(cloneFormData["payload"]);
+    cloneFormData["payload"] = clonePayloadForm;
   }
 
   // auto fill device name value
@@ -125,7 +145,26 @@ const submitItem = async () => {
   >
     <template #body>
       <div class="my-4 w-[500px]" />
-      <div v-for="field in itemFieldsFiltered" :key="'field_' + field">
+      <template v-if="route.name === 'iot.device.events'">
+        <div>
+          <label class="sp-label capitalize-first-letter">Type</label>
+          <select v-model="payloadForm.payload_type" class="sp-input">
+            <option value="subscribe">Subscribe</option>
+            <option value="publish">Publish</option>
+          </select>
+        </div>
+        <div>
+          <label class="sp-label capitalize-first-letter">Path</label>
+          <select v-model="payloadForm.path" class="sp-input">
+            <option :value="i" v-for="i in instructions">{{ i }}</option>
+          </select>
+        </div>
+        <div>
+          <label class="sp-label capitalize-first-letter">Data</label>
+          <input v-model="payloadForm.data" class="sp-input" />
+        </div>
+      </template>
+      <div v-else v-for="field in itemFieldsFiltered" :key="'field_' + field">
         <label :for="`p${field.name}`" class="sp-label capitalize-first-letter">
           {{ field.name }}
         </label>

src/components/PageLayout/vertical-with-site.vue

@@ -18,7 +18,7 @@ const { t } = useLang();
 const { nostrStore, relay } = useNostr();
 const route = useRoute();
 const router = useRouter();
-const { data, loading, getIotDevices } = useIotDevices();
+const { data, getIotDevices } = useIotDevices();
 getIotDevices();
 
 const children = computed(() => {
@@ -49,11 +49,14 @@ const accountStore = useAccountStore();
 
 const currentDevice = ref(route.params.name);
 const onDeviceChange = v => {
+  const mid = data.devices.find(i => i.name === v)?.mid;
+
   router
     .push({
       name: route.name,
       params: {
-        name: v
+        name: v,
+        mid
       }
     })
     .then(() => {
@@ -72,10 +75,7 @@ const onDeviceChange = v => {
           @change="onDeviceChange(currentDevice)"
         >
           <option disabled>Pick a device</option>
-          <option v-if="loading" :value="currentDevice">
-            {{ currentDevice }}
-          </option>
-          <option v-else v-for="r in data.devices" :value="r.name">
+          <option v-for="r in data.devices" :value="r.name">
             {{ r.name }}
           </option>
         </select>

src/hooks/useIotEvents.ts

@@ -0,0 +1,44 @@
+import { reactive, ref, computed } from "vue";
+import { useRoute } from "vue-router";
+import { loadData } from "@/utils/shared";
+import yaml from "js-yaml";
+
+export function useIotEvents() {
+  const route = useRoute();
+
+  const data = reactive({
+    data: ""
+  });
+  const loading = ref(false);
+
+  const instructions = computed(() => {
+    try {
+      const res = data.data;
+
+      const json = yaml.load(res, "utf-8");
+
+      return Object.keys(json?.instructions);
+    } catch (e) {
+      return [];
+    }
+  });
+
+  const getIotDeviceInstructions = async () => {
+    loading.value = true;
+    loadData(
+      data,
+      "iot.device.instructions",
+      {
+        mid: route.params.mid
+      },
+      loading
+    );
+  };
+
+  return {
+    data,
+    loading,
+    getIotDeviceInstructions,
+    instructions
+  };
+}

src/router/modules/iot.ts

@@ -23,7 +23,7 @@ export default {
       component: () => import("@/views/iot/device/detail/index.vue"),
       children: [
         {
-          path: "/iot/device/:name/metrics",
+          path: "/iot/device/:name/metrics/:mid",
           name: "iot.device.metrics",
           component: () => import("@/views/iot/device/detail/metrics.vue"),
           meta: {
@@ -41,7 +41,7 @@ export default {
         //   }
         // },
         {
-          path: "/iot/device/:name/events",
+          path: "/iot/device/:name/events/:mid",
           name: "iot.device.events",
           component: () => import("@/views/iot/device/detail/events.vue"),
           meta: {
@@ -50,7 +50,7 @@ export default {
           }
         },
         {
-          path: "/iot/device/:name/data",
+          path: "/iot/device/:name/data/:mid",
           name: "iot.device.data",
           component: () => import("@/views/iot/device/detail/data.vue"),
           meta: {
@@ -59,7 +59,7 @@ export default {
           }
         },
         {
-          path: "/iot/device/:name/logs",
+          path: "/iot/device/:name/logs/:mid",
           name: "iot.device.logs",
           component: () => import("@/views/iot/device/detail/logs.vue"),
           meta: {

src/views/iot/device/index.vue

@@ -42,7 +42,10 @@ onBeforeUnmount(() => {
       <div class="card-body">
         <router-link
           class="card-title text-primary hover:cursor-pointer hover:text-primary-focus"
-          :to="{ name: 'iot.device.metrics', params: { name: d.name } }"
+          :to="{
+            name: 'iot.device.metrics',
+            params: { name: d.name, mid: d.mid }
+          }"
         >
           <IconifyIconOnline
             icon="mingcute:device-line"