From 67c265f5ae8ed0df55ec550d246696b891d4dbd1 Mon Sep 17 00:00:00 2001
From: Gabe Rogan <rogangabe@gmail.com>
Date: Thu, 1 Dec 2016 17:19:07 -0500
Subject: [PATCH] Food/cat JSON working. filters half done

---
 app/pages/food/ctrl.js                | 40 +++++++++++++++---
 app/pages/food/style.styl             |  8 ++--
 app/pages/food/view.html              | 61 +++++----------------------
 assets/css/main.css                   |  5 ---
 assets/js/bundle.js                   | 58 ++++++++++++++++++-------
 assets/json/categories.json           | 18 ++++++++
 assets/json/{data.json => foods.json} |  0
 7 files changed, 109 insertions(+), 81 deletions(-)
 create mode 100644 assets/json/categories.json
 rename assets/json/{data.json => foods.json} (100%)

diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
index 7aa5094..561545d 100644
--- a/app/pages/food/ctrl.js
+++ b/app/pages/food/ctrl.js
@@ -1,29 +1,57 @@
 app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
-  $http.get("assets/json/data.json")
-  .then(function(response) {
-    $scope.foods = response.data.data;
-  });
-
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
 
+  // Initialize Filters
+  $scope.foods = [];
+  $scope.categories = [];
+  $scope.categorySelection = { "all": true };
+  $scope.searchTerm = "";
+
+  // Initialize CRUD modes
   $scope.editMode = false;
   $scope.createMode = false;
 
-  $scope.foodCRUD = {}
+  // Initialize CRUD form
+  $scope.foodCRUD = {};
+
+  // GET foods
+  $http.get("assets/json/foods.json")
+  .then(function(response) {
+    $scope.foods = response.data.data;
+  });
+
+  // GET list of categories
+  $http.get("assets/json/categories.json")
+  .then(function(response) {
+    $scope.categories = response.data.data;
+
+    // Preset category filters
+    $scope.categories.forEach(function(c){
+      $scope.categorySelection[c.id] = false;
+    });
+  });
+
+  // Category filter function
+  $scope.categoryFilter = function (food) {
+    return ( $scope.categorySelection[food.category_id] | $scope.categorySelection["all"] );
+  }
 
+  // CRUD: edit food
   $scope.edit = function (foodToEdit) {
     $scope.editMode = true;
     $scope.foodCRUD = foodToEdit;
     $scope.foodCRUD.rank_mode = "0"; //TODO: remove this when API implements it
   };
 
+  // CRUD: create food
   $scope.create = function () {
     $scope.createMode = true;
     $scope.foodCRUD = {}
     $scope.foodCRUD.rank_mode = "0";
   };
 
+  // CRUD: cancel
   $scope.cancel = function () {
     $scope.editMode = false;
     $scope.createMode = false;
diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
index d4664d6..1ca7e7f 100644
--- a/app/pages/food/style.styl
+++ b/app/pages/food/style.styl
@@ -4,10 +4,10 @@
     cursor: pointer
     top: 6px
     right: 0
-    &:hover
-      color: #888
-      transform: scale(.9)
-      transition: all .2s
+    // &:hover
+    //   color: #888
+    //   transform: scale(.9)
+    //   transition: all .2s
   .input-field label.active
     transform: translateY(-120%)
   .input-field.col label
diff --git a/app/pages/food/view.html b/app/pages/food/view.html
index aac25c4..00e0d92 100644
--- a/app/pages/food/view.html
+++ b/app/pages/food/view.html
@@ -2,8 +2,8 @@
 <div class="container food-search">
 
   <div class="input-field col s6">
-    <input type="text" id="autocomplete-input" class="autocomplete">
-    <label for="autocomplete-input">Search for food by name!</label>
+    <input type="text" id="a" ng-model="searchTerm">
+    <label for="a">Search for food by name!</label>
     <i class="material-icons prefix">search</i>
   </div>
 
@@ -20,10 +20,10 @@ <h5>By Category</h5>
     <nav>
       <div class="nav-wrapper">
         <ul class="left">
-          <li><a>All</a></li>
-          <li><a>Fruit</a></li>
-          <li><a>Veggie</a></li>
-          <li class="active"><a>Fattie</a></li>
+          <li ng-class="{'active': categorySelection['all']}" ng-click="categorySelection['all'] = !categorySelection['all']"><a>All</a></li>
+          <li ng-repeat="c in categories" ng-class="{'active': categorySelection[c.id]}" ng-click="categorySelection[c.id] = !categorySelection[c.id]">
+            <a>{{c.name}}</a>
+          </li>
         </ul>
       </div>
     </nav>
@@ -71,8 +71,9 @@ <h5>By Grade</h5>
     <div class="health"><i class="material-icons">add</i></div>
     <h5>Add new food</h5>
   </div>
-
-  <div class="card-panel" ng-repeat="food in foods" ng-click="edit(food)">
+  <!-- { category_id: '!-1'} -->
+  <!-- item in items | filter : categoryFilter | orderBy : 'name' -->
+  <div class="card-panel" ng-repeat="food in foods | filter : categoryFilter | filter : searchTerm | orderBy : 'name'" ng-click="edit(food)">
     <div class="health rank-{{food.rank_id}}"><i class="material-icons">favorite</i></div>
     <h5>{{food.name}}</h5>
   </div>
@@ -117,7 +118,7 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
       <label for="d">Red</label>
     </div>
 
-    <!-- TODO: HIDE this until it's implemented. THEN ng-bind the nutrition facts-->
+    <!-- TODO: HIDE this until it's implemented into API. THEN ng-bind the nutrition facts-->
     <!-- <span ng-show="editMode"> -->
     <span ng-show="false">
       <p>Nutrition Facts (WIP)</p>
@@ -148,45 +149,3 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
 </div>
 </div>
 <!-- End of Modal -->
-
-
-<script>
-$('input.autocomplete').autocomplete({
-  data: {
-    "Apple": null,
-    "Orange": null,
-    "Some Category": 'http://placehold.it/250x250'
-  }
-});
-
-// $('.foodModal select').material_select();
-
-// $(function(){
-//
-//   var modal = $('.modal_');
-//
-//   // Open the modal
-//   $(".foods .card-panel.add").on('click', function() {
-//     // modal.css('display', 'flex');
-//     // modal.removeClass('editMode');
-//     $('.food-crud h4').html('Add New Food');
-//   });
-//   $(".foods .card-panel.edit").on('click', function() {
-//     // modal.css('display', 'flex');
-//     // modal.addClass('editMode');
-//     $('.food-crud h4').html('Bananas');
-//   });
-//
-//   // Close the modal
-//   $('.food-crud .btn').on('click', function() {
-//     modal.css('display', 'none');
-//   });
-//
-//   // When the user clicks anywhere outside of the modal, close it
-//   $(window).on('click', function(e) {
-//     if ($(e.target).is('.modal_'))
-//       modal.css('display', 'none');
-//   });
-// });
-
-</script>
diff --git a/assets/css/main.css b/assets/css/main.css
index 57b92aa..f352e93 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -44,11 +44,6 @@ ul.tabs .tab a:hover {
   top: 6px;
   right: 0;
 }
-.food-search i:hover {
-  color: #888;
-  transform: scale(0.9);
-  transition: all 0.2s;
-}
 .food-search .input-field label.active {
   transform: translateY(-120%);
 }
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
index cca9a93..544db03 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.js
@@ -108,32 +108,69 @@ app.controller('404Ctrl', ['$scope', function ($scope) {
 }]);
 
 
-app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
-  $http.get("assets/json/data.json")
-  .then(function(response) {
-    $scope.foods = response.data.data;
-  });
+app.controller('CategoryCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Categories';
+  $scope.page.id = 'cat';
+  $scope.page.yourVar = "globalStuff";
+  
+  $scope.var2 = "localStuff";
+}]);
 
