crowd-funder-for-time-pwa/src/views/ContactAmountsView.vue

<template>
  <!-- QUICK NAV -->
  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
    <ul class="flex text-2xl p-2 gap-2">
      <!-- Home Feed -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
          ><fa icon="house-chimney" class="fa-fw"></fa
        ></router-link>
      </li>
      <!-- Search -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'discover' }"
          class="block text-center py-3 px-1"
          ><fa icon="magnifying-glass" class="fa-fw"></fa
        ></router-link>
      </li>
      <!-- Contacts -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'projects' }"
          class="block text-center py-3 px-1"
          ><fa icon="folder-open" class="fa-fw"></fa
        ></router-link>
      </li>
      <!-- Contacts -->
      <li class="basis-1/5 rounded-md text-slate-400">
        <router-link
          :to="{ name: 'contacts' }"
          class="block text-center py-3 px-1"
          ><fa icon="users" class="fa-fw"></fa
        ></router-link>
      </li>
      <!-- Profile -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'account' }"
          class="block text-center py-3 px-1"
          ><fa icon="circle-user" class="fa-fw"></fa
        ></router-link>
      </li>
    </ul>
  </nav>

  <section id="Content" class="p-6 pb-24">
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
      Given with {{ contact?.name }}
    </h1>

    <!-- Results List -->
    <div>
      <div class="border-b border-slate-300 flex">
        <div class="w-1/4"></div>
        <div class="w-1/4">from them</div>
        <div class="w-1/4"></div>
        <div class="w-1/4">to them</div>
      </div>
      <div
        class="border-b border-slate-300 flex"
        v-for="record in giveRecords"
        :key="record.id"
      >
        <div class="w-1/4">
          {{ new Date(record.issuedAt).toLocaleString() }}
        </div>
        <div class="w-1/4">
          <span v-if="record.agentDid == contact.did">
            <div class="font-bold">
              {{ record.amount }} {{ record.unit }}
              <span v-if="record.confirmed" class="tooltip">
                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
                <span class="tooltiptext">Confirmed</span>
              </span>
              <span v-else class="tooltip">
                <fa icon="circle" class="text-blue-600 fa-fw ml-1" />
                <span class="tooltiptext">Unconfirmed</span>
              </span>
            </div>
            <br />
            {{ record.description }}
          </span>
        </div>
        <div class="w-1/8">
          <span v-if="record.agentDid == contact.did">
            <fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" />
          </span>
          <span v-else>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
          </span>
        </div>
        <div class="w-1/4">
          <span v-if="record.agentDid != contact.did">
            <div class="font-bold">
              {{ record.amount }} {{ record.unit }}
              <span v-if="record.confirmed" class="tooltip">
                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
                <span class="tooltiptext">Confirmed</span>
              </span>
              <span v-else class="tooltip">
                <fa icon="circle" class="text-slate-600 fa-fw ml-1" />
                <span class="tooltiptext">Unconfirmed</span>
              </span>
            </div>
            <br />
            {{ record.description }}
          </span>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import * as R from "ramda";
import { Options, Vue } from "vue-class-component";

import { accountsDB, db } from "@/db";
import { Contact } from "@/db/tables/contacts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { AppString } from "@/constants/app";
import { accessToken } from "@/libs/crypto";
import { GiveServerRecord } from "@/libs/endorserServer";

@Options({})
export default class ContactsView extends Vue {
  contact: Contact | null = null;
  giveRecords: Array<GiveServerRecord> = [];

  // 'created' hook runs when the Vue instance is first created
  async created() {
    await db.open();
    const contactDid = this.$route.query.contactDid as string;
    this.contact = (await db.contacts.get(contactDid)) || null;

    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    const activeDid = settings?.activeDid;

    if (activeDid && this.contact) {
      this.loadGives(activeDid, this.contact);
    }
  }

  async loadGives(activeDid: string, contact: Contact) {
    // only load the private keys temporarily when needed
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === activeDid, accounts);
    const identity = JSON.parse(account?.identity || "undefined");

    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;

    // load all the time I have given to them
    try {
      let result = [];

      const url =
        endorserApiServer +
        "/api/v2/report/gives?agentDid=" +
        encodeURIComponent(identity.did) +
        "&recipientDid=" +
        encodeURIComponent(contact.did);
      const token = await accessToken(identity);
      const headers = {
        "Content-Type": "application/json",
        Authorization: "Bearer " + token,
      };
      const resp = await this.axios.get(url, { headers });
      if (resp.status === 200) {
        result = resp.data.data;
      } else {
        console.log(
          "Got bad response status & data of",
          resp.status,
          resp.data
        );
        this.alertTitle = "Error With Server";
        this.alertMessage =
          "Got an error retrieving your given time from the server.";
        this.isAlertVisible = true;
      }

      const url2 =
        endorserApiServer +
        "/api/v2/report/gives?agentDid=" +
        encodeURIComponent(contact.did) +
        "&recipientDid=" +
        encodeURIComponent(identity.did);
      const token2 = await accessToken(identity);
      const headers2 = {
        "Content-Type": "application/json",
        Authorization: "Bearer " + token2,
      };
      const resp2 = await this.axios.get(url2, { headers: headers2 });
      if (resp2.status === 200) {
        result = R.concat(result, resp2.data.data);
      } else {
        console.log(
          "Got bad response status & data of",
          resp2.status,
          resp2.data
        );
        this.alertTitle = "Error With Server";
        this.alertMessage =
          "Got an error retrieving your given time from the server.";
        this.isAlertVisible = true;
      }

      const sortedResult: Array<GiveServerRecord> = R.sort(
        (a, b) =>
          new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
        result
      );
      this.giveRecords = sortedResult;
    } catch (error) {
      this.alertTitle = "Error With Server";
      this.alertMessage = error as string;
      this.isAlertVisible = true;
    }
  }

  alertTitle = "";
  alertMessage = "";
  isAlertVisible = false;

  public onClickClose() {
    this.isAlertVisible = false;
    this.alertTitle = "";
    this.alertMessage = "";
  }

  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
      "dismissable-alert": true,
      "bg-slate-100": true,
      "p-5": true,
      rounded: true,
      "drop-shadow-lg": true,
      absolute: true,
      "top-3": true,
      "inset-x-3": true,
      "transition-transform": true,
      "ease-in": true,
      "duration-300": true,
    };
  }
}
</script>

<style>
/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip:hover .tooltiptext-left {
  visibility: visible;
}
</style>