rule / category CRUD update

dmd-web-and-mobile · Feb 13, 2017 · 19bc894 · 19bc894
1 parent 040d636
commit 19bc894
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 20 deletions.
diff --git a/app/pages/categories/ctrl.js b/app/pages/categories/ctrl.js
@@ -48,9 +48,14 @@ function GetNutrients() {
 
 function GetOperations() {
 	return [{name: 'lt', symbol: 'Less Than'},
-					{name: 'ltoe', symbol: 'Less Than or Equal'},
+					{name: 'lte', symbol: 'Less Than or Equal'},
 					{name: 'gt', symbol: 'Greater Than'},
-					{name: 'gtoe', symbol: 'Greater Than or Equal'}];
+					{name: 'gte', symbol: 'Greater Than or Equal'},
+					{name: 'e', symbol: 'Equal To'}];
+}
+
+function SaveData(categories) {
+	console.log('save');
 }
 
 app.controller('CategoryCtrl', ['$scope', function ($scope) {
@@ -62,4 +67,52 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) {
 	$scope.ranks = GetRanks();
 	$scope.nutrients = GetNutrients();
 	$scope.operations = GetOperations();
+
+	$scope.getCategoryIndexFromName = function(categoryName) {
+		for(var i = 0; i < $scope.categories.length; i++) {
+			if($scope.categories[i].name == categoryName) {
+				return i;
+			}
+		}
+		return -1;
+	};
+
+	$scope.addRule = function(categoryName) {
+		var categoryIndex = $scope.getCategoryIndexFromName(categoryName);
+		if(categoryIndex != -1) {
+			$scope.categories[categoryIndex].rules.push({ nutrient: 'sugar',
+				rule_id: '0',
+				ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+									{ name: 'yellow', operation: 'gt', value: 2 } ] });
+		}
+
+	};
+
+	$scope.removeRule = function(category, rule) {
+		for(var i = 0; i < category.rules.length; i++) {
+			if(category.rules[i] == rule) {
+				category.rules.splice(i, 1);
+			}
+		}
+	};
+
+	$scope.addCategory = function() {
+		$scope.categories.push({name: 'New Category', rules: []})
+	};
+
+	$scope.renameCategory = function(category, name) {
+		console.log(name);
+	};
+
+	$scope.removeCategory = function(category) {
+		for(var i = 0; i < $scope.categories.length; i++) {
+			if($scope.categories[i] == category) {
+				$scope.categories.splice(i, 1);
+			}
+		}
+	};
+
+	$scope.saveData = function() {
+		SaveData($scope.categories);
+	};
 }]);
diff --git a/app/pages/categories/style.styl b/app/pages/categories/style.styl
@@ -7,3 +7,7 @@
 .collapsible-header {
 	text-transform:capitalize;
 }
+
+select {
+	display:block!important;
+}
diff --git a/app/pages/categories/view.html b/app/pages/categories/view.html
@@ -6,43 +6,55 @@
 		      <div class="collapsible-header">{{ category.name }}</div>
 		      <div class="collapsible-body">
 						<div class="row">
+							<div class="col s12">
+								<div class="input-field col s6">
+				          <input placeholder="Placeholder" id="first_name" type="text" class="validate" ng-model="category.name">
+				          <label for="first_name">Category Name</label>
+				        </div>
+								<button class="btn grey lighten-2" style="float:right" ng-click="removeCategory(category)">Delete Category</button>
+							</div>
 					    <div class="col s12">
-					    	<table>
+					    	<table class="categoryTable">
 					    		<thead>
 					    			<tr>
 					    				<th>Nutrient</th>
 											<th ng-repeat="rank in ranks">{{rank}} condition</th>
+											<th></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">
+														<select>
 															<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}}">
+													<select>
 														<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}}">
+													<input type="number" value="{{rank.value | number}}">
 												</div>
 											</td>
+											<td><button class="btn red" ng-click="removeRule(category, rule)"><i class="material-icons">delete</i></button></td>
 										</tr>
 									</tbody>
 					    	</table>
+								<button ng-click="addRule(category.name)" class="btn">Add Rule</button>
 					    </div>
 					  </div>
 					</div>
 		    </li>
 		  </ul>
