Add GetSmile, UploadSmile view

6 files changed, 74 insertions, 23 deletions

diff --git a/client/src/App.vue b/client/src/App.vue
index 5d44890..e137e15 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -52,4 +52,9 @@ p {
     border-radius: 4px;
     margin-bottom: 2rem;
 }
+#subtitle {
+    font-size: 1.5rem;
+    text-align: center;
+    margin: 2rem 0;
+}
 </style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index f0d3113..123941b 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -1,5 +1,9 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
+import { createRouter, createWebHistory } from 'vue-router';
+
+import Home from '../views/Home.vue';
+import NewSmile from '../views/NewSmile.vue';
+import GetSmile from '../views/GetSmile.vue';
+import UploadSmile from '../views/UploadSmile.vue';
 
 const routes = [
     {
@@ -13,13 +17,24 @@ const routes = [
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "about" */ '../views/NewSmile.vue')
+        // component: () => import(/* webpackChunkName: "about" */ '../views/NewSmile.vue')
+        component: NewSmile
+    },
+    {
+        path: '/:id',
+        name: 'Get Smile',
+        component: GetSmile
+    },
+    {
+        path: '/:id/:auth',
+        name: 'Upload Smile',
+        component: UploadSmile
     }
-]
+];
 
 const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
-})
+});
 
-export default router
+export default router;
diff --git a/client/src/views/GetSmile.vue b/client/src/views/GetSmile.vue
new file mode 100644
index 0000000..1553a65
--- /dev/null
+++ b/client/src/views/GetSmile.vue
@@ -0,0 +1,9 @@
+<template>
+<div class="get-smile">
+  <p id="subtitle">Get a Smile :)</p>
+
+  {{ $route.params.id }}
+
+  <Toast />
+</div>
+</template>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index c16d336..880c380 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -27,11 +27,3 @@
   </div>
 </div>
 </template>
-
-<style scoped>
-#subtitle {
-    font-size: 1.5rem;
-    text-align: center;
-    margin: 2rem 0;
-}
-</style>
diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue
index aaa3e44..f721d50 100644
--- a/client/src/views/NewSmile.vue
+++ b/client/src/views/NewSmile.vue
@@ -44,15 +44,38 @@ export default {
             }
             this.showProgress = true;
             console.log('Name', this.name);
+
+            // const options = {
+            //     method: 'POST',
+            //     body: JSON.stringify( {
+            //         param1: "d",
+            //         param2: "d"
+            //     } )
+            // };
+
+            fetch('flowers.jpg')
+                .then(function(response) {
+                    if (!response.ok) {
+                        throw new Error('HTTP error, status = ' + response.status);
+                    }
+                    console.log(response);
+                    return response.blob();
+
+                })
+                .then(function(myBlob) {
+                    console.log(myBlob)
+                })
+                .catch(function(error) {
+                    console.log(error)
+                });
+
+            // fetch( '/path/', options )
+            //     .then( response => response.json() )
+            //     .then( response => {
+            //         console.log(response);
+            //         // Do something with response.
+            //     } );
         }
     }
-}
+    }
 </script>
-
-<style scoped>
-#subtitle {
-    font-size: 1.5rem;
-    text-align: center;
-    margin: 2rem 0;
-}
-</style>
diff --git a/client/src/views/UploadSmile.vue b/client/src/views/UploadSmile.vue
new file mode 100644
index 0000000..67e1dd9
--- /dev/null
+++ b/client/src/views/UploadSmile.vue
@@ -0,0 +1,7 @@
+<template>
+<div class="upload-smile">
+  <p id="subtitle">Upload a Smile :)</p>
+
+  <Toast />
+</div>
+</template>