From ecfa6dcf7448c9591153d4ba1186649d86d0612f Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Fri, 2 Dec 2016 19:01:28 -0500 Subject: [PATCH] foodUI done. did i miss anything? --- app/pages/food/anotherCtrl.js | 0 app/pages/food/ctrl.js | 41 ++++++++++++++++-- app/pages/food/style.styl | 12 +++--- app/pages/food/view.html | 58 ++++++++++--------------- app/sandbox/scrap.html | 15 +++++++ assets/css/main.css | 12 +++--- assets/js/bundle.js | 80 ++++++++++++++++++++++++----------- assets/json/createFood.json | 6 +++ assets/json/foods.json | 20 +++++++-- 9 files changed, 166 insertions(+), 78 deletions(-) delete mode 100644 app/pages/food/anotherCtrl.js create mode 100644 assets/json/createFood.json diff --git a/app/pages/food/anotherCtrl.js b/app/pages/food/anotherCtrl.js deleted file mode 100644 index e69de29..0000000 diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js index 561545d..beb6a28 100644 --- 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,28 +32,41 @@ 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 @@ -56,4 +74,19 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) { $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 index 1ca7e7f..0802028 100644 --- 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 index 00e0d92..ded31ce 100644 --- a/app/pages/food/view.html +++ b/app/pages/food/view.html @@ -2,8 +2,8 @@
- - + + search
@@ -20,8 +20,8 @@
By Category
- -
-
By Nutrient
- -
-
By Grade
@@ -73,7 +57,7 @@
Add new food
-
+
favorite
{{food.name}}
@@ -88,13 +72,17 @@
{{food.name}}

{{foodCRUD.name || "Add New Food"}}

-
+
- + +
+ +
+
- @@ -103,18 +91,16 @@

{{foodCRUD.name || "Add New Food"}}

Grade

- - - + - + - + - +
@@ -140,9 +126,9 @@

{{foodCRUD.name || "Add New Food"}}

- Create - Update - Cancel + + +
diff --git a/app/sandbox/scrap.html b/app/sandbox/scrap.html index a46ffc0..f0d0d0d 100644 --- a/app/sandbox/scrap.html +++ b/app/sandbox/scrap.html @@ -19,3 +19,18 @@
+ +
+
By Nutrient (WIP)
+ +
diff --git a/assets/css/main.css b/assets/css/main.css index f352e93..1ba2ed3 100644 --- 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 { diff --git a/assets/js/bundle.js b/assets/js/bundle.js index 544db03..4f563cf 100644 --- a/assets/js/bundle.js +++ b/assets/js/bundle.js @@ -52,6 +52,25 @@ app.config( function ($routeProvider, $locationProvider) { // $locationProvider.html5Mode(true); }); +app.controller('root', ['$scope', '$location', function ($scope, $location) { + + $scope.$watch('page', function () { + $scope.title = $scope.page.title + ' | F2E'; + }, true); + + $scope.page = { + 'title' : 'Root', + 'id' : 'root', + 'blackNav' : false + }; + + $scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food']; + + $scope.go = function ( path ) { + $location.path( path ); + }; +}]); + app.controller('NewsCtrl', ['$scope', function ($scope) { $scope.page.title = 'News'; $scope.page.id = 'news'; @@ -80,25 +99,6 @@ app.controller('EmailController', ['$scope', function ($scope) { $scope.email = "rogangabe@gmail.com"; }]); -app.controller('root', ['$scope', '$location', function ($scope, $location) { - - $scope.$watch('page', function () { - $scope.title = $scope.page.title + ' | F2E'; - }, true); - - $scope.page = { - 'title' : 'Root', - 'id' : 'root', - 'blackNav' : false - }; - - $scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food']; - - $scope.go = function ( path ) { - $location.path( path ); - }; -}]); - app.controller('404Ctrl', ['$scope', function ($scope) { $scope.page.title = '404'; $scope.page.id = '404'; @@ -116,7 +116,6 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) { $scope.var2 = "localStuff"; }]); - app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) { $scope.page.title = 'Food'; $scope.page.id = 'food'; @@ -124,6 +123,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 = ""; @@ -146,28 +150,41 @@ 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 @@ -175,6 +192,21 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) { $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/assets/json/createFood.json b/assets/json/createFood.json new file mode 100644 index 0000000..df20e0b --- /dev/null +++ b/assets/json/createFood.json @@ -0,0 +1,6 @@ +{ + "action": "create", + "name": "Oatmeal", + "category_id": "2", + "rank_mode": "auto" +} diff --git a/assets/json/foods.json b/assets/json/foods.json index e028ef2..9745cd7 100644 --- a/assets/json/foods.json +++ b/assets/json/foods.json @@ -6,21 +6,33 @@ "id": "1", "name": "banana", "barcode": "2342342342", - "rank_id": "1", - "category_id": "3" + "rank_id": "green", + "rank_mode": "auto", + "category_id": "3", + "nutrients": [ + { + "id": "1", + "name": "Sugar", + "value": "5", + "unit": "g", + "note": "should we include this?" + } + ] }, { "id": "2", "name": "pop tarts", "barcode": "2342342342", - "rank_id": "3", + "rank_id": "red", + "rank_mode": "auto", "category_id": "2" }, { "id": "3", "name": "cinnamon", "barcode": "2342342342", - "rank_id": "2", + "rank_id": "yellow", + "rank_mode": "auto", "category_id": "1" } ]