separate picture taking from uploading

project.task.yaml

@@ -1,6 +1,8 @@
 
 tasks :
 
+- alert & stop if give amount < 0
+
 - .1 on feed, don't show "to someone anonymous" if it's to a project
 - .1 on ideas, put an "x" to close it
 

src/components/GiftedDialog.vue

@@ -10,23 +10,22 @@
         placeholder="What was received"
         v-model="description"
       />
-      <div class="flex flex-row">
+      <div class="flex flex-row justify-center">
         <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2"
+          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
           @click="changeUnitCode()"
         >
           {{ libsUtil.UNIT_SHORT[unitCode] }}
         </span>
         <div
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
-          @click="decrement()"
+          @click="amountInput === '0' ? null : decrement()"
-          v-if="amountInput !== '0'"
         >
           <fa icon="chevron-left" />
         </div>
         <input
           type="number"
-          class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
+          class="border border-r-0 border-slate-400 px-2 py-2 text-center"
           v-model="amountInput"
         />
         <div
@@ -36,7 +35,7 @@
           <fa icon="chevron-right" />
         </div>
       </div>
-      <div class="mt-2 flex justify-center">
+      <div class="mt-4 flex justify-center">
         <span>
           <router-link
             :to="{

src/views/GiftedDetails.vue

@@ -25,23 +25,22 @@
       placeholder="What was received"
       v-model="description"
     />
-    <div class="flex flex-row">
+    <div class="flex flex-row justify-center">
       <span
-        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2"
+        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
         @click="changeUnitCode()"
       >
         {{ libsUtil.UNIT_SHORT[unitCode] }}
       </span>
       <div
         class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
-        @click="decrement()"
+        @click="amountInput === '0' ? null : decrement()"
-        v-if="amountInput !== '0'"
       >
         <fa icon="chevron-left" />
       </div>
       <input
         type="number"
-        class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
+        class="border border-r-0 border-slate-400 px-2 py-2 text-center"
         v-model="amountInput"
       />
       <div

src/views/GiftedPhoto.vue

@@ -15,11 +15,31 @@
 
       <!-- Heading -->
       <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        Photo
+        <span v-if="uploading"> Uploading... </span>
+        <span v-else-if="blob"> Look Good? </span>
+        <span v-else> Say "Cheese"! </span>
       </h1>
     </div>
-    <div v-if="localImageUrl">
+
-      Dude, you got an image! Dude, you got an image!
+    <div v-if="uploading" class="flex justify-center">
+      <fa icon="spinner" class="fa-spin fa-3x text-center block" />
+    </div>
+    <div v-else-if="blob">
+      <img :src="URL.createObjectURL(blob)" class="w-full" />
+      <div class="flex justify-around mt-2">
+        <button
+          @click="uploadImage"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+        >
+          <span>Upload</span>
+        </button>
+        <button
+          @click="retryImage"
+          class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-2 rounded-full"
+        >
+          <span>Retry</span>
+        </button>
+      </div>
     </div>
     <div v-else>
       <!--
@@ -35,7 +55,7 @@
         <div class="absolute bottom-0 w-full flex justify-center pb-4">
           <!-- Button -->
           <button
-            @click="storeImage"
+            @click="takeImage"
             class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
           >
             <fa icon="camera" class="fa-fw"></fa>
@@ -51,25 +71,21 @@ import axios from "axios";
 import Camera from "simple-vue-camera";
 import { Component, Vue } from "vue-facing-decorator";
 
-import { DEFAULT_IMAGE_API_SERVER } from "@/constants/app";
+import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
 import { getIdentity } from "@/libs/util";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({ components: { Camera } })
 export default class GiftedPhoto extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
-  localImageUrl: string | null = null;
+  blob: Blob | null = null;
+  uploading = false;
+
+  URL = window.URL || window.webkitURL;
 
   async mounted() {
     try {
@@ -91,10 +107,10 @@ export default class GiftedPhoto extends Vue {
     }
   }
 
-  async storeImage(/* payload: MouseEvent */) {
+  async takeImage(/* payload: MouseEvent */) {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    const blob = await cameraComponent?.snapshot();
+    this.blob = await cameraComponent?.snapshot();
-    if (!blob) {
+    if (!this.blob) {
       this.$notify(
         {
           group: "alert",
@@ -102,18 +118,39 @@ export default class GiftedPhoto extends Vue {
           title: "Error",
           text: "There was an error taking the picture. Please try again.",
         },
-        -1,
+        5000,
       );
       return;
     }
+  }
+
+  async retryImage() {
+    this.blob = null;
+  }
 
+  async uploadImage() {
+    this.uploading = true;
     const identifier = await getIdentity(this.activeDid);
     const token = await accessToken(identifier);
     const headers = {
       Authorization: "Bearer " + token,
     };
     const formData = new FormData();
-    formData.append("image", blob, "snapshot.jpg");
+    if (!this.blob) {
+      // yeah, this should never happen, but it helps with subsequent type checking
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error finding the picture. Please try again.",
+        },
+        5000,
+      );
+      this.uploading = false;
+      return;
+    }
+    formData.append("image", this.blob, "snapshot.jpg");
     try {
       const response = await axios.post(
         DEFAULT_IMAGE_API_SERVER + "/image",
@@ -121,9 +158,30 @@ export default class GiftedPhoto extends Vue {
         { headers },
       );
 
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Stored",
+          text: "Your picture has been stored.",
+        },
+        3000,
+      );
       console.log("Sent. Response:", response.data);
+      this.$router.back();
     } catch (error) {
       console.error("Error uploading the image", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error saving the picture. Please try again.",
+        },
+        5000,
+      );
+      this.uploading = false;
+      this.blob = null;
     }
   }
 }