Skip to content
This repository has been archived by the owner on Dec 6, 2019. It is now read-only.

Autocomplete and beer characteristics compared against style #137

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Autocomplete and beer characteristics compared against style #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e4e1399
Add an autocompelete on beer style to fit with BJCP styles
flagos Mar 31, 2017
94597b0
Add some bar background to help the user to see how far he is from a
flagos Mar 31, 2017
ca96138
add a marker for beer characteristics.
flagos Mar 31, 2017
d062771
Parse the given style and add computed values in the scope
flagos Apr 1, 2017
8e2ffd7
display style in beer characteristic
flagos Apr 1, 2017
648eabb
refactor for computing bar dimensions
flagos Apr 3, 2017
5d8d2e1
fix positionning in css
flagos Apr 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions joliebulle/static/controllers/recipes-lib/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,3 @@ var recipesApp = angular.module('recipes-lib', []);
// };

// });


74 changes: 73 additions & 1 deletion joliebulle/static/controllers/recipes-lib/recipes-lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ recipesApp.controller('RecipeslibCtrl', ['$scope', '$http', '$filter', function
});
}
recipe.oldVolume = recipe.volume;
$scope.parseStyle($scope.currentRecipe.style, $scope.styles_xml);

};

Expand Down Expand Up @@ -403,11 +404,82 @@ recipesApp.controller('RecipeslibCtrl', ['$scope', '$http', '$filter', function
// };



$scope.addToJournal = function (event) {
main.addToJournal(event, $scope.currentRecipe.name);

};


$scope.clip = function(value, max, min) {
if (value > max) {
return 100;
}
if (value < min){
return 0;
}
return 100 * (value -min)/(max - min);
};

$scope.parseStyle = function (style, xml) {
var style_xml = $(xml).find("class[type='beer'] subcategory name:contains('"+style+"')").first().parent();
var style_ref = {};
style_ref.id = $(style_xml).attr('id');

style_ref.ibu = {};
style_ref.ibu.low = $(style_xml).find("ibu low").first().text();
style_ref.ibu.high = $(style_xml).find("ibu high").first().text();

style_ref.ebc = {};
style_ref.ebc.low = $(style_xml).find("srm low").first().text()*1.97;
style_ref.ebc.high = $(style_xml).find("srm high").first().text()*1.97;

style_ref.og = {};
style_ref.og.low = $(style_xml).find("og low").first().text();
style_ref.og.high = $(style_xml).find("og high").first().text();

style_ref.fg = {};
style_ref.fg.low = $(style_xml).find("fg low").first().text();
style_ref.fg.high = $(style_xml).find("fg high").first().text();

style_ref.bugu = {};
style_ref.bugu.low = style_ref.ibu.low/((style_ref.og.low-1)*1000);
style_ref.bugu.high = style_ref.ibu.high/((style_ref.og.high-1)*1000);

style_ref.abv = {};
style_ref.abv.low = $(style_xml).find("abv low").first().text();
style_ref.abv.high = $(style_xml).find("abv high").first().text();

$scope.style_ref = style_ref;
console.log(style_ref);
};

$.get( "https://raw.githubusercontent.com/seth-k/BJCP-styles-XML/master/styleguide-2015.xml",
function( data ) {
$scope.styles_xml = data;

var recipes = [];
$(data).find("class[type='beer'] subcategory name").each(function(){
recipes.push($(this).text())
});


$( "#currentRecipeStyle" ).autocomplete({
source: recipes,
select: function( event, ui ) {
if (ui.item.label != null) {
$scope.currentRecipe.style= ui.item.label;
$scope.parseStyle($scope.currentRecipe.style, data);
}
return true;
},
change: function( event, ui ) {
if (ui.item.label != null) {
$scope.currentRecipe.style= ui.item.label;
$scope.parseStyle($scope.currentRecipe.style, data);
}
return true;
},
});
});

}]);
34 changes: 33 additions & 1 deletion joliebulle/static/css/library.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,39 @@ border:none;
border:none;
}

