Skip to content

Commit

Permalink
Merge branch 'feature/categories' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Timothy Morris committed Feb 13, 2017
2 parents bf45658 + 19bc894 commit d532ee0
Show file tree
Hide file tree
Showing 5 changed files with 304 additions and 147 deletions.
115 changes: 113 additions & 2 deletions app/pages/categories/ctrl.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,118 @@

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: 'lte', symbol: 'Less Than or Equal'},
{name: 'gt', symbol: 'Greater Than'},
{name: 'gte', symbol: 'Greater Than or Equal'},
{name: 'e', symbol: 'Equal To'}];
}

function SaveData(categories) {
console.log('save');
}

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();

$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);
};
}]);
13 changes: 13 additions & 0 deletions app/pages/categories/style.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.collapsible-body {
padding: 1em;
box-sizing:border-box;
}

.card-title,
.collapsible-header {
text-transform:capitalize;
}

select {
display:block!important;
}
197 changes: 54 additions & 143 deletions app/pages/categories/view.html
Original file line number Diff line number Diff line change
@@ -1,144 +1,65 @@
<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 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>
</div>
<div class="col s12">
<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>
<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>
<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" 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>
<p>I'd put more, but then I'd have to change lots of ID's... you get the idea #lazydev</p>
<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 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">
Expand All @@ -150,28 +71,18 @@ <h4>Nutrients</h4>
</div>
</div>
</div>
</div>
</div>-->
</div>
</div>

<script>
function UpdateTextFields() {
setTimeout(function() {
Materialize.updateTextFields();
}, 100);
}
$(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',
}],
});
Materialize.updateTextFields();
});
</script>
11 changes: 11 additions & 0 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,17 @@ 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;
}
select {
display: block !important;
}
.food-search {
padding-top: 0.5em;
}
Expand Down
Loading

0 comments on commit d532ee0

Please sign in to comment.