Skip to content

Commit

Permalink
begin api receiving setup
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsm15002
tsm15002 committed Dec 13, 2016
1 parent cb545df commit 040d636
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 154 deletions.
62 changes: 60 additions & 2 deletions app/pages/categories/ctrl.js
View file
Original file line number Diff line number Diff line change
@@ -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();
}]);
9 changes: 9 additions & 0 deletions app/pages/categories/style.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.collapsible-body {
padding: 1em;
box-sizing:border-box;
}

.card-title,
.collapsible-header {
text-transform:capitalize;
}
183 changes: 39 additions & 144 deletions app/pages/categories/view.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
8 changes: 8 additions & 0 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
74 changes: 66 additions & 8 deletions assets/js/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}]);


Expand Down

0 comments on commit 040d636

Please sign in to comment.