|
|
|
@ -1,15 +1,14 @@ |
|
|
|
<template> |
|
|
|
<!-- CONTENT --> |
|
|
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|
|
|
<div v-if="visible" class="dialog-overlay"> |
|
|
|
<!-- Breadcrumb --> |
|
|
|
<div class="mb-8"> |
|
|
|
<div class="dialog"> |
|
|
|
<!-- 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()" |
|
|
|
class="text-lg text-center px-2 py-1 absolute -right-2 -top-1" |
|
|
|
@click="close()" |
|
|
|
> |
|
|
|
<fa icon="chevron-left" class="fa-fw"></fa> |
|
|
|
<fa icon="xmark" class="fa-fw"></fa> |
|
|
|
</h1> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -19,46 +18,46 @@ |
|
|
|
<span v-else-if="blob"> Look Good? </span> |
|
|
|
<span v-else> Say "Cheese"! </span> |
|
|
|
</h1> |
|
|
|
</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-around"> |
|
|
|
<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 v-if="uploading" class="flex justify-center"> |
|
|
|
<fa icon="spinner" class="fa-spin fa-3x text-center block" /> |
|
|
|
</div> |
|
|
|
<img :src="URL.createObjectURL(blob)" class="mt-2 w-full" /> |
|
|
|
</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 bottom-0 w-full flex justify-center pb-4"> |
|
|
|
<!-- Button --> |
|
|
|
<div v-else-if="blob"> |
|
|
|
<div class="flex justify-around"> |
|
|
|
<button |
|
|
|
@click="takeImage" |
|
|
|
@click="uploadImage" |
|
|
|
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> |
|
|
|
<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> |
|
|
|
</camera> |
|
|
|
<img :src="URL.createObjectURL(blob)" class="mt-2 w-full" /> |
|
|
|
</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 bottom-0 w-full flex justify-center pb-4"> |
|
|
|
<!-- Button --> |
|
|
|
<button |
|
|
|
@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> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</camera> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
@ -73,12 +72,14 @@ import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings"; |
|
|
|
import { accessToken } from "@/libs/crypto"; |
|
|
|
|
|
|
|
@Component({ components: { Camera } }) |
|
|
|
export default class GiftedPhoto extends Vue { |
|
|
|
export default class GiftedPhotoDialog extends Vue { |
|
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
|
|
|
|
|
activeDid = ""; |
|
|
|
blob: Blob | null = null; |
|
|
|
setImage: (arg: string) => void = () => {}; |
|
|
|
uploading = false; |
|
|
|
visible = false; |
|
|
|
|
|
|
|
URL = window.URL || window.webkitURL; |
|
|
|
|
|
|
|
@ -102,6 +103,16 @@ export default class GiftedPhoto extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
open(setImageFn: (arg: string) => void) { |
|
|
|
this.visible = true; |
|
|
|
this.setImage = setImageFn; |
|
|
|
} |
|
|
|
|
|
|
|
close() { |
|
|
|
this.visible = false; |
|
|
|
this.blob = null; |
|
|
|
} |
|
|
|
|
|
|
|
async takeImage(/* payload: MouseEvent */) { |
|
|
|
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>; |
|
|
|
this.blob = await cameraComponent?.snapshot(); // png is default; if that changes, change extension in formData.append |
|
|
|
@ -145,7 +156,7 @@ export default class GiftedPhoto extends Vue { |
|
|
|
this.uploading = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
formData.append("image", this.blob, "snapshot.png"); |
|
|
|
formData.append("image", this.blob, "snapshot.png"); // png is set in snapshot() |
|
|
|
formData.append("claimType", "GiveAction"); |
|
|
|
try { |
|
|
|
const response = await axios.post( |
|
|
|
@ -155,10 +166,9 @@ export default class GiftedPhoto extends Vue { |
|
|
|
); |
|
|
|
this.uploading = false; |
|
|
|
|
|
|
|
// we won't give a notification here because the user will be taken back to finish |
|
|
|
|
|
|
|
localStorage.setItem("imageUrl", response.data.url as string); |
|
|
|
this.$router.back(); |
|
|
|
this.visible = false; |
|
|
|
this.blob = null; |
|
|
|
this.setImage(response.data.url as string); |
|
|
|
} catch (error) { |
|
|
|
console.error("Error uploading the image", error); |
|
|
|
this.$notify( |
|
|
|
@ -176,3 +186,26 @@ export default class GiftedPhoto extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
</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> |
