bitprj · ganning127 · Nov 23, 2021 · Nov 25, 2021 · Nov 25, 2021 · Nov 25, 2021
diff --git a/client/.prettierrc.js b/client/.prettierrc.js
@@ -10,5 +10,5 @@ module.exports = {
     proseWrap: 'always',
     htmlWhitespaceSensitivity: 'strict',
     endOfLine: 'lf',
-    arrowParens: 'avoid'
+    arrowParens: 'avoid',
 };
diff --git a/client/package.json b/client/package.json
@@ -16,8 +16,12 @@
     },
     "dependencies": {
         "axios": "^0.21.1",
+        "bootstrap": "^5.1.3",
+        "bootstrap-vue": "^2.21.2",
         "core-js": "^3.6.5",
-        "vue": "^2.6.12",
+        "vue": "^2.6.14",
+        "node-fetch": "^2.6.2",
+        "node-http": "0.0.5",
         "vuelidate": "^0.7.6",
         "vuetify": "^2.4.0",
         "vuex": "^3.6.0"
@@ -49,7 +53,9 @@
         "parserOptions": {
             "parser": "babel-eslint"
         },
-        "rules": {}
+        "rules": {
+            "vue/no-unused-components": "off"
+        }
     },
     "browserslist": [
         "> 1%",
@@ -58,4 +64,4 @@
     ],
     "_id": "redis-shopping-cart-client@1.0.0",
     "license": "MIT"
-}
+}
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,29 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <link rel="icon" href="<%= BASE_URL %>favicon-32x32.png" />
-        <title>Redis Shopping Cart</title>
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
-        />
-        <link
-            rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
-        />
-    </head>
-    <body>
-        <noscript>
-            <strong
-                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon-32x32.png" />
+    <title>Redis Shopping Cart</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
+</head>
+
+<body>
+    <noscript>
+        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't
                 work properly without JavaScript enabled. Please enable it to
-                continue.</strong
-            >
-        </noscript>
-        <div id="app"></div>
-        <!-- built files will be auto injected -->
-    </body>
-</html>
+                continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -5,7 +5,9 @@
                 <div class="pa-4 rounded-lg red darken-1">
                     <v-icon color="white" size="45">mdi-cart-plus</v-icon>
                 </div>
-                <h1 class="ml-6 font-weight-regular">TinyHat.me Online Store</h1>
+                <h1 class="ml-6 font-weight-regular"
+                    >TinyHat.me Online Store</h1
+                >
             </div>
         </v-container>
 
@@ -18,6 +20,7 @@
                 <v-col cols="12" sm="5" md="4" class="d-flex flex-column">
                     <cart />
                     <reset-data-btn class="mt-6" />
+                    <CustomHat :products="products" />
                 </v-col>
             </v-row>
 
@@ -34,13 +37,15 @@ import Cart from '@/components/Cart';
 import ProductList from '@/components/ProductList';
 import ResetDataBtn from '@/components/ResetDataBtn.vue';
 import Info from '@/components/Info';
+import CustomHat from '@/components/CustomHat.vue';
 
 export default {
     name: 'App',
 
     components: {
         ProductList,
         Cart,
+        CustomHat,
         ResetDataBtn,
         Info
     },

diff --git a/client/src/components/CustomHat.vue b/client/src/components/CustomHat.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="file-cont">
+        <h3>Want to try the hat on? Upload a picture!</h3>
+        <input type="file" class="file-upload" @change="updatePictures" />
+
+        <br />
+        <b-spinner
+            variant="success"
+            type="grow"
+            class="hidden mt-4"
+            id="spinner"
+        ></b-spinner>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        products: {
+            type: Array,
+            required: false,
+            defaultValue: () => []
+        },
+        pictures: {
+            type: Array,
+            required: false,
+            defaultValue: () => []
+        }
+    },
+
+    methods: {
+        async updatePictures(event) {
+            document.getElementById('spinner').classList.remove('hidden');
+            let temp_products = this.products;
+            console.log('updating');
+            const file = event.target.files[0];
+            for (let i = 0; i < this.products.length; i++) {
+                const formData = new FormData();
+                formData.append('file', file);
+                const response = await fetch(
+                    `https://api.tinyhat.me/${this.products[i].description}`,
+                    {
+                        method: 'POST',
+                        body: formData
+                    }
+                );
+                const json = await response.json();
+                console.log(json);
+                temp_products[i].url = json.result.finalBaby;
+            }
+            document.getElementById('spinner').classList.add('hidden');
+        }
+    }
+};
+</script>
diff --git a/client/src/components/Product.vue b/client/src/components/Product.vue
@@ -2,10 +2,7 @@
     <v-col cols="6" sm="6" md="6" lg="4">
         <v-card class="h-full" :disabled="product.stock === 0">
             <div class="d-flex justify-center">
