Jose Olarte III
8 months ago
20 changed files with 1048 additions and 88 deletions
@ -0,0 +1,7 @@ |
|||||
|
|
||||
|
# I tried setting values here and using `vue-cli-service build --mode development` |
||||
|
# but it didn't create some things in "dist": |
||||
|
# - the "css" directory with the CSS extracted from Vue files |
||||
|
# - the sw_scripts-combined* files |
||||
|
# |
||||
|
# ¯\_(ツ)_/¯ |
||||
@ -0,0 +1,4 @@ |
|||||
|
# Only the variables that start with VUE_APP_ are seen in the application process.env in Vue. |
||||
|
VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H |
||||
|
VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch |
||||
|
VUE_APP_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app |
||||
@ -0,0 +1,314 @@ |
|||||
|
<template> |
||||
|
<div v-if="visible" class="dialog-overlay z-[60]"> |
||||
|
<div class="dialog relative"> |
||||
|
<div class="text-lg text-center font-light relative z-50"> |
||||
|
<div |
||||
|
id="ViewHeading" |
||||
|
class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none" |
||||
|
> |
||||
|
<span v-if="uploading"> Uploading... </span> |
||||
|
<span v-else-if="blob"> Look Good? </span> |
||||
|
<span v-else> Say "Cheese"! </span> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white" |
||||
|
@click="close()" |
||||
|
> |
||||
|
<fa icon="xmark" class="w-[1em]"></fa> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<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"> |
||||
|
<div |
||||
|
class="flex justify-center gap-2 absolute bottom-[1rem] left-[1rem] right-[1rem] bg-black/50 px-4 py-2" |
||||
|
> |
||||
|
<button |
||||
|
@click="uploadImage" |
||||
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" |
||||
|
> |
||||
|
<span>Upload</span> |
||||
|
</button> |
||||
|
<button |
||||
|
@click="retryImage" |
||||
|
class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded-full" |
||||
|
> |
||||
|
<span>Retry</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="flex justify-center"> |
||||
|
<img :src="URL.createObjectURL(blob)" class="mt-2 rounded" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<!-- |
||||
|
Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically: |
||||
|
:resolution="{ width: 375, height: 812 }" |
||||
|
--> |
||||
|
<camera facingMode="environment" autoplay ref="camera"> |
||||
|
<div |
||||
|
class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 landscape:right-0 landscape:top-0 landscape:bottom-0 flex landscape:flex-row justify-center items-center portrait:pb-2 landscape:pr-4" |
||||
|
> |
||||
|
<button |
||||
|
@click="takeImage" |
||||
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none" |
||||
|
> |
||||
|
<fa icon="camera" class="w-[1em]"></fa> |
||||
|
</button> |
||||
|
</div> |
||||
|
</camera> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import axios from "axios"; |
||||
|
import Camera from "simple-vue-camera"; |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
|
||||
|
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"; |
||||
|
|
||||
|
@Component({ components: { Camera } }) |
||||
|
export default class GiftedPhotoDialog extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
activeDid = ""; |
||||
|
blob: Blob | null = null; |
||||
|
setImage: (arg: string) => void = () => {}; |
||||
|
imageHeight?: number = window.innerHeight / 2; |
||||
|
imageWidth?: number = window.innerWidth / 2; |
||||
|
imageWarning = "."; |
||||
|
uploading = false; |
||||
|
visible = false; |
||||
|
|
||||
|
URL = window.URL || window.webkitURL; |
||||
|
|
||||
|
async mounted() { |
||||
|
try { |
||||
|
await db.open(); |
||||
|
const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings; |
||||
|
this.activeDid = settings?.activeDid || ""; |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
} catch (err: any) { |
||||
|
console.error("Error retrieving settings from database:", err); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: err.message || "There was an error retrieving your settings.", |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
open(setImageFn: (arg: string) => void) { |
||||
|
this.visible = true; |
||||
|
const bottomNav = document.querySelector("#QuickNav") as HTMLElement; |
||||
|
if (bottomNav) { |
||||
|
bottomNav.style.display = "none"; |
||||
|
} |
||||
|
this.setImage = setImageFn; |
||||
|
} |
||||
|
|
||||
|
close() { |
||||
|
this.visible = false; |
||||
|
const bottomNav = document.querySelector("#QuickNav") as HTMLElement; |
||||
|
if (bottomNav) { |
||||
|
bottomNav.style.display = ""; |
||||
|
} |
||||
|
this.blob = null; |
||||
|
} |
||||
|
|
||||
|
async takeImage(/* payload: MouseEvent */) { |
||||
|
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>; |
||||
|
|
||||
|
/** |
||||
|
* This logic to set the image height & width correctly. |
||||
|
* Without it, the portrait orientation ends up with an image that is stretched horizontally. |
||||
|
* Note that it's the same with raw browser Javascript; see the "drawImage" example below. |
||||
|
* Now that I've done it, I can't explain why it works. |
||||
|
*/ |
||||
|
let imageHeight = cameraComponent?.resolution?.height; |
||||
|
let imageWidth = cameraComponent?.resolution?.width; |
||||
|
const initialImageRatio = imageWidth / imageHeight; |
||||
|
const windowRatio = window.innerWidth / window.innerHeight; |
||||
|
if (initialImageRatio > 1 && windowRatio < 1) { |
||||
|
// the image is wider than it is tall, and the window is taller than it is wide |
||||
|
// For some reason, mobile in portrait orientation renders a horizontally-stretched image. |
||||
|
// We're gonna force it opposite. |
||||
|
imageHeight = cameraComponent?.resolution?.width; |
||||
|
imageWidth = cameraComponent?.resolution?.height; |
||||
|
} else if (initialImageRatio < 1 && windowRatio > 1) { |
||||
|
// the image is taller than it is wide, and the window is wider than it is tall |
||||
|
// Haven't seen this happen, but we'll do it just in case. |
||||
|
imageHeight = cameraComponent?.resolution?.width; |
||||
|
imageWidth = cameraComponent?.resolution?.height; |
||||
|
} |
||||
|
const newImageRatio = imageWidth / imageHeight; |
||||
|
if (newImageRatio < windowRatio) { |
||||
|
// the image is a taller ratio than the window, so fit the height first |
||||
|
imageHeight = window.innerHeight / 2; |
||||
|
imageWidth = imageHeight * newImageRatio; |
||||
|
} else { |
||||
|
// the image is a wider ratio than the window, so fit the width first |
||||
|
imageWidth = window.innerWidth / 2; |
||||
|
imageHeight = imageWidth / newImageRatio; |
||||
|
} |
||||
|
|
||||
|
// The resolution is only necessary because of that mobile portrait-orientation case. |
||||
|
// The mobile emulation in a browser shows something stretched vertically, but real devices work fine. |
||||
|
this.blob = await cameraComponent?.snapshot({ |
||||
|
height: imageHeight, |
||||
|
width: imageWidth, |
||||
|
}); // png is default; if that changes, change extension in formData.append |
||||
|
if (!this.blob) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "There was an error taking the picture. Please try again.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async retryImage() { |
||||
|
this.blob = null; |
||||
|
} |
||||
|
|
||||
|
/**** |
||||
|
|
||||
|
Here's an approach to photo capture without a library. It has similar quirks. |
||||
|
Now that we've fixed styling for simple-vue-camera, it's not critical to refactor. Maybe someday. |
||||
|
|
||||
|
<button id="start-camera" @click="cameraClicked">Start Camera</button> |
||||
|
<video id="video" width="320" height="240" autoplay></video> |
||||
|
<button id="snap-photo" @click="photoSnapped">Snap Photo</button> |
||||
|
<canvas id="canvas" width="320" height="240"></canvas> |
||||
|
|
||||
|
async cameraClicked() { |
||||
|
console.log("camera_button clicked"); |
||||
|
const video = document.querySelector("#video"); |
||||
|
const stream = await navigator.mediaDevices.getUserMedia({ |
||||
|
video: true, |
||||
|
audio: false, |
||||
|
}); |
||||
|
if (video instanceof HTMLVideoElement) { |
||||
|
video.srcObject = stream; |
||||
|
} |
||||
|
} |
||||
|
photoSnapped() { |
||||
|
console.log("snap_photo clicked"); |
||||
|
const video = document.querySelector("#video"); |
||||
|
const canvas = document.querySelector("#canvas"); |
||||
|
if ( |
||||
|
canvas instanceof HTMLCanvasElement && |
||||
|
video instanceof HTMLVideoElement |
||||
|
) { |
||||
|
canvas |
||||
|
?.getContext("2d") |
||||
|
?.drawImage(video, 0, 0, canvas.width, canvas.height); |
||||
|
// ... or set the blob: |
||||
|
// canvas?.toBlob( |
||||
|
// (blob) => { |
||||
|
// this.blob = blob; |
||||
|
// }, |
||||
|
// "image/jpeg", |
||||
|
// 1, |
||||
|
// ); |
||||
|
|
||||
|
// data url of the image |
||||
|
const image_data_url = canvas?.toDataURL("image/jpeg"); |
||||
|
console.log(image_data_url); |
||||
|
} |
||||
|
} |
||||
|
****/ |
||||
|
|
||||
|
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(); |
||||
|
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.png"); // png is set in snapshot() |
||||
|
formData.append("claimType", "GiveAction"); |
||||
|
try { |
||||
|
const response = await axios.post( |
||||
|
DEFAULT_IMAGE_API_SERVER + "/image", |
||||
|
formData, |
||||
|
{ headers }, |
||||
|
); |
||||
|
this.uploading = false; |
||||
|
|
||||
|
this.visible = false; |
||||
|
this.blob = null; |
||||
|
this.setImage(response.data.url as string); |
||||
|
} 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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.dialog-overlay { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
.dialog { |
||||
|
background-color: white; |
||||
|
padding: 1rem; |
||||
|
border-radius: 0.5rem; |
||||
|
width: 100%; |
||||
|
max-width: 700px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,428 @@ |
|||||
|
<template> |
||||
|
<QuickNav /> |
||||
|
<TopMessage /> |
||||
|
|
||||
|
<!-- CONTENT --> |
||||
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
||||
|
<!-- 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="cancel()" |
||||
|
> |
||||
|
<fa icon="chevron-left" class="fa-fw"></fa> |
||||
|
</h1> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Heading --> |
||||
|
<h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1> |
||||
|
|
||||
|
<h1 class="text-xl font-bold text-center mb-4"> |
||||
|
{{ message }} {{ giverName || "somebody not named" }} |
||||
|
</h1> |
||||
|
<textarea |
||||
|
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2" |
||||
|
placeholder="What was received" |
||||
|
v-model="description" |
||||
|
/> |
||||
|
<div class="flex flex-row justify-center"> |
||||
|
<span |
||||
|
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="amountInput === '0' ? null : decrement()" |
||||
|
> |
||||
|
<fa icon="chevron-left" /> |
||||
|
</div> |
||||
|
<input |
||||
|
type="number" |
||||
|
class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20" |
||||
|
v-model="amountInput" |
||||
|
/> |
||||
|
<div |
||||
|
class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2" |
||||
|
@click="increment()" |
||||
|
> |
||||
|
<fa icon="chevron-right" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex justify-center mt-4"> |
||||
|
<span v-if="imageUrl" class="flex justify-between"> |
||||
|
<a :href="imageUrl" target="_blank" class="text-blue-500 ml-4"> |
||||
|
<img :src="imageUrl" class="h-24 rounded-xl" /> |
||||
|
</a> |
||||
|
<fa |
||||
|
icon="trash-can" |
||||
|
@click="confirmDeleteImage" |
||||
|
class="text-red-500 fa-fw ml-8 mt-10" |
||||
|
/> |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
<fa |
||||
|
icon="camera" |
||||
|
class="bg-blue-500 text-white px-2 py-2 rounded-md" |
||||
|
@click="openPhotoDialog" |
||||
|
/> |
||||
|
</span> |
||||
|
</div> |
||||
|
<GiftedPhotoDialog ref="photoDialog" /> |
||||
|
|
||||
|
<div v-if="projectId" class="mt-4"> |
||||
|
<fa |
||||
|
icon="check" |
||||
|
class="bg-slate-500 text-white h-5 w-5 px-0.5 py-0.5 mr-2 rounded" |
||||
|
/> |
||||
|
<label class="text-sm">This is given to a project</label> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="!projectId" class="mt-4"> |
||||
|
<input type="checkbox" class="h-6 w-6 mr-2" v-model="givenToUser" /> |
||||
|
<label class="text-sm">Given to you</label> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mt-4"> |
||||
|
<input type="checkbox" class="h-6 w-6 mr-2" v-model="isTrade" /> |
||||
|
<label class="text-sm">Trade (not a gift)</label> |
||||
|
</div> |
||||
|
|
||||
|
<p class="text-center mb-2 mt-6 italic"> |
||||
|
Sign & Send to publish to the world |
||||
|
</p> |
||||
|
<button |
||||
|
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" |
||||
|
@click="confirm" |
||||
|
> |
||||
|
Sign & Send |
||||
|
</button> |
||||
|
<button |
||||
|
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" |
||||
|
@click="cancel" |
||||
|
> |
||||
|
Cancel |
||||
|
</button> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
|
||||
|
import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app"; |
||||
|
import QuickNav from "@/components/QuickNav.vue"; |
||||
|
import TopMessage from "@/components/TopMessage.vue"; |
||||
|
import { db } from "@/db/index"; |
||||
|
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings"; |
||||
|
import { createAndSubmitGive } from "@/libs/endorserServer"; |
||||
|
import * as libsUtil from "@/libs/util"; |
||||
|
import { accessToken } from "@/libs/crypto"; |
||||
|
import GiftedDialog from "@/components/GiftedDialog.vue"; |
||||
|
import GiftedPhotoDialog from "@/components/GiftedPhotoDialog.vue"; |
||||
|
|
||||
|
@Component({ |
||||
|
components: { |
||||
|
GiftedDialog, |
||||
|
GiftedPhotoDialog, |
||||
|
QuickNav, |
||||
|
TopMessage, |
||||
|
}, |
||||
|
}) |
||||
|
export default class GiftedDetails extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
activeDid = ""; |
||||
|
apiServer = ""; |
||||
|
|
||||
|
amountInput = "0"; |
||||
|
description = ""; |
||||
|
givenToUser = false; |
||||
|
giverDid: string | undefined; |
||||
|
giverName = ""; |
||||
|
imageUrl = ""; |
||||
|
isTrade = false; |
||||
|
message = ""; |
||||
|
offerId = ""; |
||||
|
projectId = ""; |
||||
|
unitCode = "HUR"; |
||||
|
|
||||
|
libsUtil = libsUtil; |
||||
|
|
||||
|
async mounted() { |
||||
|
this.amountInput = this.$route.query.amountInput as string; |
||||
|
this.description = this.$route.query.description as string; |
||||
|
this.giverDid = this.$route.query.giverDid as string; |
||||
|
this.giverName = this.$route.query.giverName as string; |
||||
|
this.message = this.$route.query.message as string; |
||||
|
this.offerId = this.$route.query.offerId as string; |
||||
|
this.projectId = this.$route.query.projectId as string; |
||||
|
this.unitCode = this.$route.query.unitCode as string; |
||||
|
|
||||
|
this.imageUrl = localStorage.getItem("imageUrl") || ""; |
||||
|
|
||||
|
this.givenToUser = !this.projectId; |
||||
|
|
||||
|
try { |
||||
|
await db.open(); |
||||
|
const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings; |
||||
|
this.apiServer = settings?.apiServer || ""; |
||||
|
this.activeDid = settings?.activeDid || ""; |
||||
|
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
} catch (err: any) { |
||||
|
console.error("Error retrieving settings from database:", err); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: err.message || "There was an error retrieving your settings.", |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
changeUnitCode() { |
||||
|
const units = Object.keys(this.libsUtil.UNIT_SHORT); |
||||
|
const index = units.indexOf(this.unitCode); |
||||
|
this.unitCode = units[(index + 1) % units.length]; |
||||
|
} |
||||
|
|
||||
|
increment() { |
||||
|
this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`; |
||||
|
} |
||||
|
|
||||
|
decrement() { |
||||
|
this.amountInput = `${Math.max( |
||||
|
0, |
||||
|
(parseFloat(this.amountInput) || 1) - 1, |
||||
|
)}`; |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
this.deleteImage(); // not awaiting, so they'll go back immediately |
||||
|
this.$router.back(); |
||||
|
} |
||||
|
|
||||
|
openPhotoDialog() { |
||||
|
(this.$refs.photoDialog as GiftedPhotoDialog).open((imgUrl) => { |
||||
|
this.imageUrl = imgUrl; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
confirmDeleteImage() { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "modal", |
||||
|
type: "confirm", |
||||
|
title: "Are you sure you want to delete the image?", |
||||
|
text: "", |
||||
|
onYes: this.deleteImage, |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
async deleteImage() { |
||||
|
if (!this.imageUrl) { |
||||
|
return; |
||||
|
} |
||||
|
try { |
||||
|
const identity = await libsUtil.getIdentity(this.activeDid); |
||||
|
const token = await accessToken(identity); |
||||
|
const response = await this.axios.delete( |
||||
|
DEFAULT_IMAGE_API_SERVER + |
||||
|
"/image/" + |
||||
|
encodeURIComponent(this.imageUrl), |
||||
|
{ |
||||
|
headers: { |
||||
|
Authorization: `Bearer ${token}`, |
||||
|
}, |
||||
|
}, |
||||
|
); |
||||
|
if (response.status === 204) { |
||||
|
// don't bother with a notification |
||||
|
// (either they'll simply continue or they're canceling and going back) |
||||
|
} else { |
||||
|
console.error("Non-success deleting image:", response); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "There was a problem deleting the image.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
// keep the imageUrl in localStorage so the user can try again if they want |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
localStorage.removeItem("imageUrl"); |
||||
|
this.imageUrl = ""; |
||||
|
} catch (error) { |
||||
|
console.error("Error deleting image:", error); |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
if ((error as any).response.status === 404) { |
||||
|
console.log("The image was already deleted:", error); |
||||
|
|
||||
|
localStorage.removeItem("imageUrl"); |
||||
|
this.imageUrl = ""; |
||||
|
|
||||
|
// it already doesn't exist so we won't say anything to the user |
||||
|
} else { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "There was an error deleting the image.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async confirm() { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "toast", |
||||
|
text: "Recording the give...", |
||||
|
title: "", |
||||
|
}, |
||||
|
1000, |
||||
|
); |
||||
|
// this is asynchronous, but we don't need to wait for it to complete |
||||
|
await this.recordGive(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param giverDid may be null |
||||
|
* @param description may be an empty string |
||||
|
* @param amountInput may be 0 |
||||
|
* @param unitCode may be omitted, defaults to "HUR" |
||||
|
*/ |
||||
|
public async recordGive() { |
||||
|
if (!this.activeDid) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "You must select an identifier before you can record a give.", |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.description && !this.amountInput) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: `You must enter a description or some number of ${ |
||||
|
this.libsUtil.UNIT_LONG[this.unitCode] |
||||
|
}.`, |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
const identity = await libsUtil.getIdentity(this.activeDid); |
||||
|
const result = await createAndSubmitGive( |
||||
|
this.axios, |
||||
|
this.apiServer, |
||||
|
identity, |
||||
|
this.giverDid, |
||||
|
this.givenToUser ? this.activeDid : undefined, |
||||
|
this.description, |
||||
|
parseFloat(this.amountInput), |
||||
|
this.unitCode, |
||||
|
this.projectId, |
||||
|
this.offerId, |
||||
|
this.isTrade, |
||||
|
this.imageUrl, |
||||
|
); |
||||
|
|
||||
|
if ( |
||||
|
result.type === "error" || |
||||
|
this.isGiveCreationError(result.response) |
||||
|
) { |
||||
|
const errorMessage = this.getGiveCreationErrorMessage(result); |
||||
|
console.error("Error with give creation result:", result); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: errorMessage || "There was an error creating the give.", |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} else { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "success", |
||||
|
title: "Success", |
||||
|
text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`, |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
localStorage.removeItem("imageUrl"); |
||||
|
this.$router.back(); |
||||
|
} |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
} catch (error: any) { |
||||
|
console.error("Error with give recordation caught:", error); |
||||
|
const message = |
||||
|
error.userMessage || |
||||
|
error.response?.data?.error?.message || |
||||
|
"There was an error recording the give."; |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: message, |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Helper functions for readability |
||||
|
|
||||
|
/** |
||||
|
* @param result response "data" from the server |
||||
|
* @returns true if the result indicates an error |
||||
|
*/ |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
isGiveCreationError(result: any) { |
||||
|
return result.status !== 201 || result.data?.error; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data") |
||||
|
* @returns best guess at an error message |
||||
|
*/ |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
getGiveCreationErrorMessage(result: any) { |
||||
|
return ( |
||||
|
result.error?.userMessage || |
||||
|
result.error?.error || |
||||
|
result.response?.data?.error?.message |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue