Merge branch 'rb-ingredients-from-image'

# Conflicts:
#	backend/controller/imageRecognition.controller.js

backend/controller/imageRecognition.controller.js

@@ -1,7 +1,7 @@
 var request = require('request');
 const fs = require("fs")
 
-const token = "49fe2bc9d85a0bea644c7ed0a7f83f7316dfa246"
+const token = "6122abe151eedca9654ddbf1189f42e2b8e710fd"
 
 /**
  * @function extractIngredients
@@ -22,6 +22,8 @@ const token = "49fe2bc9d85a0bea644c7ed0a7f83f7316dfa246"
  */
 
 const extractIngredients = async (req, res) => {
+
+
     try {
         var options = {
             'method': 'POST',

backend/controller/recipieCreator.controller.js

@@ -13,14 +13,16 @@ var exec =  promisify(require('child_process').exec)
  */
  const CreateRecipie = async (req, res) => {
     try {
-        const ingredients = req.body.foodItems ? req.body.foodItems.join(" ") : "tomatoes pasta meat"
+        const ingredients = req.body.join(" ");
         exec("../backend/Archive/CreateSearchIndex " + `${ingredients}`, function(error, stdout, stderr) { 
             if (error || stderr) {
+                console.log(error + stderr)
                 return res.status(500).send({error: "server glitch" + error + stderr})
             }
             return res.status(200).send(JSON.parse(stdout)) 
         });
     } catch (err) {
+        console.log(err);
         return res.status(500).send({error: "server glitch"})
     }
  }

backend/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "node server.js"
+    "serve-backend": "node server.js"
   },
   "repository": {
     "type": "git",

frontend/team14_bell_frontend/src/components/HelloWorld.vue

@@ -1,34 +1,86 @@
 <template>
   <v-container>
     <v-row class="mt-2" align="center" justify="center">
-        <v-img src="../assets/bell.jpeg" max-width="100" max-height="auto">
-        </v-img>
-        <span>Bellicious!</span>
-      </v-row>
+      <v-img src="../assets/bell.jpeg" max-width="100" max-height="auto">
+      </v-img>
+      <span>Bellicious!</span>
+    </v-row>
     <v-row class="text-center">
       <v-col cols="12">
         <v-file-input
-          truncate-length="15"
-          accept="image/png, image/jpeg, image/bmp"
-          prepend-icon="mdi-camera"
-          label="Upload Image"
+            truncate-length="15"
+            accept="image/png, image/jpeg, image/bmp"
+            prepend-icon="mdi-camera"
+            @change="onFileChange"
+            label="Upload Image"
         ></v-file-input>
+      </v-col>
+    </v-row>
+    <h2>Recognized Ingredients</h2>
+    <p v-if="loading">Getting ingredients from image...</p>
+    <li v-for="item in ingredients" :key="item">{{ item }}</li>
+    <v-row class="text-center">
+      <v-col cols="12">
         <v-btn
-      depressed
-      color="primary"
-      href="/recipe"
-    >
-      Send
-    </v-btn>
+            depressed
+            color="primary"
+            @click="goToRecipes()"
+        >
+          Get Recipes
+        </v-btn>
       </v-col>
     </v-row>
+
   </v-container>
 </template>
 
 <script>
 export default {
   name: "HelloWorld",
 
-  data: () => ({}),
+  data: () => ({
+    ingredients: [],
+    loading: false,
+  }),
+
+  methods: {
+    onFileChange: function (e) {
+      var self = this;
+      self.loading = true;
+
+      var formdata = new FormData();
+      formdata.append("fridge_image", e, "image.jpeg");
+
+      var requestOptions = {
+        method: 'POST',
+        body: formdata,
+        redirect: 'follow'
+      };
+
+      // const base_url = "http://ec2-18-156-118-115.eu-central-1.compute.amazonaws.com";
+      const base_url = "http://localhost:3000";
+      const endpiont = base_url + "/recognize-image/"
+
+      fetch(endpiont, requestOptions)
+          .then(response => response.text())
+          .then(result => {
+            const obj = JSON.parse(result);
+            const uniquefoodItems = [...new Set(obj.foodItems)];
+
+            self.loading = false;
+            self.ingredients = uniquefoodItems;
+          })
+          .catch(error => console.log('error', error));
+    },
+    goToRecipes: function () {
+      var self = this;
+
+      let data = {
+        ingredients: self.ingredients,
+      };
+      this.$router.push( {name: "recipe", params: { data }});
+    }
+  }
+
 };
 </script>

frontend/team14_bell_frontend/src/components/Recipe.vue

@@ -30,9 +30,9 @@
         </ol>
       </v-card-text>
 
-      <v-divider class="mx-4"></v-divider>
+      <v-divider v-if="recipe.Recommendations.length > 0" class="mx-4"></v-divider>
 
-      <v-card-title>Perfect fit:</v-card-title>
+      <v-card-title v-if="recipe.Recommendations.length > 0" >Perfect fit:</v-card-title>
 
       <v-card-text>
         <v-chip-group
@@ -60,9 +60,12 @@ export default {
   }),
   created() {
     const base_url = "http://ec2-18-156-118-115.eu-central-1.compute.amazonaws.com";
-    const body = JSON.stringify({});
+    // const base_url = "http://localhost:3000";
+
+    let data = this.$route.params.data;
+
     axios
-      .post(base_url + "/create-recipie/", body)
+      .post(base_url + "/create-recipie/", data.ingredients)
       .then((response) => this.recipes = response.data)
       .catch((error) => {
         this.errorMessage = error.message;