.calculated{color:#999; font-weight: bold; padding-top: 1.1em;padding-bottom: 1.1em; max-width:100px; min-width:75px; }
.calculated{
color:#999;
font-weight: bold;
padding-top: 1.1em;
padding-bottom: 1.1em;
min-width:75px;
height : 51px;
}

.calculated bubble {
max-width:100px;
}

.calculated .background-range {
width: 100%;
background: rgb(224, 224, 224);
height: 5px;
margin-top: 10px;
}


.beer-style {
background: rgba(255, 165, 0, 0.66);
height: 5px;
position: absolute;
}

.beer-marker {
background: red;
width: 2px;
height: 5px;
position: absolute;
}

button.addIngredient {
color : #3498db;
Expand Down
60 changes: 52 additions & 8 deletions joliebulle/static/html/lib.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<script src="../angular/angular.min.js"></script>
<script src="../angular/angular-locale_fr-fr.js"></script>
<script src="../jquery/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../underscore/underscore-min.js"></script>
<script src="../controllers/recipes-lib/main.js"></script>
Expand All @@ -21,6 +22,7 @@
<link rel="stylesheet" href="../css/sidebar.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/library.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../css/printRecipe.css" media="print"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body ng-app="recipes-lib">
Expand Down Expand Up @@ -98,12 +100,54 @@ <h1>{{currentRecipe.name}}</h1>
</div>

<div class="recipeProfile row" >
<div class="calculated col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Amertume">{{currentRecipe.ibu}}&nbsp;IBU</div>
<div class="calculated col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Teinte">{{currentRecipe.ebc}}&nbsp;EBC</div>
<div class="calculated col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Densité initiale">DI&nbsp;{{currentRecipe.og}} </div>
<div class="calculated col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Densité finale">DF&nbsp;{{currentRecipe.fg}} </div>
<div class="calculated col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Rapport amertume / densité">BU/GU&nbsp;{{currentRecipe.bugu}}</div>
<div class="calculated col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Alcool">Alc&nbsp;{{currentRecipe.alc}} %</div>
<div class="calculated bubble col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Amertume">{{currentRecipe.ibu}}&nbsp;IBU</div>
<div class="calculated col-xs-10 col-sm-10 col-md-10" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Plage Amertume">
<div class="background-range">
<div class="beer-style" style="margin-left:{{clip(style_ref.ibu.low, 150, 0)}}%; width:{{clip(style_ref.ibu.high, 150, 0) - clip(style_ref.ibu.low, 150, 0)}}%;"></div>
<div class="beer-marker" style="margin-left:{{clip(currentRecipe.ibu, 150, 0)}}%"></div>
</div>
</div>

<div class="calculated bubble col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Teinte">{{currentRecipe.ebc}}&nbsp;EBC</div>
<div class="calculated col-xs-10 col-sm-10 col-md-10" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Plage Teinte">
<div class="background-range">
<div class="beer-style" style="margin-left:{{clip(style_ref.ebc.low, 100, 0)}}%; width:{{clip(style_ref.ebc.high, 100, 0) - clip(style_ref.ebc.low, 100, 0)}}%;"></div>
<div class="beer-marker" style="margin-left:{{clip(currentRecipe.ebc, 100, 0)}}%"></div>
</div>
</div>

<div class="calculated bubble col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Densité initiale">DI&nbsp;{{currentRecipe.og}} </div>
<div class="calculated col-xs-10 col-sm-10 col-md-10" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Plage Densite initiale">
<div class="background-range">
<div class="beer-style" style="margin-left:{{clip(style_ref.og.low, 1.120, 1.020)}}%; width:{{clip(style_ref.og.high, 1.120, 1.020) - clip(style_ref.og.low, 1.120, 1.020)}}%;"></div>
<div class="beer-marker" style="margin-left:{{clip(currentRecipe.og, 1.120, 1.020)}}%"></div>
</div>
</div>

<div class="calculated bubble col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Densité finale">DF&nbsp;{{currentRecipe.fg}} </div>
<div class="calculated col-xs-10 col-sm-10 col-md-10" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Plage Densite finale">
<div class="background-range">
<div class="beer-style" style="margin-left:{{clip(style_ref.fg.low, 1.060, 1.000)}}%; width:{{clip(style_ref.fg.high, 1.060, 1.000) - clip(style_ref.fg.low, 1.060, 1.000)}}%;"></div>
<div class="beer-marker" style="margin-left:{{clip(currentRecipe.fg, 1.060, 1.000)}}%"></div>
</div>
</div>

<div class="calculated bubble col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Rapport amertume / densité">BU/GU&nbsp;{{currentRecipe.bugu}}</div>
<div class="calculated col-xs-10 col-sm-10 col-md-10" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Plage rapport">
<div class="background-range">
<div class="beer-style" style="margin-left:{{clip(style_ref.bugu.low, 2, 0)}}%; width:{{clip(style_ref.bugu.high, 2, 0) - clip(style_ref.bugu.low, 2, 0)}}%;"></div>
<div class="beer-marker" style="margin-left:{{clip(currentRecipe.bugu, 2, 0)}}%"></div>
</div>
</div>

<div class="calculated bubble col-xs-1 col-sm-1 col-md-2" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Alcool">Alc&nbsp;{{currentRecipe.alc}} %</div>
<div class="calculated col-xs-10 col-sm-10 col-md-10" ng-show="active" data-toggle="tooltip" data-placement="bottom" title="Plage Alcool">
<div class="background-range">
<div class="beer-style" style="margin-left:{{clip(style_ref.abv.low, 14, 0)}}%; width:{{clip(style_ref.abv.high, 14, 0) - clip(style_ref.abv.low, 14, 0)}}%;"></div>
<div class="beer-marker" style="margin-left:{{clip(currentRecipe.alc, 14, 0)}}%"></div>
</div>
</div>

</div>


Expand Down Expand Up @@ -140,7 +184,7 @@ <h1>{{currentRecipe.name}}</h1>
<div class="form-group">
<label class="col-sm-6 control-label">Style</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="currentRecipe.style">
<input type="text" id="currentRecipeStyle" class="form-control" ng-model="currentRecipe.style">
</div>
</div>
<div class="form-group">
Expand Down Expand Up @@ -204,7 +248,7 @@ <h3>Ingrédients</h3>

<tbody>
<tr ng-repeat="hop in currentRecipe.hops" ng-click="editHop($index)">
<td>{{hop.name}}
<td>{{hop.name}}
<span class="bulle" ng-hide="editMode"><ul>
<li>Alpha : {{hop.alpha | number : 1}} %</li>
<li>Contribution : {{hop.ibuPart | number : 1}} IBU</li>
Expand Down