|
|
|
@ -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(); |
|
|
|
if (!blob) { |
|
|
|
this.blob = await cameraComponent?.snapshot(); |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
