From 040d6369854c2fbf05e717eb4c969a1abfa15327 Mon Sep 17 00:00:00 2001
From: Tim Morris <timothy.morris@uconn.edu>
Date: Tue, 13 Dec 2016 00:19:54 -0500
Subject: [PATCH] begin api receiving setup

---
 app/pages/categories/ctrl.js    |  62 ++++++++++-
 app/pages/categories/style.styl |   9 ++
 app/pages/categories/view.html  | 183 +++++++-------------------------
 assets/css/main.css             |   8 ++
 assets/js/bundle.js             |  74 +++++++++++--
 5 files changed, 182 insertions(+), 154 deletions(-)

diff --git a/app/pages/categories/ctrl.js b/app/pages/categories/ctrl.js
index 38bbe26..8b0da18 100644
--- a/app/pages/categories/ctrl.js
+++ b/app/pages/categories/ctrl.js
@@ -1,7 +1,65 @@
+
+function GetCategories() {
+	return [
+		{
+			name: 'fruit',
+			rules:  [
+				{ nutrient: 'sugar',
+					rule_id: '1',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] },
+				{ nutrient: 'sodium',
+					rule_id: '2',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gtoe', value: 2 } ] },
+				{ nutrient: 'satfat',
+					rule_id: '3',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] } ]
+
+		},
+		{
+			name: 'veggie',
+			rules:  [
+				{ nutrient: 'sugar',
+					rule_id: '4',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] },
+				{ nutrient: 'sodium',
+					rule_id: '5',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] },
+				{ nutrient: 'satfat',
+					rule_id: '6',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] } ]
+
+		}
+	];
+}
+
+function GetRanks() {
+	return ['green', 'yellow'];
+}
+
+function GetNutrients() {
+	return ['sodium', 'sugar', 'satfat'];
+}
+
+function GetOperations() {
+	return [{name: 'lt', symbol: 'Less Than'},
+					{name: 'ltoe', symbol: 'Less Than or Equal'},
+					{name: 'gt', symbol: 'Greater Than'},
+					{name: 'gtoe', symbol: 'Greater Than or Equal'}];
+}
+
 app.controller('CategoryCtrl', ['$scope', function ($scope) {
   $scope.page.title = 'Categories';
   $scope.page.id = 'cat';
   $scope.page.yourVar = "globalStuff";
-  
-  $scope.var2 = "localStuff";
+
+  $scope.categories = GetCategories();
+	$scope.ranks = GetRanks();
+	$scope.nutrients = GetNutrients();
+	$scope.operations = GetOperations();
 }]);
diff --git a/app/pages/categories/style.styl b/app/pages/categories/style.styl
index e69de29..f674be6 100644
--- a/app/pages/categories/style.styl
+++ b/app/pages/categories/style.styl
@@ -0,0 +1,9 @@
+.collapsible-body {
+	padding: 1em;
+	box-sizing:border-box;
+}
+
+.card-title,
+.collapsible-header {
+	text-transform:capitalize;
+}
diff --git a/app/pages/categories/view.html b/app/pages/categories/view.html
index 143b85a..d710b91 100644
--- a/app/pages/categories/view.html
+++ b/app/pages/categories/view.html
@@ -1,144 +1,53 @@
 <div class="container">
 	<div class="row">
-		<div class="col s12 m8">
+		<div class="col s12 m9">
 			<ul class="collapsible" data-collapsible="expandable">
-		    <li>
-		      <div class="collapsible-header">CATEGORY NAME</div>
+				<li ng-repeat="category in categories">
+		      <div class="collapsible-header">{{ category.name }}</div>
 		      <div class="collapsible-body">
 						<div class="row">
