Merging next-iteration

2023-06-26 13:59:47 +08:00
parent ffb0f2d37f 5747404fd6
commit 6233189a49
23 changed files with 742 additions and 61 deletions
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -298,10 +298,10 @@
    </div>

    <div>
-      <button class="text-blue-500 px-2">
+      <button class="text-blue-500">
        <router-link
          :to="{ name: 'statistics' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-3"
        >
          See Achievements & Statistics
        </router-link>
@@ -389,7 +389,7 @@ export default class AccountViewView extends Vue {

  // 'created' hook runs when the Vue instance is first created
  async created() {
-    // Uncomment to register this user on the test server.
+    // Uncomment this to register this user on the test server.
    // To manage within the vue devtools browser extension https://devtools.vuejs.org/
    // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
    // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
@@ -409,7 +409,10 @@ export default class AccountViewView extends Vue {
      const accounts = await accountsDB.accounts.toArray();
      this.numAccounts = accounts.length;
      const account = R.find((acc) => acc.did === this.activeDid, accounts);
-      const identity = JSON.parse(account?.identity || "undefined");
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
      this.publicHex = identity.keys[0].publicKeyHex;
      this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
      this.derivationPath = identity.keys[0].meta.derivationPath;
@@ -419,8 +422,8 @@ export default class AccountViewView extends Vue {
      });
    } catch (err) {
      this.alertMessage =
-        "Clear your cache and start over (after data backup). See console log for more info.";
-      console.error("Telling user to clear cache because:", err);
+        "Clear your cache and start over (after data backup).";
+      console.error("Telling user to clear cache at page create because:", err);
      this.alertTitle = "Error Creating Account";
      this.isAlertVisible = true;
    }
@@ -436,9 +439,12 @@ export default class AccountViewView extends Vue {
      });
    } catch (err) {
      this.alertMessage =
-        "Clear your cache and start over (after data backup). See console log for more info.";
-      console.error("Telling user to clear cache because:", err);
-      this.alertTitle = "Error Creating Account";
+        "Clear your cache and start over (after data backup).";
+      console.error(
+        "Telling user to clear cache after contact setting update because:",
+        err
+      );
+      this.alertTitle = "Error Updating Contact Setting";
      this.isAlertVisible = true;
    }
  }