+			<button class="btn blue" ng-click="addCategory()" onclick="UpdateTextFields()">Add Category</button>
+			<button class="btn" ng-click="saveData()">Save</button>
 		</div>
-		<div class="col s12 m3">
+		<!--<div class="col s12 m3">
 			<div class="card grey darken-3">
 				<div class="card-content white-text">
 					<span class="card-title">Filter</span>
@@ -59,14 +71,18 @@
 					</div>
 				</div>
 			</div>
-		</div>
+		</div>-->
 	</div>
 </div>
 
 <script>
+function UpdateTextFields() {
+	setTimeout(function() {
+		Materialize.updateTextFields();
+	}, 100);
+}
 $(document).ready(function(){
   $('.collapsible').collapsible();
-	$('select').material_select();
 	Materialize.updateTextFields();
 });
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -41,6 +41,9 @@ ul.tabs .tab a:hover {
 .collapsible-header {
   text-transform: capitalize;
 }
+select {
+  display: block !important;
+}
 .food-search {
   padding-top: 0.5em;
 }

diff --git a/assets/js/bundle.js b/assets/js/bundle.js
@@ -108,15 +108,6 @@ app.controller('404Ctrl', ['$scope', function ($scope) {
 }]);
 
 
-app.controller('FoodCtrl', ['$scope', function ($scope) {
-  $scope.page.title = 'Food';
-  $scope.page.id = 'food';
-  $scope.page.yourVar = "globalStuff";
-
-  $scope.var2 = "localStuff";
-}]);
-
-
 
 function GetCategories() {
 	return [
@@ -167,9 +158,14 @@ function GetNutrients() {
 
 function GetOperations() {
 	return [{name: 'lt', symbol: 'Less Than'},
-					{name: 'ltoe', symbol: 'Less Than or Equal'},
+					{name: 'lte', symbol: 'Less Than or Equal'},
 					{name: 'gt', symbol: 'Greater Than'},
-					{name: 'gtoe', symbol: 'Greater Than or Equal'}];
+					{name: 'gte', symbol: 'Greater Than or Equal'},
+					{name: 'e', symbol: 'Equal To'}];
+}
+
+function SaveData(categories) {
+	console.log('save');
 }
 
 app.controller('CategoryCtrl', ['$scope', function ($scope) {
@@ -181,6 +177,63 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) {
 	$scope.ranks = GetRanks();
 	$scope.nutrients = GetNutrients();
 	$scope.operations = GetOperations();
+
+	$scope.getCategoryIndexFromName = function(categoryName) {
+		for(var i = 0; i < $scope.categories.length; i++) {
+			if($scope.categories[i].name == categoryName) {
+				return i;
+			}
+		}
+		return -1;
+	};
+
+	$scope.addRule = function(categoryName) {
+		var categoryIndex = $scope.getCategoryIndexFromName(categoryName);
+		if(categoryIndex != -1) {
+			$scope.categories[categoryIndex].rules.push({ nutrient: 'sugar',
+				rule_id: '0',
+				ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+									{ name: 'yellow', operation: 'gt', value: 2 } ] });
+		}
+
+	};
+
+	$scope.removeRule = function(category, rule) {
+		for(var i = 0; i < category.rules.length; i++) {
+			if(category.rules[i] == rule) {
+				category.rules.splice(i, 1);
+			}
+		}
+	};
+
+	$scope.addCategory = function() {
+		$scope.categories.push({name: 'New Category', rules: []})
+	};
+
+	$scope.renameCategory = function(category, name) {
+		console.log(name);
+	};
+
+	$scope.removeCategory = function(category) {
+		for(var i = 0; i < $scope.categories.length; i++) {
+			if($scope.categories[i] == category) {
+				$scope.categories.splice(i, 1);
+			}
+		}
+	};
+
+	$scope.saveData = function() {
+		SaveData($scope.categories);
+	};
+}]);
+
+
+app.controller('FoodCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Food';
+  $scope.page.id = 'food';
+  $scope.page.yourVar = "globalStuff";
+
+  $scope.var2 = "localStuff";
 }]);