Merged branch foodsUI into develop

dmd-web-and-mobile · Feb 13, 2017 · f9cb184 · f9cb184
2 parents d532ee0 + dc7cc8e
commit f9cb184
Show file tree

Hide file tree

Showing 21 changed files with 6,963 additions and 218 deletions.
diff --git a/app/app.js b/app/app.js
@@ -1,4 +1,36 @@
-var app = angular.module('app', ['ngRoute']);
+var app = angular.module('app', ['ngRoute', 'ngResource']);
 
 // Root controllers in /root/ folder
 // Page controllers in /pages/[your-page] folder
+
+// Factories
+
+// TODO: 'Foods' factory TEMPORARY
+app.factory('Foods', function($resource) {
+  return $resource('assets/json/foods.json');
+});
+
+// Just does a PUT request when u call Food.update
+app.factory('Food', function ($resource) {
+  // {food: '@id'} means replace :food with $scope.foodCRUD.id
+  var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/food/:food', {food: '@id'}, {
+    update:{ method:'PUT' }
+  });
+  return data;
+});
+
+app.factory('Categories', function($resource) {
+  return $resource('assets/json/categories.json');
+});
+
+// TODO: 'Nutrients' factory TEMPORARY
+app.factory('Nutrients', function($resource) {
+  return $resource('assets/json/nutrients.json');
+});
+
+app.factory('Nutrient', function ($resource) {
+  var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/nutrients/:nutrient', {nutrient: '@id'}, {
+    update:{ method:'PUT' }
+  });
+  return data;
+});
diff --git a/app/app.route.js b/app/app.route.js
@@ -20,22 +20,15 @@ app.config( function ($routeProvider, $locationProvider) {
       controller: 'FoodCtrl'
     })
 
-    // Sandbox Demo
-    .when('/news', {
-      templateUrl: 'app/sandbox/news.html',
-      controller: 'NewsCtrl'
-    })
-
-    // Sandbox Demo
-    .when('/competitions', {
-      templateUrl: 'app/sandbox/competition.html',
-      controller: 'CompetitionCtrl'
+    .when('/nutrients', {
+      templateUrl: 'app/pages/nutrients/view.html',
+      controller: 'NutrientsCtrl'
     })
 
     // Sandbox Demo
-    .when('/todo', {
-      templateUrl: 'app/sandbox/todo.html',
-      controller: 'TodoCtrl'
+    .when('/rest', {
+      templateUrl: 'app/sandbox/rest.html',
+      controller: 'RestCtrl'
     })
 
     // 404 Not Found

diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
@@ -1,4 +1,4 @@
-app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
+app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', function ($scope, $http, Foods, Food, Categories) {
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
 
@@ -8,11 +8,14 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   $scope.rankSelection = {
     "green": true,
     "yellow": true,
-    "red": true
+    "red": true,
+    "gray": true
   };
   $scope.categorySelection = { "all": true };
   $scope.searchTerm = "";
 
+
+
   // Initialize CRUD modes
   $scope.editMode = false;
   $scope.createMode = false;
@@ -21,37 +24,42 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   $scope.foodCRUD = {};
 
   // GET foods
-  $http.get("assets/json/foods.json")
-  .then(function(response) {
-    $scope.foods = response.data.data;
+  Foods.get({}, function (data) {
+    $scope.foods = data.data;
   });
 
   // GET list of categories
-  $http.get("assets/json/categories.json")
-  .then(function(response) {
-    $scope.categories = response.data.data;
-
+  Categories.get({}, function (data) {
+    var categories = data.data;
+    categories.forEach(function(cat){
+      $scope.categories[cat.id] = cat;
+    });
+    $scope.categories.forEach(function(c){
+      $scope.categorySelection[c.id] = false;
+    });
     // 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;
@@ -78,14 +86,7 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   // 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);
-    });
+    Food.update($scope.foodCRUD);
   };
 
 

diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
@@ -1,3 +1,4 @@
+// Search bar
 .food-search
   padding-top: .5em
   i
@@ -12,28 +13,42 @@
     transform: translateY(-120%)
   .input-field.col label
     left: 0
-    
+
 .barcode
   margin: 0
 
+
+
+
+// By Category
 .food-filter
   display: flex
   flex-flow: row no-wrap
+  justify-content: center
   width: 100%
   padding: 0 1em
-  .block
+  +below(600px)
+    flex-flow: row wrap
+  .by-category
     flex: 1 500px
-    padding: 0 1em
-    &:last-child
-      flex: 0 130px
-      nav
-        display: flex
-        align-items: center
-        justify-content: center
-  nav
-    background-color: lightergray
     a
       color: black
+  nav
+    background-color: lightergray
+
+
+// Grades
+.grade
+  padding-right: 1em
+  +above(600px)
+    padding: 0 1em
+  nav
+    display: flex
+    align-items: center
+    padding: 0 .9em 0 1.3em
+    label
+      position: relative
+      top: 2px
 
 .green[type="checkbox"].filled-in:checked+label:after
   border-color: green
@@ -44,9 +59,19 @@
 .red[type="checkbox"].filled-in:checked+label:after
   border-color: red
   background-color: red
+.gray[type="checkbox"].filled-in:checked+label:after
+  border-color: gray
+  background-color: gray
 [type="checkbox"]+label
   padding-left: 26px
 
+
+
+// Table view
+
+
+
+
 .foods
   display: flex
   padding: 3em
@@ -63,28 +88,6 @@
     transition: all .2s
     &:hover
       transform: scale(.95)
-    .health
-      width: 3em
-      min-width: @width
-      min-height: @width
-      height: 100%
-      display: flex
-      align-items: center
-      justify-content: center
-      background-color: gray
-      &.rank-green
-        background-color: green
-      &.rank-yellow
-        background-color: yellow
-      &.rank-red
-        background-color: red
-
-      i
-        color: white
-    h5
-      font-size: 1.4em
-      margin: .3em .7em
-
     // "Add new food" button
     &.add
       background-color: blue
@@ -95,12 +98,47 @@
         font-size: 2.5em
       .health
         background-color: alpha(black, .27)
+    h5
+      font-size: 1.4em
+      margin: .3em .7em
 
+  .health
+    width: 3em
+    min-width: @width
+    min-height: @width
+    height: 100%
+    display: flex
+    align-items: center
+    justify-content: center
+    background-color: purple
+    i
+      color: white
+  .rank-green
+    background-color: green
+  .rank-yellow
+    background-color: yellow
+  .rank-red
+    background-color: red
+  .rank-gray
+    background-color: gray
 
 
+  .table-rank
+    width: 3.5em
+  table
+    font-size: 1.2em
+  td, th
+    cursor: pointer
+    padding: .8em
+  tr.add
+    background-color: blue
+    color: white
+    td:first-child
+      background-color: alpha(black, .27)
 
 
 
+// Modal
 .foodModal
   display: flex
   align-items: center