@@ -474,7 +480,10 @@ export default class AccountViewView extends Vue {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }
    const token = await accessToken(identity);
    const headers = {
      "Content-Type": "application/json",
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -168,7 +168,10 @@ export default class ContactsView extends Vue {
    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 identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }

    // load all the time I have given to them
    try {
@@ -267,7 +270,10 @@ export default class ContactsView extends Vue {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }
    if (identity.keys[0].privateKeyHex !== null) {
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      const privateKeyHex: string = identity.keys[0].privateKeyHex!;
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -113,7 +113,10 @@ export default class ContactQRScanShow extends Vue {
    if (!account) {
      this.alertMessage = "You have no identity yet.";
    } else {
-      const identity = JSON.parse(account.identity);
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }

      const publicKeyHex = identity.keys[0].publicKeyHex;
      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -314,7 +314,7 @@ export default class ContactsView extends Vue {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");

    if (!identity) {
      console.error(
@@ -487,7 +487,10 @@ export default class ContactsView extends Vue {
      await accountsDB.open();
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === this.activeDid, accounts);
-      const identity = JSON.parse(account?.identity || "undefined");
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }

      // Make a claim
      const vcClaim: RegisterVerifiableCredential = {
@@ -575,7 +578,10 @@ export default class ContactsView extends Vue {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }

    const token = await accessToken(identity);
    const headers = {
@@ -614,7 +620,10 @@ export default class ContactsView extends Vue {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }

    const token = await accessToken(identity);
    const headers = {
@@ -671,7 +680,10 @@ export default class ContactsView extends Vue {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }

    // if they have unconfirmed amounts, ask to confirm those first
    if (toDid == identity?.did && this.givenToMeUnconfirmed[fromDid] > 0) {
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -213,6 +213,14 @@
      <p>
        {{ package.version }}
      </p>
+
+      <h2 class="text-xl font-semibold">
+        For any other questions, including remove your data:
+      </h2>
+      <p>
+        Contact us through
+        <a href="https://communitycred.org">CommunityCred.org</a>.
+      </p>
    </div>
  </section>
 </template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,15 +1,360 @@
 <template>
-  <section></section>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <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>
+      <!-- Projects -->
+      <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-500">
+        <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>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Time Safari
+    </h1>
+
+    <div>
+      <h1 class="text-2xl">Quick Action</h1>
+      <p>Choose a contact to whom to show appreciation:</p>
+      <div class="px-4">
+        <button
+          v-for="contact in allContacts"
+          :key="contact.did"
+          @click="openDialog(contact)"
+          class="text-blue-500"
+        >
+          &nbsp;{{ contact.name }},
+        </button>
+        or
+        <button @click="openDialog()" class="text-blue-500">
+          nobody in particular
+        </button>
+      </div>
+    </div>
+
+    <GiftedDialog
+      ref="customDialog"
+      @dialog-result="handleDialogResult"
+      message="Confirm to publish to the world."
+    >
+    </GiftedDialog>
+
+    <div class="py-4">
+      <h1 class="text-2xl">Latest Activity</h1>
+      <span :class="{ hidden: isHiddenSpinner }">
+        <fa icon="spinner" class="fa-fw"></fa>
+        Loading&hellip;
+      </span>
+      <ul class="">
+        <li
+          class="border-b border-slate-300"
+          v-for="record in feedData"
+          :key="record.jwtId"
+        >
+          <div
+            class="border-b text-orange-400 px-8 py-4"
+            v-if="record.jwtId == feedLastViewedId"
+          >
+            You've seen all claims below.
+          </div>
+          {{ this.giveDescription(record) }}
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <!-- This same popup code is in many files. -->
+  <div v-bind:class="computedAlertClassNames()">
+    <button
+      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+      @click="onClickClose()"
+    >
+      <fa icon="xmark"></fa>
+    </button>
+    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+    <p>{{ alertMessage }}</p>
+  </div>
 </template>

 <script lang="ts">
+import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";
-import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import { db, accountsDB } from "@/db";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
+import { Account } from "@/db/tables/accounts";
+import { Contact } from "@/db/tables/contacts";

@Options({
-  components: {
-    HelloWorld,
-  },
+  components: { GiftedDialog },
 })
-export default class HomeView extends Vue {}
+export default class HomeView extends Vue {
+  activeDid = "";
+  allAccounts: Array<Account> = [];
+  allContacts: Array<Contact> = [];
+  apiServer = "";
+  feedAllLoaded = false;
+  feedData = [];
+  feedPreviousOldestId = null;
+  feedLastViewedId = null;
+  isHiddenSpinner = true;
+
+  // 'created' hook runs when the Vue instance is first created
+  async created() {
+    await accountsDB.open();
+    this.allAccounts = await accountsDB.accounts.toArray();
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings?.activeDid || "";
+    this.allContacts = await db.contacts.toArray();
+    this.feedLastViewedId = settings?.lastViewedClaimId;
+  }
+
+  // 'mounted' hook runs after initial render
+  async mounted() {
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      this.apiServer = settings?.apiServer || "";
+
+      this.updateAllFeed();
+    } catch (err) {
+      console.log("Error in mounted():", err);
+      this.alertTitle = "Error";
+      this.alertMessage =
+        err.userMessage ||
+        "There was an error retrieving the latest sweet, sweet action.";
+    }
+  }
+
+  updateAllFeed = async () => {
+    this.isHiddenSpinner = false;
+
+    await this.retrieveClaims(this.apiServer, null, this.feedPreviousOldestId)
+      .then(async (results) => {
+        if (results.data.length > 0) {
+          this.feedData = this.feedData.concat(results.data);
+          //console.log("Feed data:", this.feedData);
+          this.feedAllLoaded = results.hitLimit;
+          this.feedPreviousOldestId =
+            results.data[results.data.length - 1].jwtId;
+          if (
+            this.feedLastViewedId == null ||
+            this.feedLastViewedId < results.data[0].jwtId
+          ) {
+            // save it to storage
+            await db.open();
+            db.settings.update(MASTER_SETTINGS_KEY, {
+              lastViewedClaimId: results.data[0].jwtId,
+            });
+            // but not for this page because we need to remember what it was before
+          }
+        }
+      })
+      .catch((e) => {
+        console.log("Error with feed load:", e);
+        this.alertMessage =
+          e.userMessage || "There was an error retrieving feed data.";
+      });
+
+    this.isHiddenSpinner = true;
+  };
+
+  retrieveClaims = async (endorserApiServer, identifier, beforeId) => {
+    //const afterQuery = afterId == null ? "" : "&afterId=" + afterId;
+    const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
+    const headers = { "Content-Type": "application/json" };
+    if (this.activeDid) {
+      const account = R.find(
+        (acc) => acc.did === this.activeDid,
+        this.allAccounts
+      );
+      //console.log("about to parse from", this.activeDid, account?.identity);
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    } else {
+      // it's OK without auth... we just won't get any identifiers
+    }
+    return fetch(this.apiServer + "/api/v2/report/gives?" + beforeQuery, {
+      method: "GET",
+      headers: headers,
+    })
+      .then(async (response) => {
+        if (response.status !== 200) {
+          const details = await response.text();
+          throw details;
+        }
+        return response.json();
+      })
+      .then((results) => {
+        if (results.data) {
+          return results;
+        } else {
+          throw JSON.stringify(results);
+        }
+      });
+  };
+
+  giveDescription(giveRecord) {
+    let claim = giveRecord.fullClaim;
+    if (claim.claim) {
+      // it's probably a Verified Credential
+      claim = claim.claim;
+    }
+
+    // agent.did is for legacy data, before March 2023
+    const giver =
+      claim.agent?.identifier || claim.agent?.did || giveRecord.issuer;
+    const giverInfo = didInfo(giver, this.allAccounts, this.allContacts);
+    const gaveAmount = claim.object?.amountOfThisGood
+      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
+      : claim.description || "something unknown";
+    // recipient.did is for legacy data, before March 2023
+    const gaveRecipientId = claim.recipient?.identifier || claim.recipient?.did;
+    const gaveRecipientInfo = gaveRecipientId
+      ? " to " + didInfo(gaveRecipientId, this.allAccounts, this.allContacts)
+      : "";
+    return giverInfo + " gave " + gaveAmount + gaveRecipientInfo;
+  }
+
+  displayAmount(code, amt) {
+    return "" + amt + " " + this.currencyShortWordForCode(code, amt === 1);
+  }
+
+  currencyShortWordForCode(unitCode, single) {
+    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
+  }
+
+  openDialog(contact) {
+    this.$refs.customDialog.open(contact);
+  }
+  handleDialogResult(result) {
+    if (result.action === "confirm") {
+      return new Promise((resolve) => {
+        this.recordGive(result.contact, result.description, result.hours);
+        resolve();
+      });
+    } else {
+      // action was "cancel" so do nothing
+    }
+  }
+
+  /**
+   *
+   * @param contact may be null
+   * @param description may be an empty string
+   * @param hours may be 0
+   */
+  recordGive(contact, description, hours) {
+    if (this.activeDid == null) {
+      this.alertTitle = "Error";
+      this.alertMessage =
+        "You must select an identity before you can record a give.";
+      return;
+    }
+    const account = R.find(
+      (acc) => acc.did === this.activeDid,
+      this.allAccounts
+    );
+    //console.log("about to parse from", this.activeDid, account?.identity);
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }
+    createAndSubmitGive(
+      this.axios,
+      this.apiServer,
+      identity,
+      contact?.did,
+      this.activeDid,
+      description,
+      hours
+    )
+      .then((result) => {
+        if (result.status != 201 || result.data?.error) {
+          console.log("Error with give result:", result);
+          this.alertTitle = "Error";
+          this.alertMessage =
+            result.data?.message || "There was an error recording the give.";
+        } else {
+          this.alertTitle = "Success";
+          this.alertMessage = "That gift was recorded.";
+          //this.updateAllFeed(); // full update is overkill but we should show something
+        }
+      })
+      .catch((e) => {
+        console.log("Error with give caught:", e);
+        this.alertTitle = "Error";
+        this.alertMessage =
+          e.userMessage || "There was an error recording the give.";
+      });
+  }
+
+  // This same popup code is in many files.
+  alertMessage = "";
+  alertTitle = "";
+  public onClickClose() {
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.alertMessage,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+}
 </script>
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -49,8 +49,9 @@
        <span :class="{ hidden: isHiddenSave }">Save Project</span>

        <!-- SHOW if in saving state; DISABLE button while in saving state -->
-        <span :class="{ hidden: isHiddenSpinner }"
-          ><i class="fa-solid fa-spinner fa-spin-pulse"></i>
+        <span :class="{ hidden: isHiddenSpinner }">
+          <!-- icon no worky? -->
+          <i class="fa-solid fa-spinner fa-spin-pulse"></i>
          Saving&hellip;</span
        >
      </button>
@@ -122,11 +123,14 @@ export default class NewEditProjectView extends Vue {
      await accountsDB.open();
      const num_accounts = await accountsDB.accounts.count();
      if (num_accounts === 0) {
-        console.error("Problem!  Should have a profile!");
+        console.error("Error: no account was found.");
      } else {
        const accounts = await accountsDB.accounts.toArray();
        const account = R.find((acc) => acc.did === this.activeDid, accounts);
-        const identity = JSON.parse(account?.identity || "undefined");
+        const identity = JSON.parse(account?.identity || "null");
+        if (!identity) {
+          throw new Error("No identity found.");
+        }
        this.LoadProject(identity);
      }
    }
@@ -222,7 +226,7 @@ export default class NewEditProjectView extends Vue {
          );
        }
      } catch (error) {
-        let userMessage = "There was an error. See logs for more info.";
+        let userMessage = "There was an error saving the project.";
        const serverError = error as AxiosError;
        if (serverError) {
          this.isAlertVisible = true;
@@ -254,11 +258,14 @@ export default class NewEditProjectView extends Vue {
    await accountsDB.open();
    const num_accounts = await accountsDB.accounts.count();
    if (num_accounts === 0) {
-      console.error("Problem!  Should have a profile!");
+      console.error("Error: there is no account.");
    } else {
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === this.activeDid, accounts);
-      const identity = JSON.parse(account?.identity || "undefined");
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
      this.SaveProject(identity);
    }
  }
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -240,7 +240,10 @@ export default class ProjectViewView extends Vue {
    } else {
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === activeDid, accounts);
-      const identity = JSON.parse(account?.identity || "undefined");
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
      this.LoadProject(identity);
    }
  }
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -167,7 +167,10 @@ export default class ProjectsView extends Vue {
    } else {
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === activeDid, accounts);
-      const identity = JSON.parse(account?.identity || "undefined");
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
      this.LoadProjects(identity);
    }
  }
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -61,7 +61,7 @@
        <!-- eslint-disable prettier/prettier --><!-- If we format prettier then there is extra space at the start of the line. -->
        <li>Each will show at their time of appearance relative to all others.</li>
        <li>Note that the ones on the left and right edges are randomized
-          because not all their positional data is visible to you.
+          because their data isn't all visible to you.
        </li>
        <!-- eslint-enable -->
      </ul>
@@ -75,7 +75,7 @@
        {{ worldProperties.endTime }}
      </div>
      <div v-if="worldProperties.animationDurationSeconds">
-        <label>Animation duration:&nbsp;</label>
+        <label>Animation Time:&nbsp;</label>
        {{ worldProperties.animationDurationSeconds }} seconds
      </div>
    </div>
@@ -113,6 +113,7 @@ export default class StatisticsView extends Vue {
  world: World;
  worldProperties: WorldProperties = {};

+  // 'mounted' hook runs after initial render
  mounted() {
    const container = document.querySelector("#scene-container");
    const newWorld = new World(container, this);