diff options
author | Andinus <andinus@nand.sh> | 2022-02-04 13:11:42 +0530 |
---|---|---|
committer | Andinus <andinus@nand.sh> | 2022-02-04 13:11:42 +0530 |
commit | ba8aea585c95477e7002666cc0ee461504734003 (patch) | |
tree | c06b19121571c22bbc70aa1b0269d8f9cdc4c583 /client/src/views/GetSmile.vue | |
parent | 3f8a1326dffb01512a1b19a141360180bf6b7fd8 (diff) | |
download | vela-ba8aea585c95477e7002666cc0ee461504734003.tar.gz |
Implement getting smiles
Diffstat (limited to 'client/src/views/GetSmile.vue')
-rw-r--r-- | client/src/views/GetSmile.vue | 75 |
1 files changed, 74 insertions, 1 deletions
diff --git a/client/src/views/GetSmile.vue b/client/src/views/GetSmile.vue index 1553a65..8d565ec 100644 --- a/client/src/views/GetSmile.vue +++ b/client/src/views/GetSmile.vue @@ -1,9 +1,82 @@ <template> <div class="get-smile"> <p id="subtitle">Get a Smile :)</p> + <ProgressBar v-if="showLoading" mode="indeterminate" style="height: .4em;" /> - {{ $route.params.id }} + <div v-if="!gotSmile && !showLoading" style="text-align: center;"> + <Button @click="getSmile" label="Try Again" + class="p-button-outlined p-button-info p-button-lg" icon="pi pi-refresh" /> + </div> + <div v-if="gotSmile" style="text-align: center;"> + <Button @click="again" label="Again!" icon="pi pi-refresh" /> + </div> + <div v-if="gotSmile" id="smile"> + </div> <Toast /> </div> </template> + +<script> +export default { + data() { + return { + name: '', + showLoading: true, + gotSmile: false, + id: this.$route.params.id, + } + }, + methods: { + beforeSend(xhr) { + xhr.formData.append('id', this.id); + + }, + again() { + document.getElementById('smile').innerHTML = ''; + this.getSmile(); + }, + getSmile() { + const toast = this.$toast; + + this.showLoading = true; + fetch( + `http://localhost:9090/smile/${this.id}`, + { cache: 'no-cache', referrerPolicy: 'no-referrer', responseType: 'blob' } + ).then(response => { + if (response.status === 404) + throw new Error(response.status + ' # ' + 'Smiles deleted or invalid link'); + if (response.status === 406) + throw new Error(response.status + ' # ' + 'No smiles available'); + if (!response.ok) + throw new Error('HTTP error, status = ' + response.status); + return response; + }).then(res => { + (async () => { + const blob = await res.blob(); + const img = new Image(); + img.src = URL.createObjectURL(blob); + await img.decode(); + document.getElementById('smile').append(img); + URL.revokeObjectURL(img.src); + })(); + + this.gotSmile = true; + }).catch(error => { + console.log(error) + toast.add({severity: 'error', summary: 'Service error', detail: error}); + }).finally(() => { + this.showLoading = false; + // <<<< -- fat arrows mess with polymode formatting. + }); + }, + }, + beforeMount() { + this.getSmile(); + }, +} +</script> + +<style> +img { max-width: 100%; padding: 1em; } +</style> |