-                <v-img
-                        max-width="65%"
-                        :src="product.url"
-                />
+                <v-img max-width="65%" :src="product.url" />
             </div>
 
             <v-card-title class="pa-3 text-subtitle-1 text-xl-h6">

diff --git a/client/src/components/ProductList.vue b/client/src/components/ProductList.vue
@@ -1,15 +1,15 @@
 <template>
-        <v-row v-if="products.length" align="stretch">
-            <product
-                v-for="product in products"
-                :key="product.id"
-                :product="product"
-                @add="addToCart"
-            />
-        </v-row>
-        <v-row v-else>
-            <p> No products in store </p>
-        </v-row>
+    <v-row v-if="products.length" align="stretch">
+        <product
+            v-for="product in products"
+            :key="product.id"
+            :product="product"
+            @add="addToCart"
+        />
+    </v-row>
+    <v-row v-else>
+        <p> No products in store </p>
+    </v-row>
 </template>
 
 <script>

diff --git a/client/src/components/ResetDataBtn.vue b/client/src/components/ResetDataBtn.vue
@@ -7,17 +7,14 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-
 export default {
     computed: {
         ...mapGetters({ cartItems: 'cart/getItems' })
     },
-
     methods: {
         ...mapActions({
             reset: 'products/reset'
         }),
-
         async resetData() {
             try {
                 await this.reset();
@@ -27,4 +24,3 @@ export default {
         }
     }
 };
-</script>
diff --git a/client/src/main.js b/client/src/main.js
@@ -3,6 +3,16 @@ import store from './store';
 import vuetify from './plugins/vuetify';
 import App from './App.vue';
 import './styles/styles.scss';
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
+// Import Bootstrap an BootstrapVue CSS files (order is important)
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+// Make BootstrapVue available throughout your project
+Vue.use(BootstrapVue)
+// Optionally install the BootstrapVue icon components plugin
+Vue.use(IconsPlugin)
 
 Vue.config.productionTip = false;
 

diff --git a/client/src/styles/styles.scss b/client/src/styles/styles.scss
@@ -41,3 +41,15 @@ input {
     box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
         0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
 }
+
+.file-upload {
+    margin-top: 1rem !important;
+}
+
+.file-cont {
+    margin-top: 1rem !important;
+}
+
+.hidden {
+    display: none !important;
+}
diff --git a/dump.rdb b/dump.rdb
diff --git a/server/.env.example b/server/.env.example
@@ -10,6 +10,6 @@ REDIS_HOST=127.0.0.1
 REDIS_PORT=6379
 
 # You can set password here
-REDIS_PASSWORD=
+REDIS_PASSWORD=11954
 
 COMPOSE_PROJECT_NAME=redis-shopping-cart
diff --git a/server/dump.rdb b/server/dump.rdb
diff --git a/server/src/controllers/Product/IndexController.js b/server/src/controllers/Product/IndexController.js
@@ -22,11 +22,11 @@ class ProductIndexController {
         let products = await result.json()
 
         for (const product of products) {
-            const { url } = product;
+            var { url } = product;
             url = url.replace("https://tinyhats.s3.amazonaws.com/", "")
             url = url.replace(".png", "")
             await this.redisClientService.jsonSet(`product:${url}`, '.', JSON.stringify(product));
-            
+
             productList.push(product);
         }
 

diff --git a/server/src/controllers/Product/ResetController.js b/server/src/controllers/Product/ResetController.js
@@ -19,7 +19,6 @@ class ProductResetController {
             var { url } = product;
             url = url.replace("https://tinyhats.s3.amazonaws.com/", "")
             url = url.replace(".png", "")
-            console.log(url)
             await this.redisClientService.jsonSet(`product:${url}`, '.', JSON.stringify(product));
         }