-							<div class="col s12">
-								<ul class="tabs tabs--categories">
-									<li class="tab col s4"><a class="active" href="#CATEGORY-NAME-nutrients">Nutrients</a></li>
-									<li class="tab col s4"><a href="#CATEGORY-NAME-yellow">Yellow</a></li>
-									<li class="tab col s4"><a href="#CATEGORY-NAME-green">Green</a></li>
-								</ul>
-							</div>
-							<div id="CATEGORY-NAME-nutrients" class="col s12 category-tab">
-								<div class="row">
-									<div class="col s12">
-										<h4>Nutrients</h4>
-										<div class="category-nutrient-chips"></div>
-									</div>
-								</div>
-							</div>
-							<div id="CATEGORY-NAME-yellow" class="col s12 category-tab">
-								<div class="row sugar">
-									<div class="col s4"><p>Sugar</p></div>
-									<div class="col s4 input-field">
-										<select>
-											<option value="lt">&lt;</option>
-											<option value="ltoe">&lt;=</option>
-											<option value="gt">&gt;</option>
-											<option value="gtoe">&gt;=</option>
-										</select>
-										<label>Operation</label>
-									</div>
-									<div class="col s4">
-										<label for="sugar_value">Value (g)</label>
-										<input type="number" id="sugar_value">
-									</div>
-								</div>
-								<div class="row sodium">
-									<div class="col s4"><p>Sodium</p></div>
-									<div class="col s4 input-field">
-										<select>
-											<option value="lt">&lt;</option>
-											<option value="ltoe">&lt;=</option>
-											<option value="gt">&gt;</option>
-											<option value="gtoe">&gt;=</option>
-										</select>
-										<label>Operation</label>
-									</div>
-									<div class="col s4">
-										<label for="sodium_value">Value (g)</label>
-										<input type="number" id="sodium_value">
-									</div>
-								</div>
-								<div class="row saturated-fat">
-									<div class="col s4"><p>Saturated Fat</p></div>
-									<div class="col s4 input-field">
-										<select>
-											<option value="lt">&lt;</option>
-											<option value="ltoe">&lt;=</option>
-											<option value="gt">&gt;</option>
-											<option value="gtoe">&gt;=</option>
-										</select>
-										<label>Operation</label>
-									</div>
-									<div class="col s4">
-										<label for="satfat_value">Value (g)</label>
-										<input type="number" id="satfat_value">
-									</div>
-								</div>
-							</div>
-							<div id="CATEGORY-NAME-green" class="col s12 category-tab">
-								<div class="row sugar">
-									<div class="col s4"><p>Sugar</p></div>
-									<div class="col s4 input-field">
-										<select>
-											<option value="lt">&lt;</option>
-											<option value="ltoe">&lt;=</option>
-											<option value="gt">&gt;</option>
-											<option value="gtoe">&gt;=</option>
-										</select>
-										<label>Operation</label>
-									</div>
-									<div class="col s4">
-										<label for="sugar_value">Value (g)</label>
-										<input type="number" id="sugar_value">
-									</div>
-								</div>
-								<div class="row sodium">
-									<div class="col s4"><p>Sodium</p></div>
-									<div class="col s4 input-field">
-										<select>
-											<option value="lt">&lt;</option>
-											<option value="ltoe">&lt;=</option>
-											<option value="gt">&gt;</option>
-											<option value="gtoe">&gt;=</option>
-										</select>
-										<label>Operation</label>
-									</div>
-									<div class="col s4">
-										<label for="sodium_value">Value (g)</label>
-										<input type="number" id="sodium_value">
-									</div>
-								</div>
-								<div class="row saturated-fat">
-									<div class="col s4"><p>Saturated Fat</p></div>
-									<div class="col s4 input-field">
-										<select>
-											<option value="lt">&lt;</option>
-											<option value="ltoe">&lt;=</option>
-											<option value="gt">&gt;</option>
-											<option value="gtoe">&gt;=</option>
-										</select>
-										<label>Operation</label>
-									</div>
-									<div class="col s4">
-										<label for="satfat_value">Value (g)</label>
-										<input type="number" id="satfat_value">
-									</div>
-								</div>
-							</div>
-		      	</div>
-		      </div>
+					    <div class="col s12">
+					    	<table>
+					    		<thead>
+					    			<tr>
+					    				<th>Nutrient</th>
+											<th ng-repeat="rank in ranks">{{rank}} condition</th>
+					    			</tr>
+					    		</thead>
+									<tbody>
+										<tr ng-repeat="rule in category.rules">
+											<td>
+													<div class="input-field col s12">
+														<select name="{{category.name}}-rule-{{rule.rule_id}}-nutrient" id="{{category.name}}-rule-{{rule.rule_id}}-nutrient">
+															<option ng-repeat="nutrient in nutrients" value="{{nutrient}}" ng-selected="nutrient==rule.nutrient">{{nutrient}}</option>
+														</select>
+													</div>
+											</td>
+											<td ng-repeat="rank in rule.ranks">
+												<div class="input-field col s6">
+													<select name="{{category.name}}-rule-{{rule.rule_id}}-rank-{{rank.name}}">
+														<option ng-repeat="operation in operations" value="{{operation.name}}" ng-selected="operation.name==rank.operation">{{operation.symbol}}</option>
+													</select>
+												</div>
+												<div class="input-field col s6">
+													<input type="number" name="{{category.name}}-rule-{{rule.rule_id}}-value" value="{{rank.value}}">
+												</div>
+											</td>
+										</tr>
+									</tbody>
+					    	</table>
+					    </div>
+					  </div>
+					</div>
 		    </li>
 		  </ul>
