food lookup now working

package.json

@@ -11,6 +11,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.2",
     "vue-resource": "^1.3.5",
     "vue-router": "^3.0.1"

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'App'
 }

src/components/Food.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import axios from 'axios';
 export default {
 	name: 'Food',
 	data () {
@@ -25,23 +26,17 @@ export default {
 	methods:{
 
 	  	getFoodInfo: function() {
-			this.$http.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/038000311307').then((response) =>  {
-			        	if(response.ok) {
-			        		return response.body
-			        	}
-			        }).then(function(results) {
-			        	if(results.id === null) {
-			        		this.$router.replace({name: '404'})
-			        	} else {
-			        		this.header = results.data.name
-			        		this.rank = results.data.rank.name
-			        		this.category = results.data.category.name
-			        	}
-			        })
+			axios.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/038000311307').then((response)  =>  {
+		        this.loading = false;
+		         this.header = response.data.data.name;
+		      }, (error)  =>  {
+		        this.loading = false;
+		      })
+		    }
 		}
     }
 	
-}
+
 </script> 
 
 <style scoped>

src/components/Search.vue

@@ -2,34 +2,97 @@
 	<div class="searchform">
 		<h1>{{header}}</h1>
 		<fieldset>
-			<p><label for="upc">UPC</label> <input type="text" id="upc"></p>
-			<select name="category">
-
-				<option>Fruit</option>
-				<option>Vegetables</option>
-				<option>Grains</option>
-				<option>Protein: Plant-Based</option>
-				<option>Protein: Animal</option>
-				<option>Combination Foods/Meals</option>
-				<option>Dairy - Milk</option>
-				<option>Dairy - Yogurt</option>
-				<option>Dairy - Cheese</option>
-				<option>Condiments</option>
-				<option>Beverages</option>
-				<option>Snacks/Desserts</option>
-			</select>
+			<p><label for="upc">UPC</label> <input type="text" name="upc" id="upc" v-model="searchTerm"></p>
+			<div class="notFound" v-if="notFound">
+				<p>Hmm...that food wasn't in SWAP Global. Want to look it up?</p>
+				<select v-model="rulesCat" name="category">
+					<option value="1">Fruit</option>
+					<option value="2">Vegetables</option>
+					<option value="3">Grains</option>
+					<option value="4">Protein: Plant-Based</option>
+					<option value="5">Protein: Animal</option>
+					<option value="6">Combination Foods/Meals</option>
+					<option value="7">Dairy - Milk</option>
+					<option value="8">Dairy - Yogurt</option>
+					<option value="9">Dairy - Cheese</option>
+					<option value="10">Condiments</option>
+					<option value="11">Beverages</option>
+					<option value="12">Snacks/Desserts</option>
+				</select>
+			</div>
+
+
+
+
+
+			<button  v-on:click="getData">Search</button>
 		</fieldset>
+
+		<div class="search-results" v-if="food.id">
+					<h3> Search Results </h3>
+
+					<div class="food-result">
+
+						<h4 v-if="food.id">{{food.name}}</h4>
+						<p v-if="food.id">{{food.category.name}}</p>
+						<p v-if="food.id">{{food.rank.name}}</p>
+
+					</div>
+		</div>
+
+
+
+
 	</div>
 </template>
 
+
+
+
 <script>
+import axios from 'axios';
 export default {
 	name: 'SearchForm',
 	data () {
 		return {
-			header:"Search for a Food by UPC"
+			header:"Search for a Score by UPC",
+			food:{},
+			upc:"",
+			searchTerm:"",
+			rulesCat: "",
+			notFound:false,
+			requestMess: ""
+		}
+	} ,
+	methods: {
+			getData: function(event) {
+				// if we're not looking up a new food
+				if (!this.notFound) {
+					axios.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/' + this.searchTerm).then((response)  =>  {
+				         this.loading = false;
+				         this.food = response.data.data;
+				         if (!this.food.id) {
+				         	this.notFound = true;
+				         }
+				      }, (error)  =>  {
+				        this.loading = false;
+				      })
+					} else { // if we're looking up a new food (not found in swap db)
+						axios.get('http://foodbank.develop.digitalmediauconn.org/api/getDecision/' + this.searchTerm + "/" + this.rulesCat).then((response)  =>  {
+					         this.loading = false;
+					         this.food = response.data.data[0].food;
+					         this.food.id = this.food.name;
+					         console.log(this.food);
+					         // if (!this.food.id) {
+					         // 	this.notFound = true;
+					         // }
+					      }, (error)  =>  {
+					        this.loading = false;
+					      })
+						}
+				} 
+
 		}
-	}
 }
 </script> 
 

src/http-common.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export const HTTP = axios.create({
+  baseURL: `http://foodbank.develop.digitalmediauconn.org/api/`
+})

src/main.js

@@ -1,8 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import vueResource from 'vue-resource'
-Vue.use(vueResource);
+
 
 
 import App from './App'