Skin done. dynamic Create/update views done.

dmd-web-and-mobile · Dec 1, 2016 · ea4a476 · ea4a476
1 parent 746ef7f
commit ea4a476
Show file tree

Hide file tree

Showing 8 changed files with 273 additions and 159 deletions.
diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
@@ -1,7 +1,31 @@
-app.controller('FoodCtrl', ['$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;
+  });
+
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
-  $scope.page.yourVar = "globalStuff";
 
-  $scope.var2 = "localStuff";
+  $scope.editMode = false;
+  $scope.createMode = false;
+
+  $scope.foodCRUD = {}
+
+  $scope.edit = function (foodToEdit) {
+    $scope.editMode = true;
+    $scope.foodCRUD = foodToEdit;
+    $scope.foodCRUD.rank_mode = "0"; //TODO: remove this when API implements it
+  };
+
+  $scope.create = function () {
+    $scope.createMode = true;
+    $scope.foodCRUD = {}
+    $scope.foodCRUD.rank_mode = "0";
+  };
+
+  $scope.cancel = function () {
+    $scope.editMode = false;
+    $scope.createMode = false;
+  };
 }]);
diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
@@ -51,6 +51,7 @@
   flex-wrap: wrap
 
   .card-panel
+    background: lightergray
     flex-grow: 1
     display: flex
     padding: 0
@@ -61,14 +62,21 @@
     &:hover
       transform: scale(.95)
     .health
-      background-color: green
       width: 3em
       min-width: @width
       min-height: @width
       height: 100%
       display: flex
       align-items: center
       justify-content: center
+      background-color: gray
+      &.rank-1
+        background-color: green
+      &.rank-2
+        background-color: yellow
+      &.rank-3
+        background-color: red
+
       i
         color: white
     h5
@@ -88,48 +96,13 @@
 
 
 
-.food-crud
-  font-size: 1.1em
-  padding: 1em
-  border: 1px solid lightgray
-  my-box-shadow()
-  background: white
-  [type="radio"]:not(:checked)+label, [type="radio"]:checked+label
-    padding-left: 1.7em
-    padding-right: 1em
-  .grade
-    margin-bottom: 2em
-  h4
-    margin: 5px 0 25px 0
-  p
-    font-size: 1.1em
-    font-weight: 500
-    color: #BBB
-    margin-bottom: 5px
-  a.btn
-    width: 48%
-  .orange
-    float: right
-
-  .nutrition
-    margin-bottom: 1.5em
-    td
-      padding: .5em 5px
-    td:first-child
-      font-weight: 500
-      width: 50%
-
 
 
-.modal_ .editContent
-  display: none
-.modal_.editMode .editContent
-  display: inline
 
-.modal_
+.foodModal
+  display: flex
   align-items: center
   justify-content: center
-  display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
@@ -139,3 +112,34 @@
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+  .CRUD
+    font-size: 1.1em
+    padding: 1em
+    border: 1px solid lightgray
+    my-box-shadow()
+    background: white
+    [type="radio"]:not(:checked)+label, [type="radio"]:checked+label
+      padding-left: 1.7em
+      padding-right: 1em
+    .grade
+      margin-bottom: 2em
+    h4
+      margin: 5px 0 25px 0
+    p
+      font-size: 1.1em
+      font-weight: 500
+      color: #BBB
+      margin-bottom: 5px
+    a.btn
+      width: 48%
+    .orange
+      float: right
+
+    .nutrition
+      margin-bottom: 1.5em
+      td
+        padding: .5em 5px
+      td:first-child
+        font-weight: 500
+        width: 50%
diff --git a/app/pages/food/view.html b/app/pages/food/view.html
@@ -1,3 +1,4 @@
+<!-- Name Search -->
 <div class="container food-search">
 
   <div class="input-field col s6">
@@ -7,9 +8,11 @@
   </div>
 
 </div>
+<!-- End of Name Search -->
 
 
 
+<!-- Filters -->
 <div class="food-filter container">
 
   <div class="block">
@@ -57,64 +60,67 @@ <h5>By Grade</h5>
   </div>
 
 </div>
+<!-- End of Sorting -->
 
 
 
+<!-- Foods List -->
 <div class="foods">
 
-  <div class="card-panel add">
-    <div class="health">
-      <i class="material-icons">add</i>
-    </div>
+  <div ng-click="create()" class="card-panel add">
+    <div class="health"><i class="material-icons">add</i></div>
     <h5>Add new food</h5>
   </div>
 
