feat: add a page for details about contact transactions (which I'll fill in soon)

src/router/index.ts

@@ -23,12 +23,6 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
-  {
-    path: "/start",
-    name: "start",
-    component: () =>
-      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
-  },
   {
     path: "/account",
     name: "account",
@@ -43,6 +37,14 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
       ),
   },
+  {
+    path: "/contact-amounts",
+    name: "contact-amounts",
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
+      ),
+  },
   {
     path: "/contacts",
     name: "contacts",
@@ -93,12 +95,6 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
       ),
   },
-  {
-    path: "/project",
-    name: "project",
-    component: () =>
-      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
-  },
   {
     path: "/new-edit-project",
     name: "new-edit-project",
@@ -107,6 +103,12 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
       ),
   },
+  {
+    path: "/project",
+    name: "project",
+    component: () =>
+      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
+  },
   {
     path: "/projects",
     name: "projects",
@@ -114,12 +116,10 @@ const routes: Array<RouteRecordRaw> = [
       import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
   },
   {
-    path: "/commitments",
-    name: "commitments",
+    path: "/start",
+    name: "start",
     component: () =>
-      import(
-        /* webpackChunkName: "commitments" */ "../views/CommitmentsView.vue"
-      ),
+      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
   },
 ];
 

src/views/CommitmentsView.vue

@@ -1,3 +0,0 @@
-<template>
-  <section id="Content" class="p-6 pb-24"></section>
-</template>

src/views/ContactAmountsView.vue

@@ -0,0 +1,70 @@
+<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">
+      Transactions with {{ contact?.name }}
+    </h1>
+    <div>{{ contact?.did }}</div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { Contact } from "@/db/tables/contacts";
+import { db } from "@/db";
+
+@Options({})
+export default class ContactsView extends Vue {
+  contact: Contact | null = null;
+
+  // '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;
+  }
+}
+</script>

src/views/ContactsView.vue

@@ -661,35 +661,61 @@ export default class ContactsView extends Vue {
       this.alertMessage = "No identity is available.";
       this.isAlertVisible = true;
     } else {
-      let toFrom;
-      if (fromDid == this.identity?.did) {
-        toFrom = "from you to " + this.nameForDid(this.contacts, toDid);
-      } else {
-        toFrom = "from " + this.nameForDid(this.contacts, fromDid) + " to you";
-      }
-      let description;
-      if (this.hourDescriptionInput) {
-        description = " with description '" + this.hourDescriptionInput + "'";
-      } else {
-        description = " with no description";
-      }
+      // if they have unconfirmed amounts, ask to confirm those first
+      let wantsToConfirm = false;
       if (
-        confirm(
-          "Are you sure you want to record " +
-            this.hourInput +
-            " hours " +
-            toFrom +
-            description +
-            "?"
-        )
+        toDid == this.identity?.did &&
+        this.givenToMeUnconfirmed[fromDid] > 0
       ) {
-        this.createAndSubmitGive(
-          this.identity,
-          fromDid,
-          toDid,
-          parseFloat(this.hourInput),
-          this.hourDescriptionInput
-        );
+        if (
+          confirm(
+            "There are " +
+              this.givenToMeUnconfirmed[fromDid] +
+              " unconfirmed hours from them." +
+              " Would you like to confirm some of those hours?"
+          )
+        ) {
+          wantsToConfirm = true;
+        }
+      }
+      if (wantsToConfirm) {
+        this.$router.push({
+          name: "contact-amounts",
+          query: { contactDid: fromDid },
+        });
+      } else {
+        // ask to confirm amount
+        let toFrom;
+        if (fromDid == this.identity?.did) {
+          toFrom = "from you to " + this.nameForDid(this.contacts, toDid);
+        } else {
+          toFrom =
+            "from " + this.nameForDid(this.contacts, fromDid) + " to you";
+        }
+        let description;
+        if (this.hourDescriptionInput) {
+          description = " with description '" + this.hourDescriptionInput + "'";
+        } else {
+          description = " with no description";
+        }
+        if (
+          confirm(
+            "Are you sure you want to record " +
+              this.hourInput +
+              " hours " +
+              toFrom +
+              description +
+              "?"
+          )
+        ) {
+          this.createAndSubmitGive(
+            this.identity,
+            fromDid,
+            toDid,
+            parseFloat(this.hourInput),
+            this.hourDescriptionInput
+          );
+        }
       }
     }
   }