-		  <p>I'd put more, but then I'd have to change lots of ID's... you get the idea #lazydev</p>
 		</div>
-		<div class="col s12 m4">
+		<div class="col s12 m3">
 			<div class="card grey darken-3">
 				<div class="card-content white-text">
 					<span class="card-title">Filter</span>
 					<div class="row">
 						<div class="col s12">
-							<div class="row">
-				        <div class="input-field col s12 ">
-				          <input id="by-nutrient" type="text">
-				          <label for="by-nutrient">By Nutrient</label>
-				        </div>
-				      </div>
 				      <div class="row">
 				        <div class="input-field col s12 ">
 				          <input id="by-name" type="text">
@@ -157,21 +66,7 @@ <h4>Nutrients</h4>
 <script>
 $(document).ready(function(){
   $('.collapsible').collapsible();
-  $('.tabs--categories').tabs();
-  $('.tab').on('click', function(e) {
-  	$('.category-tab').css('display', 'none');
-  	$($(this).find('a').attr('href')).css('display', 'block');
-  });
-  $('select').material_select();
-
-   $('.category-nutrient-chips').material_chip({
-    data: [{
-      tag: 'Sugar',
-    }, {
-      tag: 'Sodium',
-    }, {
-      tag: 'Saturated Fat',
-    }],
-  });
+	$('select').material_select();
+	Materialize.updateTextFields();
 });
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
index 6af37ad..896deef 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -33,6 +33,14 @@ ul.tabs .tab a {
 ul.tabs .tab a:hover {
   color: inherit;
 }
+.collapsible-body {
+  padding: 1em;
+  box-sizing: border-box;
+}
+.card-title,
+.collapsible-header {
+  text-transform: capitalize;
+}
 .food-search {
   padding-top: 0.5em;
 }
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
index 632e994..cef1780 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.js
@@ -108,21 +108,79 @@ app.controller('404Ctrl', ['$scope', function ($scope) {
 }]);
 
 
-app.controller('CategoryCtrl', ['$scope', function ($scope) {
-  $scope.page.title = 'Categories';
-  $scope.page.id = 'cat';
+app.controller('FoodCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Food';
+  $scope.page.id = 'food';
   $scope.page.yourVar = "globalStuff";
-  
+
   $scope.var2 = "localStuff";
 }]);
 
 
-app.controller('FoodCtrl', ['$scope', function ($scope) {
-  $scope.page.title = 'Food';
-  $scope.page.id = 'food';
+
+function GetCategories() {
+	return [
+		{
+			name: 'fruit',
+			rules:  [
+				{ nutrient: 'sugar',
+					rule_id: '1',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] },
+				{ nutrient: 'sodium',
+					rule_id: '2',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gtoe', value: 2 } ] },
+				{ nutrient: 'satfat',
+					rule_id: '3',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] } ]
+
+		},
+		{
+			name: 'veggie',
+			rules:  [
+				{ nutrient: 'sugar',
+					rule_id: '4',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] },
+				{ nutrient: 'sodium',
+					rule_id: '5',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] },
+				{ nutrient: 'satfat',
+					rule_id: '6',
+					ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+										{ name: 'yellow', operation: 'gt', value: 2 } ] } ]
+
+		}
+	];
+}
+
+function GetRanks() {
+	return ['green', 'yellow'];
+}
+
+function GetNutrients() {
+	return ['sodium', 'sugar', 'satfat'];
+}
+
+function GetOperations() {
+	return [{name: 'lt', symbol: 'Less Than'},
+					{name: 'ltoe', symbol: 'Less Than or Equal'},
+					{name: 'gt', symbol: 'Greater Than'},
+					{name: 'gtoe', symbol: 'Greater Than or Equal'}];
+}
+
+app.controller('CategoryCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Categories';
+  $scope.page.id = 'cat';
   $scope.page.yourVar = "globalStuff";
 
-  $scope.var2 = "localStuff";
+  $scope.categories = GetCategories();
+	$scope.ranks = GetRanks();
+	$scope.nutrients = GetNutrients();
+	$scope.operations = GetOperations();
 }]);