bump to v 0.3.10, fix image upload on Chrome

CHANGELOG.md

@@ -10,7 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nothing
 
 
-## [0.3.9] - 2024.04-28
+## [0.3.10] - 2024.05.11
+### Added
+- Share an image
+- Choose a file on the device for a profile image
+### Changed in DB or environment
+- Nothing
+
+
+## [0.3.9] - 2024.04.28 - 874e717e698b93a1ace9f588e675b8a3dccd7617
 ### Added
 - Offers on contacts page
 - Checks on front page until they show as registered
@@ -24,7 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nothing
 
 
-## [0.3.8] - 2024.04-20 - 15c026c80ce03a26cae3ff80b0888934c101c7e2
+## [0.3.8] - 2024.04.20 - 15c026c80ce03a26cae3ff80b0888934c101c7e2
 ### Added
 - Profile image for user
 ### Fixed
@@ -33,7 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Nothing
 
 
-## [0.3.7] - 2024.04-10 - cf18f1543a700d62a5f9e764905a4aafe1fb229b
+## [0.3.7] - 2024.04.10 - cf18f1543a700d62a5f9e764905a4aafe1fb229b
 ### Added
 - Filter on home page feed
 - Ability to set time of daily notification

README.md

@@ -16,28 +16,30 @@ We have pkgx.dev set up in package.json, so you can use `dev` to set up the dev
 npm install
 ```
 
-### Compiles and hot-reloads for development
+### Compile and hot-reloads for development
 ```
 npm run dev
 ```
 
-### Builds the production app
+### Build the test & production app
 ```
 npm run serve
 ```
 
-### Lints and fixes files
+### Lint and fix files
 ```
 npm run lint
 ```
 
-### Compiles and minifies for production
+### Compile and minify for test & production
 
 * If there are DB changes: before updating the test server, open browser(s) with current version to test DB migrations.
 
+* When deploying to a different domain, look at the "domain" note in the additional-scripts.js file.
+
 * `npx prettier --write ./sw_scripts/`
 
-* Update the project.task.yaml & CHANGELOG.md & the version in package.json, run `npm install`.
+* Update the ClickUp tasks & CHANGELOG.md & the version in package.json, run `npm install`.
 
 * Record what version is currently on production.
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.10-beta",
+  "version": "0.3.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari",
-      "version": "0.3.10-beta",
+      "version": "0.3.10",
       "dependencies": {
         "@dicebear/collection": "^5.4.1",
         "@dicebear/core": "^5.4.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.10-beta",
+  "version": "0.3.10",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/PhotoDialog.vue

@@ -378,7 +378,7 @@ export default class PhotoDialog extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was an error saving the picture. Please try again.",
+          text: "There was an error saving the picture.",
         },
         5000,
       );

src/main.ts

@@ -13,6 +13,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faArrowLeft,
   faArrowRight,
+  faArrowRotateBackward,
   faArrowUpRightFromSquare,
   faBan,
   faBitcoinSign,
@@ -77,6 +78,7 @@ import {
 library.add(
   faArrowLeft,
   faArrowRight,
+  faArrowRotateBackward,
   faArrowUpRightFromSquare,
   faBan,
   faBitcoinSign,

src/views/SharedPhotoView.vue

@@ -35,6 +35,7 @@
             Cancel
           </button>
         </div>
+        <PhotoDialog ref="photoDialog" />
       </div>
 
       <div class="flex justify-center">
@@ -52,8 +53,10 @@
 </template>
 
 <script lang="ts">
+import axios from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 
+import PhotoDialog from "@/components/PhotoDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import {
   DEFAULT_IMAGE_API_SERVER,
@@ -64,9 +67,8 @@ import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { getIdentity } from "@/libs/util";
 import { accessToken } from "@/libs/crypto";
-import axios from "axios";
 
-@Component({ components: { QuickNav } })
+@Component({ components: { PhotoDialog, QuickNav } })
 export default class SharedPhotoView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
@@ -123,15 +125,19 @@ export default class SharedPhotoView extends Vue {
     });
   }
 
-  async recordProfile() {
+  recordProfile() {
-    await this.sendToImageServer(IMAGE_TYPE_PROFILE).then((url) => {
+    (this.$refs.photoDialog as PhotoDialog).open(
-      if (url) {
+      async (imgUrl) => {
         db.settings.update(MASTER_SETTINGS_KEY, {
-          profileImageUrl: url,
+          profileImageUrl: imgUrl,
         });
         this.$router.push({ name: "account" });
-      }
+      },
-    });
+      true,
+      IMAGE_TYPE_PROFILE,
+      this.imageBlob,
+      this.imageFileName,
+    );
   }
 
   async cancel() {
@@ -159,16 +165,37 @@ export default class SharedPhotoView extends Vue {
       );
       formData.append("claimType", imageType);
 
+      console.log(
+        "Sending image to server",
+        formData,
+        headers,
+        DEFAULT_IMAGE_API_SERVER + "/image",
+      );
       const response = await axios.post(
         DEFAULT_IMAGE_API_SERVER + "/image",
         formData,
         { headers },
       );
+      if (response?.data?.url) {
         this.imageBlob = undefined;
         this.imageFileName = undefined;
+        result = response.data.url as string;
+      } else {
+        console.error("Problem uploading the image", response.data);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text:
+              "There was a problem saving the picture. " +
+              (response?.data?.message || ""),
+          },
+          5000,
+        );
+      }
 
       this.uploading = false;
-      result = response.data.url as string;
     } catch (error) {
       console.error("Error uploading the image", error);
       this.$notify(
@@ -176,7 +203,7 @@ export default class SharedPhotoView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was an error saving the picture. Please try again.",
+          text: "There was an error saving the picture.",
         },
         5000,
       );

sw_scripts/additional-scripts.js

@@ -135,8 +135,15 @@ self.addEventListener("notificationclick", (event) => {
 self.addEventListener("fetch", (event) => {
   logConsoleAndDb("Service worker got fetch event.", event);
 
-  // Regular requests not related to Web Share Target.
+  // Bypass any regular requests not related to Web Share Target
-  if (event.request.method !== "POST") {
+  // and also requests that are not exactly to the timesafari.app
+  // (because Chrome will send subdomain requests like image-api.timesafari.app through this service worker).
+  if (
+    event.request.method !== "POST" ||
+    (event.request.url.hostname !== "timesafari.app" &&
+      event.request.url.hostname !== "test.timesafari.app" &&
+      event.request.url.hostname !== "localhost")
+  ) {
     event.respondWith(fetch(event.request));
     return;
   }