-
jquery ctrl
+
+
+
+
{{foodCRUD.name || "Add New Food"}}
-
-
-
-
-
+
diff --git a/app/sandbox/scrap.html b/app/sandbox/scrap.html
index 0f5f52a..f0d0d0d 100644
--- a/app/sandbox/scrap.html
+++ b/app/sandbox/scrap.html
@@ -1,3 +1,36 @@
+
+
+
+
Grade
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
By Nutrient (WIP)
+
+
diff --git a/assets/css/main.css b/assets/css/main.css
index 6af37ad..1ba2ed3 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;
}
@@ -41,20 +44,18 @@ 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%);
}
.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;
}
@@ -66,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;
@@ -98,6 +98,7 @@ ul.tabs .tab a:hover {
flex-wrap: wrap;
}
.foods .card-panel {
+ background: #f5f5f5;
flex-grow: 1;
display: flex;
padding: 0;
@@ -110,7 +111,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 +118,16 @@ ul.tabs .tab a:hover {
display: flex;
align-items: center;
justify-content: center;
+ background-color: #808080;
+}
+.foods .card-panel .health.rank-green {
+ background-color: #7ae076;
+}
+.foods .card-panel .health.rank-yellow {
+ background-color: #fddf7b;
+}
+.foods .card-panel .health.rank-red {
+ background-color: #fd7b7b;
}
.foods .card-panel .health i {
color: #fff;
@@ -141,66 +151,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 632e994..9150c57 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.js
@@ -116,13 +116,97 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) {
$scope.var2 = "localStuff";
}]);
-
-app.controller('FoodCtrl', ['$scope', function ($scope) {
+app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.page.title = 'Food';
$scope.page.id = 'food';
- $scope.page.yourVar = "globalStuff";
- $scope.var2 = "localStuff";
+ // Initialize Filters
+ $scope.foods = [];
+ $scope.categories = [];
+ $scope.rankSelection = {
+ "green": true,
+ "yellow": true,
+ "red": true
+ };
+ $scope.categorySelection = { "all": true };
+ $scope.searchTerm = "";
+
+ // Initialize CRUD modes
+ $scope.editMode = false;
+ $scope.createMode = false;
+
+ // 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.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.action = "update";
+ // console.log($scope.foodCRUD);
+ };
+
+ // CRUD: create food
+ $scope.create = function () {
+ $scope.createMode = true;
+ $scope.foodCRUD = {};
+ $scope.foodCRUD.rank_mode = "auto";
+ $scope.foodCRUD.action = "create";
+ // console.log($scope.foodCRUD);
+ };
+
+ // CRUD: cancel
+ $scope.cancel = function () {
+ $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/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/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
new file mode 100644
index 0000000..9745cd7
--- /dev/null
+++ b/assets/json/foods.json
@@ -0,0 +1,39 @@
+{
+ "status": "ok",
+ "code": "200",
+ "data": [
+ {
+ "id": "1",
+ "name": "banana",
+ "barcode": "2342342342",
+ "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": "red",
+ "rank_mode": "auto",
+ "category_id": "2"
+ },
+ {
+ "id": "3",
+ "name": "cinnamon",
+ "barcode": "2342342342",
+ "rank_id": "yellow",
+ "rank_mode": "auto",
+ "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