From 3e79dd086fb4c29f0d0954de6f21169cc9f1964c Mon Sep 17 00:00:00 2001
From: Mike Shoup <mike@shoup.io>
Date: Thu, 11 Jul 2019 09:05:06 -0600
Subject: [PATCH] Add progressbars to recipe stats (#23)

Closes #20
---
 src/humulus/static/recipes.js              | 106 +++++++++++++++++----
 src/humulus/static/style.css               |   5 +
 src/humulus/styles.py                      |  28 +++++-
 src/humulus/templates/_base.html           |   2 +-
 src/humulus/templates/_macros.html         |  61 ++++++++----
 src/humulus/templates/recipes/_macros.html |  26 +++--
 src/humulus/templates/recipes/info.html    |  66 +++++++++----
 tests/test_styles.py                       |  20 ++++
 8 files changed, 255 insertions(+), 59 deletions(-)

diff --git a/src/humulus/static/recipes.js b/src/humulus/static/recipes.js
index c6daad4..c105df7 100644
--- a/src/humulus/static/recipes.js
+++ b/src/humulus/static/recipes.js
@@ -14,6 +14,25 @@
   limitations under the License.
 */
 
+// Calculate percentage and background color for display functions
+function calculatePct(value, low, high) {
+  var pct = Math.round(100 * (value-low )/ (high - low));
+  var color = 'bg-success';
+  if (pct > 85) {
+    color = 'bg-danger';
+    if (pct > 100) {
+      pct = 100;
+    }
+  } else if (pct <=15 ) {
+    color = 'bg-warning';
+    if (pct <= 0) {
+      pct = 5; // We want a little bit of bar showing
+    }
+  }
+
+  return {pct: pct, color: color};
+}
+
 // unbinds and re-binds the change event
 function rebindChangeEvents() {
   $('.ingredient-field').unbind('change');
@@ -90,7 +109,7 @@ function addFerm() {
                 // Type field
                 '<div class="col-sm"><div class="form-group">' +
                 `<label for="fermentables-${fermsLength}-type">Type</label>` +
-                `<select class="form-control form-control-sm ingredient-field" id="fermentables-${fermsLength}-type"` +
+                `<select class="custom-select custom-select-sm ingredient-field" id="fermentables-${fermsLength}-type"` +
                 ` name="fermentables-${fermsLength}-type" required>` +
                 '<option value="Grain">Grain</option>' +
                 '<option value="LME">LME</option>' +
@@ -152,7 +171,7 @@ function addHop() {
                 // Usage field
                 '<div class="col-sm"><div class="form-group">' +
                 `<label for="hops-${hopsLength}-use">Usage</label>` +
-                `<select class="form-control form-control-sm ingredient-field" id="hops-${hopsLength}-use"` +
+                `<select class="custom-select custom-select-sm ingredient-field" id="hops-${hopsLength}-use"` +
                 ` name="hops-${hopsLength}-use" required>` +
                 '<option value="Boil">Boil</option>' +
                 '<option value="FWH">FWH</option>' +
@@ -220,8 +239,16 @@ function calculateOG() {
 }
 
 // display OG
-function displayOG() {
-  $('#estimated-og').text(calculateOG().toFixed(3));
+function displayOG(data) {
+  var og = calculateOG().toFixed(3);
+  if (data !== null) {
+    var result = calculatePct(og, data.og.low, data.og.high)
+    $('#estimated-og').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${og}" aria-valuemin="${data.og.low}" ` +
+      `aria-valuemax="${data.og.high}">${og}</div></div>`);
+  } else {
+    $('#estimated-og').text(og);
+  }
 }
 
 // Calculate final gravity
@@ -249,8 +276,16 @@ function calculateFG() {
 }
 
 // Display FG
-function displayFG() {
-  $('#estimated-fg').text(calculateFG().toFixed(3));
+function displayFG(data) {
+  var fg = calculateFG().toFixed(3);
+  if (data !== null) {
+    var result = calculatePct(fg, data.fg.low, data.fg.high)
+    $('#estimated-fg').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${fg}" aria-valuemin="${data.fg.low}" ` +
+      `aria-valuemax="${data.fg.high}">${fg}</div></div>`);
+  } else {
+    $('#estimated-fg').text(fg);
+  }
 }
 
 // Calculate ABV
@@ -259,9 +294,16 @@ function calculate_abv() {
 }
 
 // Display ABV
-function displayABV() {
+function displayABV(data) {
   var abv = calculate_abv().toFixed(1);
-  $('#estimated-abv').text(`${abv} %/vol.`);
+  if (data !== null) {
+    var result = calculatePct(abv, data.abv.low, data.abv.high)
+    $('#estimated-abv').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${abv}" aria-valuemin="${data.abv.low}" ` +
+      `aria-valuemax="${data.abv.high}">${abv} %/vol.</div></div>`);
+  } else {
+    $('#estimated-abv').text(`${abv} %/vol.`);
+  }
 }
 
 // Calculate IBU
@@ -290,9 +332,17 @@ function calculateIBU() {
 }
 
 // Display IBU
-function displayIBU() {
+function displayIBU(data) {
   var ibu = calculateIBU().toFixed();
-  $('#estimated-ibu').text(`${ibu} IBU`);
+
+  if (data !== null) {
+    var result = calculatePct(ibu, data.ibu.low, data.ibu.high)
+    $('#estimated-ibu').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${ibu}" aria-valuemin="${data.ibu.low}" ` +
+      `aria-valuemax="${data.ibu.high}">${ibu} IBU</div></div>`);
+  } else {
+    $('#estimated-ibu').text(`${ibu} IBU`);
+  }
 }
 
 // Calculate IBU Ratio
@@ -323,19 +373,39 @@ function calculateSRM() {
 }
 
 // Display SRM
-function displaySRM() {
+function displaySRM(data) {
   var srm = calculateSRM().toFixed();
-  $('#estimated-srm').text(`${srm} SRM`);
+  if (data !== null) {
+    var result = calculatePct(srm, data.srm.low, data.srm.high)
+    $('#estimated-srm').html(`<div class="progress spec-progress"><div class="progress-bar ${result.color}" ` +
+      `role="progressbar" style="width: ${result.pct}%;" aria-valuenow="${srm}" aria-valuemin="${data.srm.low}" ` +
+      `aria-valuemax="${data.srm.high}">${srm} SRM</div></div>`);
+  } else {
+    $('#estimated-srm').text(`${srm} SRM`);
+  }
 }
 
 // Display all specifications
 function displayAll() {
-  displayOG();
-  displayFG();
-  displayABV();
-  displayIBU();
-  displayIBURatio();
-  displaySRM();
+  $.getJSON(getSpecsURL()).done(
+    function (json) {
+      displayOG(json);
+      displayFG(json);
+      displayABV(json);
+      displayIBU(json);
+      displayIBURatio();
+      displaySRM(json);
+    }
+  ).fail(
+    function () {
+      displayOG(null);
+      displayFG(null);
+      displayABV(null);
+      displayIBU(null);
+      displayIBURatio();
+      displaySRM(null);
+    }
+  );
 }
 
 $(document).ready(function() {
diff --git a/src/humulus/static/style.css b/src/humulus/static/style.css
index d660aa8..762ee59 100644
--- a/src/humulus/static/style.css
+++ b/src/humulus/static/style.css
@@ -35,3 +35,8 @@ body {
 .above-footer {
   padding-bottom: 14rem;
 }
+
+.spec-progress {
+  height: 1.5rem;
+  font-size: 1.125rem;
+}
diff --git a/src/humulus/styles.py b/src/humulus/styles.py
index c7c4334..5424ef8 100644
--- a/src/humulus/styles.py
+++ b/src/humulus/styles.py
@@ -19,7 +19,8 @@ import xml.etree.ElementTree as ET
 
 import click
 import requests
-from flask import Blueprint, abort, current_app, render_template, request
+from flask import (Blueprint, abort, current_app, render_template, request,
+                   jsonify)
 from flask.cli import with_appcontext
 
 from humulus.auth import login_required
@@ -168,6 +169,31 @@ def info(id):
     return render_template('styles/info.html', style=get_doc_or_404(id))
 
 
+@bp.route('/info/<id>/json')
+@login_required
+def info_json(id):
+    """Returns JSON for the style.
+
+    If the 'specs' argument is present (regardless of value), only return
+    specs.
+    """
+    style = get_doc_or_404(id)
+    # Remove fields not needed for specs
+    if request.args.get('specs', None) is not None:
+        return jsonify({
+            'ibu': style['ibu'],
+            'og': style['og'],
+            'fg': style['fg'],
+            'abv': style['abv'],
+            'srm': style['srm']
+        })
+    # Remove fields not needed for export
+    style.pop('_id')
+    style.pop('_rev')
+    style.pop('$type')
+    return jsonify(style)
+
+
 @bp.route('/info/<id>/recipes')
 def recipes(id):
     style = get_doc_or_404(id)
diff --git a/src/humulus/templates/_base.html b/src/humulus/templates/_base.html
index 678401e..3b7c495 100644
--- a/src/humulus/templates/_base.html
+++ b/src/humulus/templates/_base.html
@@ -57,7 +57,7 @@
         </ul>
       </div>
     </nav>
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
     <script src="{{ url_for('static', filename='moment.min.js')}}"></script>
     <main role="main" class="container">
       {% block alert %}
diff --git a/src/humulus/templates/_macros.html b/src/humulus/templates/_macros.html
index 7027bd0..c570f6d 100644
--- a/src/humulus/templates/_macros.html
+++ b/src/humulus/templates/_macros.html
@@ -49,26 +49,26 @@
 #}
 {% macro render_delete_modal(path, id, name) %}
 <div class="modal fade" id="{{ id }}" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Delete {{ name }}</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          Are you sure you want to delete "{{ name }}"?
-        </div>
-        <div class="modal-footer">
-          <form action="{{ path }}" method="post">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
-            <button title="Delete" type="submit" name="delete{{ id }}" class="btn btn-danger">Yes</button>
-          </form>
-        </div>
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Delete {{ name }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        Are you sure you want to delete "{{ name }}"?
+      </div>
+      <div class="modal-footer">
+        <form action="{{ path }}" method="post">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+          <button title="Delete" type="submit" name="delete{{ id }}" class="btn btn-danger">Yes</button>
+        </form>
       </div>
     </div>
   </div>
+</div>
 {% endmacro %}
 
 {#
@@ -77,3 +77,30 @@
 {% macro moment(timestamp, format="llll") %}
 <script>document.write(moment.utc("{{ timestamp }}").local().format("llll"));</script>
 {% endmacro %}
+
+{#
+  Render a bootstrap progressbar
+#}
+{% macro render_progressbar(value, min, max, unit='', class='') %}
+  {#
+    Determine percentage. Coerce to between 0 and 100.
+    Set an appropriate background.
+  #}
+  {% set pct = (100*(value-min))/(max-min) %}
+  {% if pct > 85 %}
+    {% set color = 'bg-danger' %}
+    {% if pct > 100 %}
+      {% set pct = 100 %}
+    {% endif %}
+  {% elif pct > 15 %}
+    {% set color = 'bg-success' %}
+  {% else %}
+    {% set color = 'bg-warning' %}
+    {% if pct <= 0 %}
+      {% set pct = 5 %} {# we want a little bit of the bar showing. #}
+    {% endif %}
+  {% endif %}
+  <div class="progress {{ class }}">
+    <div class="progress-bar {{ color }}" role="progressbar" style="width: {{ pct|int }}%;" aria-valuenow="{{ value }}" aria-valuemin="{{ min }}" aria-valuemax="{{ max }}">{{ value }}{{ unit }}</div>
+  </div>
+{% endmacro %}
diff --git a/src/humulus/templates/recipes/_macros.html b/src/humulus/templates/recipes/_macros.html
index b609fd3..6b04beb 100644
--- a/src/humulus/templates/recipes/_macros.html
+++ b/src/humulus/templates/recipes/_macros.html
@@ -15,6 +15,19 @@
 -#}
 {% from "_macros.html" import render_field_with_errors %}
 
+{#
+  Renders a javascript function to return a style's URL.
+#}
+{% macro get_specs_url() %}
+{% set id = 'ID' %}
+{% set specs = 'y' %}
+<script type="text/javascript">
+function getSpecsURL() {
+  return '{{ url_for("styles.info_json", id=id, specs=specs) }}'.replace('ID', $('#style').val());
+}
+</script>
+{% endmacro %}
+
 {#
   Used to render a form for creating/updating a recipe
 #}
@@ -30,8 +43,8 @@
     <div class="col-sm-3">{{ render_field_with_errors(form.volume, 'ingredient-field') }}</div>
   </div>
   <div class="row">
-    <div class="col-sm">{{ render_field_with_errors(form.style) }}</div>
-    <div class="col-sm">{{ render_field_with_errors(form.type) }}</div>
+    <div class="col-sm">{{ render_field_with_errors(form.style, 'ingredient-field', base_class='custom-select') }}</div>
+    <div class="col-sm">{{ render_field_with_errors(form.type, base_class='custom-select') }}</div>
   </div>
   {#-
     Fermentable Ingredients
@@ -46,7 +59,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">{{ render_field_with_errors(fermentable.form.type, 'form-control-sm ingredient-field') }}</div>
+        <div class="col-sm">{{ render_field_with_errors(fermentable.form.type, 'ingredient-field custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm">{{ render_field_with_errors(fermentable.form.amount, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(fermentable.form.ppg, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(fermentable.form.color, 'form-control-sm ingredient-field') }}</div>
@@ -77,7 +90,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">{{ render_field_with_errors(hop.form.use, 'form-control-sm ingredient-field') }}</div>
+        <div class="col-sm">{{ render_field_with_errors(hop.form.use, 'ingredient-field custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm">{{ render_field_with_errors(hop.form.alpha, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(hop.form.duration, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(hop.form.amount, 'form-control-sm ingredient-field') }}</div>
@@ -103,14 +116,14 @@
     <div class="border pl-2 pr-2 pt-1 pb-1 yeast-form">
       <div class="row">
         <div class="col-sm-6">{{ render_field_with_errors(form.yeast.form.name, 'form-control-sm') }}</div>
-        <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.type, 'form-control-sm') }}</div>
+        <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.type, 'custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.lab, 'form-control-sm') }}</div>
         <div class="col-sm-2">{{ render_field_with_errors(form.yeast.form.code, 'form-control-sm') }}</div>
       </div>
       <div class="row">
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.low_attenuation, 'form-control-sm ingredient-field') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.high_attenuation, 'form-control-sm ingredient-field') }}</div>
-        <div class="col-sm">{{ render_field_with_errors(form.yeast.form.flocculation, 'form-control-sm') }}</div>
+        <div class="col-sm">{{ render_field_with_errors(form.yeast.form.flocculation, 'custom-select-sm', base_class='custom-select') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.min_temperature, 'form-control-sm') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.max_temperature, 'form-control-sm') }}</div>
         <div class="col-sm">{{ render_field_with_errors(form.yeast.form.abv_tolerance, 'form-control-sm') }}</div>
@@ -130,6 +143,7 @@
     <div class="col"><button type="submit" class="btn btn-primary">{{ button_content }}</button></div>
   </div>
 </form>
+{{ get_specs_url() }}
 <script src="{{ url_for('static', filename='recipes.js') }}"></script>
 {% endmacro %}
 
diff --git a/src/humulus/templates/recipes/info.html b/src/humulus/templates/recipes/info.html
index d55e07c..368e282 100644
--- a/src/humulus/templates/recipes/info.html
+++ b/src/humulus/templates/recipes/info.html
@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -#}
-{% from "_macros.html" import render_field_with_errors, render_delete_button, render_delete_modal, moment %}
+{% import '_macros.html' as macros %}
 
 {% extends '_base.html' %}
 {% block title %}{{ recipe.name }}{% endblock %}
@@ -30,7 +30,7 @@
 -#}
 <div class="row border-top"><h2>Details</h2></div>
 <div class="row">
-  <div class="col">
+  <div class="col-sm">
     <dl>
       <dt>Recipe Type</dt>
       <dd>{{ recipe.type }}</dd>
@@ -40,39 +40,73 @@
       <dd>{{ recipe.volume|float|round(1) }} gal.</dd>
     </dl>
   </div>
-  <div class="col">
+  <div class="col-sm">
     <dl>
       {% if 'created' in recipe %}
       <dt>Created</dt>
-      <dd>{{ moment(recipe.created) }}</dd>
+      <dd>{{ macros.moment(recipe.created) }}</dd>
       {% endif %}
       {% if 'updated' in recipe %}
       <dt>Updated</dt>
-      <dd>{{ moment(recipe.updated) }}</dd>
+      <dd>{{ macros.moment(recipe.updated) }}</dd>
       {% endif %}
     </dl>
   </div>
 </div>
 <div class="row"><h3>Estimated Specifications</h3></div>
 <div class="row">
-  <div class="col">
+  <div class="col-sm">
     <dl>
       <dt>Original Gravity</dt>
-      <dd>{{ recipe|recipe_og }}</dd>
+      <dd>
+        {% if style %}
+          {{ macros.render_progressbar(recipe|recipe_og|float, style.og.low|float, style.og.high|float, class='spec-progress') }}
+        {% else %}
+          {{ recipe|recipe_og }}
+        {% endif %}
+      </dd>
       <dt>Final Gravity</dt>
-      <dd>{{ recipe|recipe_fg }}</dd>
-      <dt>Alcohol</dt>
-      <dd>{{ recipe|recipe_abv }} %/vol.</dd>
+      <dd>
+        {% if style %}
+          {{ macros.render_progressbar(recipe|recipe_fg|float, style.fg.low|float, style.fg.high|float, class='spec-progress') }}
+        {% else %}
+          {{ recipe|recipe_fg }}
+        {% endif %}
+      </dd>
     </dl>
   </div>
-  <div class="col">
+  <div class="col-sm">
+    <dl>
+      <dt>Alcohol</dt>
+      <dd>
+        {% if style %}
+          {{ macros.render_progressbar(recipe|recipe_abv|float, style.abv.low|float, style.abv.high|float, unit=' %/vol', class='spec-progress') }}
+        {% else %}
+          {{ recipe|recipe_abv }} %/vol.
+        {% endif %}
+      </dd>
+      <dt>Color</dt>
+      <dd>
+        {% if style %}
+          {{ macros.render_progressbar(recipe|recipe_srm|float, style.srm.low|float, style.srm.high|float, unit=' SRM', class='spec-progress') }}
+        {% else %}
+          {{ recipe|recipe_srm }} SRM
+        {% endif %}
+      </dd>
+    </dl>
+  </div>
+  <div class="col-sm">
     <dl>
       <dt>Bitterness</dt>
-      <dd>{{ recipe|recipe_ibu }} IBU</dd>
+      <dd>
+        {% if style %}
+          {{ macros.render_progressbar(recipe|recipe_ibu|float, style.ibu.low|float, style.ibu.high|float, unit=' IBU', class='spec-progress') }}
+        {% else %}
+          {{ recipe|recipe_ibu }} IBU
+        {% endif %}
+      </dd>
       <dt>Bitterness Ratio</dt>
       <dd>{{ recipe|recipe_ibu_ratio }} IBU/OG</dd>
-      <dt>Color</dt>
-      <dd>{{ recipe|recipe_srm }} SRM</dd>
     </dl>
   </div>
 </div>
@@ -175,9 +209,9 @@
 {% if session.logged_in %}
 <div class="row mt-4 pt-1 border-top">
   <a class="btn btn-secondary mr-1" href="{{ url_for('recipes.update', id=recipe._id) }}">Update Recipe</a>
-  {{ render_delete_button('Delete Recipe', 'deleteRecipe', 'btn-danger') }}
+  {{ macros.render_delete_button('Delete Recipe', 'deleteRecipe', 'btn-danger') }}
 </div>
-{{ render_delete_modal(url_for('recipes.delete', id=recipe._id), 'deleteRecipe', recipe.name) }}
+{{ macros.render_delete_modal(url_for('recipes.delete', id=recipe._id), 'deleteRecipe', recipe.name) }}
 {% endif %}
 <div class="row mt-4"><a href="{{ url_for('recipes.info_json', id=recipe._id) }}">Export JSON</a></div>
 <div class="row">Recipe revision: {{ recipe._rev }}</div>
diff --git a/tests/test_styles.py b/tests/test_styles.py
index 80a07bc..4afc118 100644
--- a/tests/test_styles.py
+++ b/tests/test_styles.py
@@ -226,3 +226,23 @@ def test_recipes(client):
     response = client.get('/styles/info/1A/recipes')
     assert response.status_code == 200
     assert b'Awesome Beer' in response.data
+
+
+def test_info_json(auth, client):
+    """Test success in retrieving a style's json document."""
+    # Test not logged in
+    response = client.get('/styles/info/1A/json')
+    assert response.status_code == 302
+
+    # Login and test
+    auth.login()
+    response = client.get('/styles/info/1A/json')
+    assert response.status_code == 200
+    assert response.is_json
+    assert response.get_json()['name'] == 'Test Style'
+
+    # Test for specs only
+    response = client.get('/styles/info/1A/json?specs=y')
+    assert response.status_code == 200
+    assert response.is_json
+    assert 'name' not in response.get_json()