-  <div class="card-panel edit" ng-repeat="n in loop">
-    <div class="health">
-      <i class="material-icons">favorite</i>
-    </div>
-    <h5>{{n}}</h5>
+  <div class="card-panel" ng-repeat="food in foods" ng-click="edit(food)">
+    <div class="health rank-{{food.rank_id}}"><i class="material-icons">favorite</i></div>
+    <h5>{{food.name}}</h5>
   </div>
 
 </div>
+<!-- End of Foods List -->
 
 
 
-<div class="modal_" id="foodModal">
-<div class="food-crud">
-<h4>jquery ctrl</h4>
+<!-- Modal -->
+<div ng-show="editMode || createMode" class="foodModal">
+<div class="CRUD">
+<h4>{{foodCRUD.name || "Add New Food"}}</h4>
 
   <form action="#">
 
     <div class="input-field">
-      <input id="food_name" type="text" placeholder="Bananas" class="validate">
-      <label for="food_name">Name</label>
+      <input type="text" placeholder="Name" ng-model="foodCRUD.name">
     </div>
 
-    <select>
-      <option value="" disabled selected>Category</option>
+    <select ng-model="foodCRUD.category_id" class="no-materialize">
+      <option ng-show="createMode" value="" disabled selected>Select a Category</option>
       <option value="1">Fruit</option>
       <option value="2">Veggie</option>
       <option value="3">Fattie</option>
     </select>
 
     <p>Grade</p>
     <div class="grade">
-      <input name="group1" type="radio" id="test1" checked/>
-      <label for="test1">Auto</label>
+      <!-- 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">
+      <label for="a">Auto</label>
 
-      <input name="group1" type="radio" id="test2" disabled/>
-      <label for="test2">Green</label>
+      <input name="grade" type="radio" value="1" id="b" ng-model="foodCRUD.rank_mode">
+      <label for="b">Green</label>
 
-      <input name="group1" type="radio" id="test3" disabled/>
-      <label for="test3">Yellow</label>
+      <input name="grade" type="radio" value="2" id="c" ng-model="foodCRUD.rank_mode">
+      <label for="c">Yellow</label>
 
-      <input name="group1" type="radio" id="test4" disabled/>
-      <label for="test4">Red</label>
+      <input name="grade" type="radio" value="3" id="d" ng-model="foodCRUD.rank_mode">
+      <label for="d">Red</label>
     </div>
 
-    <span class="editContent">
-      <p>Nutrition Facts</p>
+    <!-- TODO: HIDE this until it's implemented. THEN ng-bind the nutrition facts-->
+    <!-- <span ng-show="editMode"> -->
+    <span ng-show="false">
+      <p>Nutrition Facts (WIP)</p>
       <table class="nutrition">
         <tbody>
           <tr>
@@ -133,14 +139,15 @@ <h4>jquery ctrl</h4>
       </table>
     </span>
 
-    <a class="waves-effect waves-light btn blue">Create</a>
-    <a class="waves-effect waves-light btn orange">Cancel</a>
+    <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>
 
   </form>
 
 </div>
 </div>
-
+<!-- End of Modal -->
 
 
 <script>
@@ -152,34 +159,34 @@ <h4>jquery ctrl</h4>
   }
 });
 
-$('.food-crud 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');
-  });
-});
+// $('.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/app/sandbox/scrap.html b/app/sandbox/scrap.html
@@ -1,3 +1,21 @@
 <script type="text/ng-template" id="/todos.html">
   <ul></ul>
 </script>
+
+
+<!-- Food ranks -->
+<p>Grade</p>
+<div class="grade">
+  <!-- 0: auto, 1: green, 2: yellow, 3: red -->
+  <input name="grade" type="radio" value="0" id="a" ng-model="foodCRUD.rank_id">
+  <label for="a">Auto</label>
+
+  <input name="grade" type="radio" value="1" id="b" ng-model="foodCRUD.rank_id">
+  <label for="b">Green</label>
+
+  <input name="grade" type="radio" value="2" id="c" ng-model="foodCRUD.rank_id">
+  <label for="c">Yellow</label>
+
+  <input name="grade" type="radio" value="3" id="d" ng-model="foodCRUD.rank_id">
+  <label for="d">Red</label>
+</div>