add end time to projects

README.md

@@ -74,7 +74,7 @@ TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_APP_SERVER=https://test.timesafari.
 
   (The plain `npm run build` uses the .env.production file.)
 
-* Back up the time-safari/dist folder, then `mv time-safari/dist time-safari-dist-prev.0 && mv crowd-funder-for-time-pwa/dist time-safari/`
+* Back up the time-safari/dist folder & deploy: `mv time-safari/dist time-safari-dist-prev.0 && mv crowd-funder-for-time-pwa/dist time-safari/`
 
 * Record the new hash in the changelog. Edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
 

src/views/ClaimView.vue

@@ -74,7 +74,7 @@
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400" />
-              {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
+              Recorded {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
             </div>
             <div v-if="veriClaim.claim.image" class="flex justify-center">
               <a :href="veriClaim.claim.image" target="_blank">

src/views/NewEditProjectView.vue

@@ -93,6 +93,9 @@
     />
 
     <div class="flex mb-4 columns-3 w-full">
+      <div class="col-span-1 w-full flex justify-center items-center">
+        <span>Starts At</span>
+      </div>
       <input
         v-model="startDateInput"
         placeholder="Start Date"
@@ -106,7 +109,31 @@
         type="time"
         class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
       />
-      <span class="col-span-1 w-full flex justify-center">{{ zoneName }}</span>
+      <span class="col-span-1 w-full flex justify-center items-center">
+        {{ zoneName }}
+      </span>
+    </div>
+
+    <div class="flex mb-4 columns-3 w-full">
+      <div class="col-span-1 w-full flex justify-center items-center">
+        <span>Ends at</span>
+      </div>
+      <input
+        v-model="endDateInput"
+        placeholder="End Date"
+        type="date"
+        class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
+      />
+      <input
+        :disabled="!endDateInput"
+        placeholder="End Time"
+        v-model="endTimeInput"
+        type="time"
+        class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
+      />
+      <span class="col-span-1 w-full flex justify-center items-center">
+        {{ zoneName }}
+      </span>
     </div>
 
     <div
@@ -251,6 +278,8 @@ export default class NewEditProjectView extends Vue {
   activeDid = "";
   agentDid = "";
   apiServer = "";
+  endDateInput?: string;
+  endTimeInput?: string;
   errorMessage = "";
   fullClaim: PlanVerifiableCredential = {
     "@context": "https://schema.org",
@@ -325,6 +354,13 @@ export default class NewEditProjectView extends Vue {
           this.startDateInput = localDateTime.toFormat("yyyy-MM-dd");
           this.startTimeInput = localDateTime.toFormat("HH:mm");
         }
+        if (this.fullClaim.endTime) {
+          const localDateTime = DateTime.fromISO(
+            this.fullClaim.endTime as string,
+          ).toLocal();
+          this.endDateInput = localDateTime.toFormat("yyyy-MM-dd");
+          this.endTimeInput = localDateTime.toFormat("HH:mm");
+        }
       }
     } catch (error) {
       console.error("Got error retrieving that project", error);
@@ -460,7 +496,7 @@ export default class NewEditProjectView extends Vue {
             group: "alert",
             type: "danger",
             title: "Date Error",
-            text: "The date was invalid so it was not set.",
+            text: "The start date was invalid so it was not set.",
           },
           5000,
         );
@@ -468,6 +504,28 @@ export default class NewEditProjectView extends Vue {
     } else {
       delete vcClaim.startTime;
     }
+    if (this.endDateInput) {
+      try {
+        const endTimeFull = this.endTimeInput || "23:59:59";
+        const fullTimeString = this.endDateInput + " " + endTimeFull;
+        // throw an error on an invalid date or time string
+        vcClaim.endTime = new Date(fullTimeString).toISOString(); // ensure timezone is part of it
+      } catch {
+        // it's not a valid date so erase it and tell the user
+        delete vcClaim.endTime;
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Date Error",
+            text: "The end date was invalid so it was not set.",
+          },
+          5000,
+        );
+      }
+    } else {
+      delete vcClaim.endTime;
+    }
     const vcJwt = await createEndorserJwtVcFromClaim(this.activeDid, vcClaim);
 
     // Make the xhr request payload

src/views/ProjectViewView.vue

@@ -69,7 +69,11 @@
               </div>
               <div v-if="startTime">
                 <fa icon="calendar" class="fa-fw text-slate-400"></fa>
-                {{ startTime }}
+                Starts {{ startTime }}
+              </div>
+              <div v-if="endTime">
+                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                Ends {{ endTime }}
               </div>
               <div v-if="latitude || longitude">
                 <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
@@ -541,6 +545,7 @@ export default class ProjectViewView extends Vue {
   apiServer = "";
   checkingConfirmationForJwtId = "";
   description = "";
+  endTime = "";
   expanded = false;
   fulfilledByThis: PlanSummaryRecord | null = null;
   fulfillersToThis: Array<PlanSummaryRecord> = [];
@@ -641,6 +646,14 @@ export default class ProjectViewView extends Vue {
             " " +
             startDateTime.toLocaleTimeString();
         }
+        const endTime = resp.data.claim?.endTime;
+        if (endTime != null) {
+          const endDateTime = new Date(endTime);
+          this.endTime =
+            endDateTime.toLocaleDateString() +
+            " " +
+            endDateTime.toLocaleTimeString();
+        }
         this.agentDid = resp.data.claim?.agent?.identifier;
         this.agentDidVisibleToDids =
           resp.data.claim?.agent?.identifierVisibleToDids || [];