Implement getting smiles

5 files changed, 114 insertions, 9 deletions

diff --git a/client/src/App.vue b/client/src/App.vue
index e137e15..92e6133 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -41,9 +41,20 @@ p {
     line-height:1.5;
     margin:0 0 1rem 0;
 }
-.content-wrapper {
-    padding: 0.8rem;
+.content-wrapper { padding: 1rem; }
+@media screen and (min-width: 35.5em) {
+    .content-wrapper { padding: 2rem; }
 }
+@media screen and (min-width: 48em) {
+    .content-wrapper { padding: 3rem; }
+}
+@media screen and (min-width: 64em) {
+    .content-wrapper { padding: 4rem; }
+}
+@media screen and (min-width: 80em) {
+    .content-wrapper { padding: 6rem; }
+}
+
 .card {
     background: var(--surface-e);
     padding: 2rem;
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index 2eedc83..04eaf5f 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -22,11 +22,6 @@ export default {
                     label: 'Create Smiles',
                     icon: 'pi pi-fw pi-user-plus',
                     to: '/create'
-                },
-                {
-                    label: 'huh',
-                    icon: 'pi pi-fw pi-user-plus',
-                    to: '/5a1PNZAMafXGGEFU17xcRX3bx6wyebeK/lNtEBCOd5yLlXT5enRQoh4ai4q3vcg7F'
                 }
             ]
         }
diff --git a/client/src/main.js b/client/src/main.js
index 03f0e65..5e2c6fc 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -13,6 +13,7 @@ import Toast from 'primevue/toast';
 import ProgressBar from 'primevue/progressbar';
 import Message from 'primevue/message';
 import FileUpload from 'primevue/fileupload';
+import Image from 'primevue/image';
 
 import 'primevue/resources/themes/lara-dark-blue/theme.css';
 import 'primevue/resources/primevue.min.css';
@@ -33,5 +34,6 @@ app.component('Toast', Toast);
 app.component('Message', Message);
 app.component('ProgressBar', ProgressBar);
 app.component('FileUpload', FileUpload);
+app.component('Image', Image);
 
 app.mount('#app');
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>
diff --git a/server/service.raku b/server/service.raku
index 638989c..1ccbb85 100644
--- a/server/service.raku
+++ b/server/service.raku
@@ -67,7 +67,7 @@ my $application = route {
                 my Str @messages;
                 @messages.push("Max file size exceeded")
                     if $img.body-blob.bytes > 2097152; # 1024 * 1024 * 2
-                @messages.push("Only png/jpeg allowed");
+                @messages.push("Only png/jpeg allowed")
                     if $img.content-type ne "image/png"|"image/jpeg";
 
                 $stored = False if @messages.elems;
@@ -86,6 +86,30 @@ my $application = route {
         }
     }
 
+    get -> 'smile', $id {
+        my IO() $user-store = "%s/%s".sprintf: $store, $id;
+
+        my $img;
+        if "$user-store/images".IO.d {
+            put "huh";
+            my @imgs = dir("$user-store/images").grep(*.f);
+            if @imgs.elems {
+                $img = @imgs.pick(1).first;
+            } else {
+                response.status = 406;
+            }
+        } else {
+            response.status = 404;
+        }
+
+        if $img {
+            static $img;
+            $img.unlink;
+        } else {
+            content 'text/plain', '';
+        }
+    }
+
     # Serving static assets.
     get -> 'js', *@path { static 'dist/js', @path; }
     get -> 'css', *@path { static 'dist/css', @path; }