Add progressbars for recipe specs

src/humulus/static/style.css

@@ -35,3 +35,8 @@ body {
 .above-footer {
   padding-bottom: 14rem;
 }
+
+.spec-progress {
+  height: 1.5rem;
+  font-size: 1.125rem;
+}

src/humulus/templates/_macros.html

@@ -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 %}

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>