foodUI done. did i miss anything?

dmd-web-and-mobile · Dec 3, 2016 · ecfa6dc · ecfa6dc
1 parent 67c265f
commit ecfa6dc
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 78 deletions.
diff --git a/app/pages/food/anotherCtrl.js b/app/pages/food/anotherCtrl.js
diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
@@ -5,6 +5,11 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   // Initialize Filters
   $scope.foods = [];
   $scope.categories = [];
+  $scope.rankSelection = {
+    "green": true,
+    "yellow": true,
+    "red": true
+  };
   $scope.categorySelection = { "all": true };
   $scope.searchTerm = "";
 
@@ -27,33 +32,61 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
     $scope.categories = response.data.data;
 
     // Preset category filters
+    $scope.resetCategorySelection();
+  });
+
+  // Set category filters to false
+  $scope.resetCategorySelection = function () {
     $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"] );
   }
 
+  // Rank filter function
+  $scope.rankFilter = function (food) {
+    return ( $scope.rankSelection[food.rank_id] );
+  }
+
   // 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
+    $scope.foodCRUD.action = "update";
+    // console.log($scope.foodCRUD);
   };
 
   // CRUD: create food
   $scope.create = function () {
     $scope.createMode = true;
-    $scope.foodCRUD = {}
-    $scope.foodCRUD.rank_mode = "0";
+    $scope.foodCRUD = {};
+    $scope.foodCRUD.rank_mode = "auto";
+    $scope.foodCRUD.action = "create";
+    // console.log($scope.foodCRUD);
   };
 
   // CRUD: cancel
   $scope.cancel = function () {
     $scope.editMode = false;
     $scope.createMode = false;
   };
+
+  // CRUD: POST
+  $scope.submit = function () {
+    $scope.cancel(); // hide modal
+
+    $http.post('request-url', $scope.foodCRUD)
+    .success(function (data) {
+      // console.log(data);
+    })
+    .error(function (data) {
+      // console.log(data);
+    });
+  };
+
+
 }]);
diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
@@ -12,10 +12,13 @@
     transform: translateY(-120%)
   .input-field.col label
     left: 0
+
+.barcode
+  margin: 0
 
 .food-filter
   display: flex
-  flex-flow: row wrap
+  flex-flow: row no-wrap
   width: 100%
   padding: 0 1em
   .block
@@ -24,7 +27,6 @@
     &:last-child
       flex: 0 130px
       nav
-        box-shadow: none
         display: flex
         align-items: center
         justify-content: center
@@ -70,11 +72,11 @@
       align-items: center
       justify-content: center
       background-color: gray
-      &.rank-1
+      &.rank-green
         background-color: green
-      &.rank-2
+      &.rank-yellow
         background-color: yellow
-      &.rank-3
+      &.rank-red
         background-color: red
 
       i

diff --git 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="a" ng-model="searchTerm">
-    <label for="a">Search for food by name!</label>
+    <input type="text" id="search" ng-model="searchTerm">
+    <label for="search">Search for food by name!</label>
     <i class="material-icons prefix">search</i>
   </div>
 
@@ -20,41 +20,25 @@ <h5>By Category</h5>
     <nav>
       <div class="nav-wrapper">
         <ul class="left">
-          <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]">
+          <li ng-class="{'active': categorySelection['all']}" ng-click="resetCategorySelection(); categorySelection['all'] = true"><a>All</a></li>
+          <li ng-repeat="c in categories" ng-class="{'active': categorySelection[c.id]}" ng-click="categorySelection['all'] = false; categorySelection[c.id] = !categorySelection[c.id]">
             <a>{{c.name}}</a>
           </li>
         </ul>
       </div>
     </nav>
   </div>
 
-
-  <div class="block">
-    <h5>By Nutrient</h5>
-    <nav>
-      <div class="nav-wrapper">
-        <ul class="left">
-          <li><a>All</a></li>
-          <li><a>SatFat</a></li>
-          <li class="active"><a>Sugar</a></li>
-          <li class="active"><a>Carbs</a></li>
-          <li><a>Whatever</a></li>
-        </ul>
-      </div>
-    </nav>
-  </div>
-
   <div class="block">
     <h5>By Grade</h5>
     <nav>
-      <input type="checkbox" class="filled-in green" id="green" checked="checked" />
+      <input type="checkbox" class="filled-in green" id="green" ng-model="rankSelection.green">
       <label for="green"></label>
 
-      <input type="checkbox" class="filled-in yellow" id="yellow" checked="checked" />
+      <input type="checkbox" class="filled-in yellow" id="yellow" ng-model="rankSelection.yellow">
       <label for="yellow"></label>
 
