Nutrient UI & Factories done

dmd-web-and-mobile · Feb 6, 2017 · dc7cc8e · dc7cc8e
1 parent 5fa1614
commit dc7cc8e
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 10 deletions.
diff --git a/app/app.js b/app/app.js
@@ -4,6 +4,8 @@ var app = angular.module('app', ['ngRoute', 'ngResource']);
 // Page controllers in /pages/[your-page] folder
 
 // Factories
+
+// TODO: 'Foods' factory TEMPORARY
 app.factory('Foods', function($resource) {
   return $resource('assets/json/foods.json');
 });
@@ -20,3 +22,15 @@ app.factory('Food', function ($resource) {
 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,6 +20,11 @@ app.config( function ($routeProvider, $locationProvider) {
       controller: 'FoodCtrl'
     })
 
+    .when('/nutrients', {
+      templateUrl: 'app/pages/nutrients/view.html',
+      controller: 'NutrientsCtrl'
+    })
+
     // Sandbox Demo
     .when('/rest', {
       templateUrl: 'app/sandbox/rest.html',

diff --git a/app/pages/nutrients/ctrl.js b/app/pages/nutrients/ctrl.js
@@ -0,0 +1,43 @@
+app.controller('NutrientsCtrl', ['$scope', 'Nutrients', 'Nutrient', function ($scope, Nutrients, Nutrient) {
+  $scope.page.title = 'Nutrients';
+  $scope.page.id = 'nutrients';
+
+  // Initialize CRUD modes
+  $scope.editMode = false;
+  $scope.createMode = false;
+
+  // Initialize CRUD form
+  $scope.nutrientCRUD = {};
+
+  // GET nutrients
+  Nutrients.get({}, function (data) {
+    $scope.nutrients = data.data;
+  });
+
+  // CRUD: edit food
+  $scope.edit = function (nutrientToEdit) {
+    $scope.editMode = true;
+    $scope.nutrientCRUD = nutrientToEdit;
+    $scope.nutrientCRUD.action = "update";
+  };
+
+  // CRUD: create food
+  $scope.create = function () {
+    $scope.createMode = true;
+    $scope.nutrientCRUD = {};
+    $scope.nutrientCRUD.action = "create";
+  };
+
+  // CRUD: cancel
+  $scope.cancel = function () {
+    $scope.editMode = false;
+    $scope.createMode = false;
+  };
+
+  // CRUD: POST
+  $scope.submit = function () {
+    if ($scope.editMode) {Nutrient.update($scope.nutrientCRUD);}
+    else if ($scope.createMode) {Nutrient.save($scope.nutrientCRUD);}
+    $scope.cancel(); // hide modal
+  };
+}]);
diff --git a/app/pages/nutrients/style.styl b/app/pages/nutrients/style.styl
@@ -0,0 +1,47 @@
+.floatBlock
+  align-items center
+  box-shadow 1px 2px 3px 0px rgba(0,0,0,0.2)
+  cursor pointer
+  display flex
+  transition: all .1s
+  &:hover
+    transform scale(.95)
+
+h1.nutrientsTitle
+  text-align center
+
+.nutrientsDiv
+  display flex
+  padding 2em 3em
+  flex-wrap wrap
+  justify-content space-between
+  &.n2
+    margin -.5em -.5em 0 -.5em
+
+
+.addNutrientBtn
+  background blue
+  @extend .floatBlock
+  width 100%
+  color white
+  .plus
+    background alpha(black, .27)
+    padding 8px
+    font-size 40px
+  .text
+    padding-left 1em
+    font-size 25px
+
+
+.nutrientBlock
+  @extend .floatBlock
+  align-items center
+  background lightgray
+  flex-basis 350px
+  flex-grow 1
+  font-size 20px
+  justify-content space-between
+  margin .5em
+  padding .7em
+  .delete
+    color red
diff --git a/app/pages/nutrients/view.html b/app/pages/nutrients/view.html
@@ -0,0 +1,37 @@
+<h1 class="nutrientsTitle">Nutrient Manager</h1>
+
+<!-- Create a nutrient button -->
+<div class="nutrientsDiv">
+  <div class="addNutrientBtn" ng-click="create()">
+    <i class="material-icons plus">add</i>
+    <div class="text">Create a nutrient</div>
+  </div>
+</div>
+
+<!-- Nutrients list -->
+<div class="nutrientsDiv n2">
+  <div class="nutrientBlock" ng-repeat="nutrient in nutrients" ng-click="edit(nutrient)">
+    <div class="text">{{nutrient.name}}</div>
+  </div>
+</div>
+
+<!-- Modal -->
+<div ng-show="editMode || createMode" class="foodModal">
+<div class="CRUD">
+<h4>{{editMode && "Edit nutrient" || "Create a nutrient"}}</h4>
+
+  <form ng-submit="submit()">
+
+    <div class="input-field">
+      <input type="text" placeholder="Name" ng-model="nutrientCRUD.name" required>
+    </div>
+
+    <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>
+
+</div>
+</div>
+<!-- End of Modal -->
diff --git a/app/root/_nav.kit b/app/root/_nav.kit
@@ -12,6 +12,7 @@
   <ul class="tabs tabs-transparent">
     <li class="tab"><a ng-class="{active: page.id==='food'}" ng-click="go('/food')">Food</a></li>
     <li class="tab"><a ng-class="{active: page.id==='cat'}" ng-click="go('/categories')">Categories</a></li>
+    <li class="tab"><a ng-class="{active: page.id==='nutrients'}" ng-click="go('/nutrients')">Nutrients</a></li>
   </ul>
   </div>
 

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -244,6 +244,59 @@ ul.tabs .tab a:hover {
   font-weight: 500;
   width: 50%;
 }
+.floatBlock,
+.addNutrientBtn,
+.nutrientBlock {
+  align-items: center;
+  box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.2);
+  cursor: pointer;
+  display: flex;
+  transition: all 0.1s;
+}
+.floatBlock:hover,
+.addNutrientBtn:hover,
+.nutrientBlock:hover {
+  transform: scale(0.95);
+}
+h1.nutrientsTitle {
+  text-align: center;
+}
+.nutrientsDiv {
+  display: flex;
+  padding: 2em 3em;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.nutrientsDiv.n2 {
+  margin: -0.5em -0.5em 0 -0.5em;
+}
+.addNutrientBtn {
+  background: #4ba8f8;
+  width: 100%;
+  color: #fff;
+}
+.addNutrientBtn .plus {
+  background: rgba(0,0,0,0.27);
+  padding: 8px;
+  font-size: 40px;
+}
+.addNutrientBtn .text {
+  padding-left: 1em;
+  font-size: 25px;
+}
+.nutrientBlock {
+  align-items: center;
+  background: #f0f0f0;
+  flex-basis: 350px;
+  flex-grow: 1;
+  font-size: 20px;
+  justify-content: space-between;
+  margin: 0.5em;
+  padding: 0.7em;
+}
+.nutrientBlock .delete {
+  color: #fd7b7b;
+}
 .spacer {
   height: 80px;
 }

diff --git a/assets/js/bundle.js b/assets/js/bundle.js
@@ -4,6 +4,8 @@ var app = angular.module('app', ['ngRoute', 'ngResource']);
 // Page controllers in /pages/[your-page] folder
 
 // Factories
+
+// TODO: 'Foods' factory TEMPORARY
 app.factory('Foods', function($resource) {
   return $resource('assets/json/foods.json');
 });
@@ -21,6 +23,18 @@ 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;
+});
+
 app.config( function ($routeProvider, $locationProvider) {
   $routeProvider
     .when('/', {
@@ -43,6 +57,11 @@ app.config( function ($routeProvider, $locationProvider) {
       controller: 'FoodCtrl'
     })
 
+    .when('/nutrients', {
+      templateUrl: 'app/pages/nutrients/view.html',
+      controller: 'NutrientsCtrl'
+    })
+
     // Sandbox Demo
     .when('/rest', {
       templateUrl: 'app/sandbox/rest.html',
@@ -130,6 +149,15 @@ app.controller('404Ctrl', ['$scope', function ($scope) {
   $scope.var2 = "localStuff";
 }]);
 
+
+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', 'Foods', 'Food', 'Categories', function ($scope, $http, Foods, Food, Categories) {
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
@@ -225,15 +253,6 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', fu
 }]);
 
 
-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', 'loginService', function ($scope, loginService) {
   $scope.page.title = 'Login';
   $scope.page.id = 'login';
@@ -285,4 +304,47 @@ app.factory('loginService', ['$http', function($http) {
       });
     }
   };
-}]);
+}]);
+app.controller('NutrientsCtrl', ['$scope', 'Nutrients', 'Nutrient', function ($scope, Nutrients, Nutrient) {
+  $scope.page.title = 'Nutrients';
+  $scope.page.id = 'nutrients';
+
+  // Initialize CRUD modes
+  $scope.editMode = false;
+  $scope.createMode = false;
+
+  // Initialize CRUD form
+  $scope.nutrientCRUD = {};
+
+  // GET nutrients
+  Nutrients.get({}, function (data) {
+    $scope.nutrients = data.data;
+  });
+
+  // CRUD: edit food
+  $scope.edit = function (nutrientToEdit) {
+    $scope.editMode = true;
+    $scope.nutrientCRUD = nutrientToEdit;
+    $scope.nutrientCRUD.action = "update";
+  };
+
+  // CRUD: create food
+  $scope.create = function () {
+    $scope.createMode = true;
+    $scope.nutrientCRUD = {};
+    $scope.nutrientCRUD.action = "create";
+  };
+
+  // CRUD: cancel
+  $scope.cancel = function () {
+    $scope.editMode = false;
+    $scope.createMode = false;
+  };
+
+  // CRUD: POST
+  $scope.submit = function () {
+    if ($scope.editMode) {Nutrient.update($scope.nutrientCRUD);}
+    else if ($scope.createMode) {Nutrient.save($scope.nutrientCRUD);}
+    $scope.cancel(); // hide modal
+  };
+}]);
diff --git a/assets/json/nutrients.json b/assets/json/nutrients.json
@@ -0,0 +1,22 @@
+{
+	"status": "ok",
+	"code": "200",
+	"data": [
+		{
+			"id": "1",
+			"name": "fat"
+		},
+		{
+			"id": "2",
+			"name": "carbs"
+		},
+		{
+			"id": "3",
+			"name": "saturated fat"
+		},
+		{
+			"id": "4",
+			"name": "protein"
+		}
+	]
+}
diff --git a/index.html b/index.html
@@ -47,6 +47,7 @@ <h4 class="logo">F2E</h4>
   <ul class="tabs tabs-transparent">
     <li class="tab"><a ng-class="{active: page.id==='food'}" ng-click="go('/food')">Food</a></li>
     <li class="tab"><a ng-class="{active: page.id==='cat'}" ng-click="go('/categories')">Categories</a></li>
+    <li class="tab"><a ng-class="{active: page.id==='nutrients'}" ng-click="go('/nutrients')">Nutrients</a></li>
   </ul>
   </div>