From ea4a4766f444d7f4bea71d2d9cbd4f79b5bd47ae Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Thu, 1 Dec 2016 15:39:28 -0500 Subject: [PATCH 1/3] Skin done. dynamic Create/update views done. --- app/pages/food/ctrl.js | 30 +++++++++- app/pages/food/style.styl | 80 +++++++++++++------------ app/pages/food/view.html | 123 ++++++++++++++++++++------------------ app/sandbox/scrap.html | 18 ++++++ assets/css/main.css | 71 ++++++++++++---------- assets/js/bundle.js | 80 ++++++++++++++++--------- assets/json/data.json | 27 +++++++++ assets/styl/reset.styl | 3 + 8 files changed, 273 insertions(+), 159 deletions(-) create mode 100644 assets/json/data.json diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js index 199a701..7aa5094 100644 --- 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 index a07d8f3..d4664d6 100644 --- 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,7 +62,6 @@ &:hover transform: scale(.95) .health - background-color: green width: 3em min-width: @width min-height: @width @@ -69,6 +69,14 @@ 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 index b81a390..aac25c4 100644 --- a/app/pages/food/view.html +++ b/app/pages/food/view.html @@ -1,3 +1,4 @@ +
@@ -7,9 +8,11 @@
+ +
@@ -57,42 +60,41 @@
By Grade
+ +
-
-
- add -
+
+
add
Add new food
-
-
- favorite -
-
{{n}}
+
+
favorite
+
{{food.name}}
+ -
-
-

jquery ctrl

+ +
+
+

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

- - +
- + @@ -100,21 +102,25 @@

jquery ctrl

Grade

- - + + + + - - + + - - + + - - + +
- -

Nutrition Facts

+ + + +

Nutrition Facts (WIP)

@@ -133,14 +139,15 @@

jquery ctrl

 - Create - Cancel + Create + Update + Cancel
- + diff --git a/app/sandbox/scrap.html b/app/sandbox/scrap.html index 0f5f52a..a46ffc0 100644 --- a/app/sandbox/scrap.html +++ b/app/sandbox/scrap.html @@ -1,3 +1,21 @@ + + + +

Grade