+
+app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
 
+  // Initialize Filters
+  $scope.foods = [];
+  $scope.categories = [];
+  $scope.categorySelection = { "all": true };
+  $scope.searchTerm = "";
+
+  // Initialize CRUD modes
   $scope.editMode = false;
   $scope.createMode = false;
 
-  $scope.foodCRUD = {}
+  // Initialize CRUD form
+  $scope.foodCRUD = {};
 
+  // GET foods
+  $http.get("assets/json/foods.json")
+  .then(function(response) {
+    $scope.foods = response.data.data;
+  });
+
+  // GET list of categories
+  $http.get("assets/json/categories.json")
+  .then(function(response) {
+    $scope.categories = response.data.data;
+
+    // Preset category filters
+    $scope.categories.forEach(function(c){
+      $scope.categorySelection[c.id] = false;
+    });
+  });
+
+  // Category filter function
+  $scope.categoryFilter = function (food) {
+    return ( $scope.categorySelection[food.category_id] | $scope.categorySelection["all"] );
+  }
+
+  // CRUD: edit food
   $scope.edit = function (foodToEdit) {
     $scope.editMode = true;
     $scope.foodCRUD = foodToEdit;
     $scope.foodCRUD.rank_mode = "0"; //TODO: remove this when API implements it
   };
 
+  // CRUD: create food
   $scope.create = function () {
     $scope.createMode = true;
     $scope.foodCRUD = {}
     $scope.foodCRUD.rank_mode = "0";
   };
 
+  // CRUD: cancel
   $scope.cancel = function () {
     $scope.editMode = false;
     $scope.createMode = false;
@@ -141,15 +178,6 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
 }]);
 
 
-app.controller('CategoryCtrl', ['$scope', function ($scope) {
-  $scope.page.title = 'Categories';
-  $scope.page.id = 'cat';
-  $scope.page.yourVar = "globalStuff";
-  
-  $scope.var2 = "localStuff";
-}]);
-
-
 app.controller('LoginCtrl', ['$scope', function ($scope) {
   $scope.page.title = 'Login';
   $scope.page.id = 'login';
diff --git a/assets/json/categories.json b/assets/json/categories.json
new file mode 100644
index 0000000..698bad0
--- /dev/null
+++ b/assets/json/categories.json
@@ -0,0 +1,18 @@
+{
+	"status": "ok",
+	"code": "200",
+	"data": [
+		{
+			"id": "1",
+			"name": "Fruit"
+		},
+		{
+			"id": "2",
+			"name": "Veggie"
+		},
+		{
+			"id": "3",
+			"name": "Fattie"
+		}
+	]
+}
diff --git a/assets/json/data.json b/assets/json/foods.json
similarity index 100%
rename from assets/json/data.json
rename to assets/json/foods.json