add chaotic nip89 overview

tests/gui/vuejs/noogle/src/components/AboutPage.vue

@@ -1,15 +1,4 @@
 <template>
-  <!-- <div className="card w-96 bg-base-100 shadow-xl">
-  <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
-  <div className="card-body">
-    <h2 className="card-title">Shoes!</h2>
-    <p>If a dog chews shoes whose shoes does he choose?</p>
-    <div className="card-actions justify-end">
-      <button className="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div> -->
-
   <div className="chat chat-start">
   <div className="chat-image avatar">
     <div className="w-10 rounded-full">
@@ -46,10 +35,10 @@
   <script>
 export default {
     name: 'dailyUIdemo',
-    props: {
+
-        msg: String
-    }
 }
+
+
 </script>
   <style scoped>
   h3 {

tests/gui/vuejs/noogle/src/components/Nip89.vue

@@ -0,0 +1,92 @@
+<template>
+
+    <div class="max-w-xs relative space-y-3">
+
+      <ul>
+        <div className="card w-96 bg-base-100 shadow-xl"  v-for="dvm in Nip89DVMS"
+            :key="dvm.name">
+        <figure><img :src="dvm.image" alt="DVM Picture" /></figure>
+        <div className="card-body">
+          <h2 className="card-title">{{ dvm.name }}</h2>
+          <p>  {{ dvm.about }}</p>
+          <div className="card-actions justify-end">
+            <button className="btn btn-primary">Buy Now</button>
+          </div>
+        </div>
+      </div>
+      </ul>
+
+      <p
+        v-if="selectedCountry"
+        class="text-lg pt-2 absolute"
+      >
+        You have selected: <span class="font-semibold">{{ selectedCountry }}</span>
+      </p>
+    </div>
+
+</template>
+
+<script>
+import countries from './data/countries.json'
+import {ref, computed, onMounted} from 'vue'
+import '../app.css'
+import store from "@/store.js";
+import {Filter} from "@rust-nostr/nostr-sdk";
+
+async function getnip89s(){
+
+        let client = store.state.client
+        const filter = new Filter().kind(31990)
+        let evts = await client.getEventsOf([filter], 10)
+        for (const entry of evts){
+          console.log(entry.content)
+          try {
+              let jsonentry = JSON.parse(entry.content)
+                if (jsonentry.picture){
+                  jsonentry.image = jsonentry.picture
+                }
+             nip89dvms.push(jsonentry);
+          }
+          catch (error){
+            console.log(error)
+          }
+
+        }
+
+        return nip89dvms
+
+    }
+let nip89dvms = []
+export default {
+
+async mounted(){
+      nip89dvms = await getnip89s()
+
+    },
+
+  setup() {
+
+
+
+
+
+  const Nip89DVMS = computed(() => {
+      console.log(nip89dvms)
+      return nip89dvms;
+    });
+
+    const selectCountry = (country) => {
+      selectedCountry.value = country
+    }
+
+    let selectedCountry = ref('')
+
+    return {
+      countries,
+      Nip89DVMS,
+      selectCountry,
+      selectedCountry
+    }
+  }
+}
+</script>

tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue

@@ -18,7 +18,7 @@ import Nip07 from "@/components/Nip07.vue";
   <div className="flex-1">
     <router-link  class="menu" to="/">Noogle</router-link>
     <router-link class="menu" to="/about">About</router-link>
-   <!-- <router-link class="menu" to="/donate">Donate</router-link> -->
+     <router-link class="menu" to="/nip89">DVMs</router-link>
 
   <div className="flex-none">
 

tests/gui/vuejs/noogle/src/router/index.js

@@ -6,7 +6,7 @@ const routes = [
   { path: "/", component: () => import("@/components/Home.vue") },
   { path: "/about", component: () => import("@/components/AboutPage.vue") },
   { path: "/donate", component: () => import("@/components/Donate.vue") },
-  { path: "/test", component: () => import("@/components/Donate.vue") },
+  { path: "/nip89", component: () => import("@/components/Nip89.vue") },
   { path: "/article/:id", component: () => import("@/components/Home.vue") },
   { path: '/:pathMatch(.*)*', component: () => import("@/components/Home.vue") },
 ];