feat: show hours given to and received from contacts

src/views/ContactsView.vue

@@ -40,12 +40,17 @@
       </li>
     </ul>
   </nav>
+
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       My Contacts
     </h1>
 
+    <div>
+      {{ errorMessage }}
+    </div>
+
     <!-- New Contact -->
     <div class="mb-4 flex">
       <input
@@ -62,6 +67,21 @@
       </button>
     </div>
 
+    <!-- eslint-disable-next-line -->
+    <div
+      class="block flex w-full"
+    >
+      <!-- eslint-disable-next-line -->
+      <button
+        href=""
+        class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+        v-if="showGiveTotals"
+        @click="loadGives()"
+      >
+        Load Totals
+      </button>
+    </div>
+
     <!-- Results List -->
     <ul class="">
       <li
@@ -75,6 +95,15 @@
           </h2>
           <div class="text-sm truncate">{{ contact.did }}</div>
           <div class="text-sm truncate">{{ contact.publicKeyBase64 }}</div>
+          <div v-if="showGiveTotals" class="float-right">
+            <div class="float-right">
+              to: {{ contactGivenTotals[contact.did] || 0 }}
+            </div>
+            <br />
+            <div class="float-right">
+              from: {{ contactReceivedTotals[contact.did] || 0 }}
+            </div>
+          </div>
         </div>
       </li>
     </ul>
@@ -83,6 +112,10 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+import { IIdentifier } from "@veramo/core";
+
+import { AppString } from "@/constants/app";
+import { accessToken } from "@/libs/crypto";
 import { db } from "../db";
 import { Contact } from "../db/tables/contacts.ts";
 
@@ -90,14 +123,26 @@ import { Contact } from "../db/tables/contacts.ts";
   components: {},
 })
 export default class ContactsView extends Vue {
-  contactInput = "";
-
   contacts: Contact[] = [];
+  contactInput = "";
+  // { "did:...": amount } entry for each contact
+  contactGivenTotals = {};
+  // { "did:...": amount } entry for each contact
+  contactReceivedTotals = {};
+  identity: IIdentifier = null;
+  errorMessage = "";
+  showGiveTotals = false;
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
     await db.open();
     this.contacts = await db.contacts.toArray();
+
+    const params = new URLSearchParams(window.location.search);
+    this.showGiveTotals = params.get("showGiveTotals") == "true";
+
+    const accounts = await db.accounts.toArray();
+    this.identity = JSON.parse(accounts[0].identity);
   }
 
   async onClickNewContact(): void {
@@ -117,5 +162,65 @@ export default class ContactsView extends Vue {
     await db.contacts.add(newContact);
     this.contacts = this.contacts.concat([newContact]);
   }
+
+  async loadGives() {
+    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+
+    // load all the time I have given
+    try {
+      const url =
+        endorserApiServer +
+        "/api/v2/report/gives?agentId=" +
+        encodeURIComponent(this.identity.did);
+      const token = await accessToken(this.identity);
+      const headers = {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + token,
+      };
+      const resp = await this.axios.get(url, { headers });
+      //console.log("Server response", resp.status, resp.data);
+      if (resp.status === 200) {
+        const contactTotals = {};
+        for (const give of resp.data.data) {
+          if (give.unit == "HUR") {
+            const prevAmount = contactTotals[give.recipientDid] || 0;
+            contactTotals[give.recipientDid] = prevAmount + give.amount;
+          }
+        }
+        //console.log("Done retrieving gives", contactTotals);
+        this.contactGivenTotals = contactTotals;
+      }
+    } catch (error) {
+      this.errorMessage = "" + error;
+    }
+
+    // load all the time I have received
+    try {
+      const url =
+        endorserApiServer +
+        "/api/v2/report/gives?recipientId=" +
+        encodeURIComponent(this.identity.did);
+      const token = await accessToken(this.identity);
+      const headers = {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + token,
+      };
+      const resp = await this.axios.get(url, { headers });
+      //console.log("Server response", resp.status, resp.data);
+      if (resp.status === 200) {
+        const contactTotals = {};
+        for (const give of resp.data.data) {
+          if (give.unit == "HUR") {
+            const prevAmount = contactTotals[give.agentDid] || 0;
+            contactTotals[give.agentDid] = prevAmount + give.amount;
+          }
+        }
+        //console.log("Done retrieving receipts", contactTotals);
+        this.contactReceivedTotals = contactTotals;
+      }
+    } catch (error) {
+      this.errorMessage = "" + error;
+    }
+  }
 }
 </script>