add page to take a picture and upload to an image server

package-lock.json

@@ -53,6 +53,7 @@
         "readable-stream": "^4.4.2",
         "reflect-metadata": "^0.1.13",
         "register-service-worker": "^1.7.2",
+        "simple-vue-camera": "^1.1.3",
         "three": "^0.156.1",
         "ua-parser-js": "^1.0.37",
         "util": "^0.12.5",
@@ -25432,6 +25433,11 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-vue-camera": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/simple-vue-camera/-/simple-vue-camera-1.1.3.tgz",
+      "integrity": "sha512-GVAYq1BMI9cHt+h24tu2dfIFFvhjVQ1M8IkK5LmrKcYoBA8FZlLNlhrHC2NnTPbMAXIvJn1Bqx8X6Q31+Y2+jA=="
+    },
     "node_modules/sirv": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",

package.json

@@ -53,6 +53,7 @@
     "readable-stream": "^4.4.2",
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
+    "simple-vue-camera": "^1.1.3",
     "three": "^0.156.1",
     "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",

project.task.yaml

@@ -20,7 +20,7 @@ tasks :
 - 32 image on give :
   - Show a camera to take a picture
   - Scale the image to a reasonable size
-  - Upload to a public readable place
+  - Upload to a public readable place - restrict size, catch all errors, multiple file types
   - check the rate limits
   - use CID (hash?)
   - put the image URL in the claim
@@ -40,6 +40,7 @@ tasks :
   - show previous on "Your" screen
   - checkboxes - randomize vs show in order, show non-person-oriented messages, show only contacts, show only projects
 
+- .5 add a notice on the front page if their notifications are off
 - 08 allow user to add a time when they want their daily notification
 
 - .5 prompt for the name directly when they visit the QR scan page

src/components/GiftedDialog.vue

@@ -36,8 +36,16 @@
           <fa icon="chevron-right" />
         </div>
       </div>
-      <div class="mt-2 text-right">
-        <span v-if="showGivenToUser" class="mr-16">
+      <div class="mt-2 flex justify-between">
+        <span>
+          <router-link
+            :to="{ name: 'gifted-photo' }"
+            class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
+          >
+            <fa icon="camera" class="fa-fw" />
+          </router-link>
+        </span>
+        <span v-if="showGivenToUser">
           <input type="checkbox" class="mr-2" v-model="givenToUser" />
           <label class="text-sm">Given to you</label>
         </span>

src/main.ts

@@ -18,6 +18,7 @@ import {
   faBitcoinSign,
   faBurst,
   faCalendar,
+  faCamera,
   faChevronLeft,
   faChevronRight,
   faCircle,
@@ -76,6 +77,7 @@ library.add(
   faBitcoinSign,
   faBurst,
   faCalendar,
+  faCamera,
   faChevronLeft,
   faChevronRight,
   faCircle,
@@ -127,9 +129,11 @@ library.add(
 );
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import Camera from "simple-vue-camera";
 
 createApp(App)
   .component("fa", FontAwesomeIcon)
+  .component("camera", Camera)
   .use(createPinia())
   .use(VueAxios, axios)
   .use(router)

src/router/index.ts

@@ -84,6 +84,12 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
   },
+  {
+    path: "/gifted-photo",
+    name: "gifted-photo",
+    component: () =>
+      import(/* webpackChunkName: "gifted-photo" */ "../views/GiftedPhoto.vue"),
+  },
   {
     path: "/help",
     name: "help",

src/views/GiftedPhoto.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
+        Photo
+      </h1>
+    </div>
+    <div v-if="localImageUrl">
+      Dude, you got an image! Dude, you got an image!
+    </div>
+    <div v-else>
+      <camera
+        :resolution="{ width: 375, height: 812 }"
+        facingMode="user"
+        autoplay
+        ref="camera"
+      >
+        <button @click="storeImage">I'm on top of the video</button>
+      </camera>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from "axios";
+import Camera from "simple-vue-camera";
+import { Component, Vue } from "vue-facing-decorator";
+
+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;
+
+  localImageUrl: string | null = null;
+
+  async storeImage(/* payload: MouseEvent */) {
+    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
+    const blob = await cameraComponent?.snapshot();
+    if (!blob) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error taking the picture. Please try again.",
+        },
+        -1,
+      );
+      return;
+    }
+
+    //this.localImageUrl = URL.createObjectURL(blob);
+
+    console.log("Got an image:", blob?.size);
+
+    const formData = new FormData();
+    formData.append("image", blob, "snapshot.jpg");
+    try {
+      const response = await axios.post(
+        "http://localhost:3000/image",
+        formData,
+      );
+
+      console.log("Upload successful", response.data);
+    } catch (error) {
+      console.error("Error uploading the image", error);
+    }
+  }
+}
+</script>