+
+ + + + + + + + + + + + +
diff --git a/assets/css/main.css b/assets/css/main.css index 6af37ad..57b92aa 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -24,6 +24,9 @@ a { width: 100%; position: absolute; } +select.no-materialize { + display: block; +} ul.tabs { background: none; } @@ -98,6 +101,7 @@ ul.tabs .tab a:hover { flex-wrap: wrap; } .foods .card-panel { + background: #f5f5f5; flex-grow: 1; display: flex; padding: 0; @@ -110,7 +114,6 @@ ul.tabs .tab a:hover { transform: scale(0.95); } .foods .card-panel .health { - background-color: #7ae076; width: 3em; min-width: 3em; min-height: 3em; @@ -118,6 +121,16 @@ ul.tabs .tab a:hover { display: flex; align-items: center; justify-content: center; + background-color: #808080; +} +.foods .card-panel .health.rank-1 { + background-color: #7ae076; +} +.foods .card-panel .health.rank-2 { + background-color: #fddf7b; +} +.foods .card-panel .health.rank-3 { + background-color: #fd7b7b; } .foods .card-panel .health i { color: #fff; @@ -141,66 +154,60 @@ ul.tabs .tab a:hover { .foods .card-panel.add .health { background-color: rgba(0,0,0,0.27); } -.food-crud { +.foodModal { + display: flex; + align-items: center; + justify-content: center; + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: #000; /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} +.foodModal .CRUD { font-size: 1.1em; padding: 1em; border: 1px solid #f0f0f0; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); background: #fff; } -.food-crud [type="radio"]:not(:checked)+label, -.food-crud [type="radio"]:checked+label { +.foodModal .CRUD [type="radio"]:not(:checked)+label, +.foodModal .CRUD [type="radio"]:checked+label { padding-left: 1.7em; padding-right: 1em; } -.food-crud .grade { +.foodModal .CRUD .grade { margin-bottom: 2em; } -.food-crud h4 { +.foodModal .CRUD h4 { margin: 5px 0 25px 0; } -.food-crud p { +.foodModal .CRUD p { font-size: 1.1em; font-weight: 500; color: #bbb; margin-bottom: 5px; } -.food-crud a.btn { +.foodModal .CRUD a.btn { width: 48%; } -.food-crud .orange { +.foodModal .CRUD .orange { float: right; } -.food-crud .nutrition { +.foodModal .CRUD .nutrition { margin-bottom: 1.5em; } -.food-crud .nutrition td { +.foodModal .CRUD .nutrition td { padding: 0.5em 5px; } -.food-crud .nutrition td:first-child { +.foodModal .CRUD .nutrition td:first-child { font-weight: 500; width: 50%; } -.modal_ .editContent { - display: none; -} -.modal_.editMode .editContent { - display: inline; -} -.modal_ { - align-items: center; - justify-content: center; - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: #000; /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ -} .spacer { height: 80px; } diff --git a/assets/js/bundle.js b/assets/js/bundle.js index 9aa9625..cca9a93 100644 --- a/assets/js/bundle.js +++ b/assets/js/bundle.js @@ -52,25 +52,6 @@ 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'; @@ -99,6 +80,25 @@ 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'; @@ -108,6 +108,39 @@ app.controller('404Ctrl', ['$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.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; + }; +}]); + + app.controller('CategoryCtrl', ['$scope', function ($scope) { $scope.page.title = 'Categories'; $scope.page.id = 'cat'; @@ -117,15 +150,6 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) { }]); -app.controller('FoodCtrl', ['$scope', function ($scope) { - $scope.page.title = 'Food'; - $scope.page.id = 'food'; - $scope.page.yourVar = "globalStuff"; - - $scope.var2 = "localStuff"; -}]); - - app.controller('LoginCtrl', ['$scope', function ($scope) { $scope.page.title = 'Login'; $scope.page.id = 'login'; diff --git a/assets/json/data.json b/assets/json/data.json new file mode 100644 index 0000000..e028ef2 --- /dev/null +++ b/assets/json/data.json @@ -0,0 +1,27 @@ +{ + "status": "ok", + "code": "200", + "data": [ + { + "id": "1", + "name": "banana", + "barcode": "2342342342", + "rank_id": "1", + "category_id": "3" + }, + { + "id": "2", + "name": "pop tarts", + "barcode": "2342342342", + "rank_id": "3", + "category_id": "2" + }, + { + "id": "3", + "name": "cinnamon", + "barcode": "2342342342", + "rank_id": "2", + "category_id": "1" + } + ] +} diff --git a/assets/styl/reset.styl b/assets/styl/reset.styl index 1b9926f..c7d1efe 100644 --- a/assets/styl/reset.styl +++ b/assets/styl/reset.styl @@ -20,6 +20,9 @@ a width: 100% position: absolute +select.no-materialize + display: block + ul.tabs background: none .tab a From 67c265f5ae8ed0df55ec550d246696b891d4dbd1 Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Thu, 1 Dec 2016 17:19:07 -0500 Subject: [PATCH 2/3] Food/cat JSON working. filters half done --- app/pages/food/ctrl.js | 40 +++++++++++++++--- app/pages/food/style.styl | 8 ++-- app/pages/food/view.html | 61 +++++---------------------- assets/css/main.css | 5 --- assets/js/bundle.js | 58 ++++++++++++++++++------- assets/json/categories.json | 18 ++++++++ assets/json/{data.json => foods.json} | 0 7 files changed, 109 insertions(+), 81 deletions(-) create mode 100644 assets/json/categories.json rename assets/json/{data.json => foods.json} (100%) diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js index 7aa5094..561545d 100644 --- a/app/pages/food/ctrl.js +++ b/app/pages/food/ctrl.js @@ -1,29 +1,57 @@ 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'; + // Initialize Filters + $scope.foods = []; + $scope.categories = []; + $scope.categorySelection = { "all": true }; + $scope.searchTerm = ""; + + // Initialize CRUD modes $scope.editMode = false; $scope.createMode = false; - $scope.foodCRUD = {} + // Initialize CRUD form + $scope.foodCRUD = {}; + + // GET foods + $http.get("assets/json/foods.json") + .then(function(response) { + $scope.foods = response.data.data; + }); + + // GET list of categories + $http.get("assets/json/categories.json") + .then(function(response) { + $scope.categories = response.data.data; + + // Preset category filters + $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"] ); + } + // 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 }; + // CRUD: create food $scope.create = function () { $scope.createMode = true; $scope.foodCRUD = {} $scope.foodCRUD.rank_mode = "0"; }; + // CRUD: cancel $scope.cancel = function () { $scope.editMode = false; $scope.createMode = false; diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl index d4664d6..1ca7e7f 100644 --- a/app/pages/food/style.styl +++ b/app/pages/food/style.styl @@ -4,10 +4,10 @@ cursor: pointer top: 6px right: 0 - &:hover - color: #888 - transform: scale(.9) - transition: all .2s + // &:hover + // color: #888 + // transform: scale(.9) + // transition: all .2s .input-field label.active transform: translateY(-120%) .input-field.col label diff --git a/app/pages/food/view.html b/app/pages/food/view.html index aac25c4..00e0d92 100644 --- a/app/pages/food/view.html +++ b/app/pages/food/view.html @@ -2,8 +2,8 @@
- - + + search
@@ -20,10 +20,10 @@
By Category
@@ -71,8 +71,9 @@
By Grade
add
Add new food
- -
+ + +
favorite
{{food.name}}
@@ -117,7 +118,7 @@

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

- +

Nutrition Facts (WIP)

@@ -148,45 +149,3 @@

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

- - - diff --git a/assets/css/main.css b/assets/css/main.css index 57b92aa..f352e93 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -44,11 +44,6 @@ ul.tabs .tab a:hover { top: 6px; right: 0; } -.food-search i:hover { - color: #888; - transform: scale(0.9); - transition: all 0.2s; -} .food-search .input-field label.active { transform: translateY(-120%); } diff --git a/assets/js/bundle.js b/assets/js/bundle.js index cca9a93..544db03 100644 --- a/assets/js/bundle.js +++ b/assets/js/bundle.js @@ -108,32 +108,69 @@ app.controller('404Ctrl', ['$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; - }); +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', function ($scope, $http) { $scope.page.title = 'Food'; $scope.page.id = 'food'; + // Initialize Filters + $scope.foods = []; + $scope.categories = []; + $scope.categorySelection = { "all": true }; + $scope.searchTerm = ""; + + // Initialize CRUD modes $scope.editMode = false; $scope.createMode = false; - $scope.foodCRUD = {} + // Initialize CRUD form + $scope.foodCRUD = {}; + // GET foods + $http.get("assets/json/foods.json") + .then(function(response) { + $scope.foods = response.data.data; + }); + + // GET list of categories + $http.get("assets/json/categories.json") + .then(function(response) { + $scope.categories = response.data.data; + + // Preset category filters + $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"] ); + } + + // 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 }; + // CRUD: create food $scope.create = function () { $scope.createMode = true; $scope.foodCRUD = {} $scope.foodCRUD.rank_mode = "0"; }; + // CRUD: cancel $scope.cancel = function () { $scope.editMode = false; $scope.createMode = false; @@ -141,15 +178,6 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) { }]); -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', function ($scope) { $scope.page.title = 'Login'; $scope.page.id = 'login'; diff --git a/assets/json/categories.json b/assets/json/categories.json new file mode 100644 index 0000000..698bad0 --- /dev/null +++ b/assets/json/categories.json @@ -0,0 +1,18 @@ +{ + "status": "ok", + "code": "200", + "data": [ + { + "id": "1", + "name": "Fruit" + }, + { + "id": "2", + "name": "Veggie" + }, + { + "id": "3", + "name": "Fattie" + } + ] +} diff --git a/assets/json/data.json b/assets/json/foods.json similarity index 100% rename from assets/json/data.json rename to assets/json/foods.json From ecfa6dcf7448c9591153d4ba1186649d86d0612f Mon Sep 17 00:00:00 2001 From: Gabe Rogan Date: Fri, 2 Dec 2016 19:01:28 -0500 Subject: [PATCH 3/3] 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" } ]