From c3bce202c1de0577f49f4434f557d3a96d3f48d8 Mon Sep 17 00:00:00 2001
From: Mike Shoup <mike@shoup.io>
Date: Wed, 10 Jul 2019 16:05:34 -0600
Subject: [PATCH] Add progressbars for recipe specs

---
 src/humulus/static/style.css            |  5 ++
 src/humulus/templates/_macros.html      | 61 ++++++++++++++++++-------
 src/humulus/templates/recipes/info.html | 50 ++++++++++++++++----
 3 files changed, 89 insertions(+), 27 deletions(-)

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/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/info.html b/src/humulus/templates/recipes/info.html
index d55e07c..ae67641 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 %}
@@ -44,11 +44,11 @@
     <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>
@@ -58,21 +58,51 @@
   <div class="col">
     <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>
+      <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>
       <dt>Alcohol</dt>
-      <dd>{{ recipe|recipe_abv }} %/vol.</dd>
+      <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>
     </dl>
   </div>
   <div class="col">
     <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>
+      <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>
@@ -175,9 +205,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>