-      <input type="checkbox" class="filled-in red" id="red" checked="checked" />
+      <input type="checkbox" class="filled-in red" id="red" ng-model="rankSelection.red">
       <label for="red"></label>
     </nav>
   </div>
@@ -73,7 +57,7 @@ <h5>Add new food</h5>
   </div>
   <!-- { 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="card-panel" ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | 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>
@@ -88,13 +72,17 @@ <h5>{{food.name}}</h5>
 <div class="CRUD">
 <h4>{{foodCRUD.name || "Add New Food"}}</h4>
 
-  <form action="#">
+  <form ng-submit="submit()">
 
     <div class="input-field">
-      <input type="text" placeholder="Name" ng-model="foodCRUD.name">
+      <input type="text" placeholder="Name" ng-model="foodCRUD.name" required>
+    </div>
+
+    <div class="input-field barcode" ng-show="createMode">
+      <input type="text" pattern="[0-9]+" placeholder="Barcode" ng-model="foodCRUD.barcode" required>
     </div>
 
-    <select ng-model="foodCRUD.category_id" class="no-materialize">
+    <select ng-model="foodCRUD.category_id" class="no-materialize" required>
       <option ng-show="createMode" value="" disabled selected>Select a Category</option>
       <option value="1">Fruit</option>
       <option value="2">Veggie</option>
@@ -103,18 +91,16 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
 
     <p>Grade</p>
     <div class="grade">
-      <!-- NOTE: foodCRUD.rank_mode NOT rank_id -->
-      <!-- 0: auto, 1: green, 2: yellow, 3: red -->
-      <input name="grade" type="radio" value="0" id="a" ng-model="foodCRUD.rank_mode">
+      <input name="grade" type="radio" value="auto" id="a" ng-model="foodCRUD.rank_mode">
       <label for="a">Auto</label>
 
-      <input name="grade" type="radio" value="1" id="b" ng-model="foodCRUD.rank_mode">
+      <input name="grade" type="radio" value="green" id="b" ng-model="foodCRUD.rank_mode">
       <label for="b">Green</label>
 
-      <input name="grade" type="radio" value="2" id="c" ng-model="foodCRUD.rank_mode">
+      <input name="grade" type="radio" value="yellow" id="c" ng-model="foodCRUD.rank_mode">
       <label for="c">Yellow</label>
 
-      <input name="grade" type="radio" value="3" id="d" ng-model="foodCRUD.rank_mode">
+      <input name="grade" type="radio" value="red" id="d" ng-model="foodCRUD.rank_mode">
       <label for="d">Red</label>
     </div>
 
@@ -140,9 +126,9 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
       </table>
     </span>
 
-    <a class="btn green" ng-show="createMode">Create</a>
-    <a class="btn blue" ng-show="editMode">Update</a>
-    <a class="btn orange" ng-click="cancel()">Cancel</a>
+    <button type="submit" class="btn green" ng-show="createMode">Create</button>
+    <button type="submit" class="btn blue" ng-show="editMode">Update</button>
+    <button type="button" class="btn orange" ng-click="cancel()">Cancel</button>
 
   </form>
 

diff --git a/app/sandbox/scrap.html b/app/sandbox/scrap.html
@@ -19,3 +19,18 @@
   <input name="grade" type="radio" value="3" id="d" ng-model="foodCRUD.rank_id">
   <label for="d">Red</label>
 </div>
+
+<div class="block">
+  <h5>By Nutrient (WIP)</h5>
+  <nav>
+    <div class="nav-wrapper">
+      <ul class="left">
+        <li><a>All</a></li>
+        <li><a>SatFat</a></li>
+        <li class="active"><a>Sugar</a></li>
+        <li class="active"><a>Carbs</a></li>
+        <li><a>Whatever</a></li>
+      </ul>
+    </div>
+  </nav>
+</div>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -50,9 +50,12 @@ ul.tabs .tab a:hover {
 .food-search .input-field.col label {
   left: 0;
 }
+.barcode {
+  margin: 0;
+}
 .food-filter {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row no-wrap;
   width: 100%;
   padding: 0 1em;
 }
@@ -64,7 +67,6 @@ ul.tabs .tab a:hover {
   flex: 0 130px;
 }
 .food-filter .block:last-child nav {
-  box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -118,13 +120,13 @@ ul.tabs .tab a:hover {
   justify-content: center;
   background-color: #808080;
 }
-.foods .card-panel .health.rank-1 {
+.foods .card-panel .health.rank-green {
   background-color: #7ae076;
 }
-.foods .card-panel .health.rank-2 {
+.foods .card-panel .health.rank-yellow {
   background-color: #fddf7b;
 }
-.foods .card-panel .health.rank-3 {
+.foods .card-panel .health.rank-red {
   background-color: #fd7b7b;
 }
 .foods .card-panel .health i {