From 525f17e8b56e55c1209e13b7cf122020ab75ad82 Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Wed, 4 Dec 2019 14:13:33 +0100
Subject: [PATCH] Create component 'usage_progress_bar'.

---
 .../musician/components/usage_progress_bar.html | 17 +++++++++++++++++
 musician/templates/musician/mail.html           |  9 +--------
 2 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 musician/templates/musician/components/usage_progress_bar.html

diff --git a/musician/templates/musician/components/usage_progress_bar.html b/musician/templates/musician/components/usage_progress_bar.html
new file mode 100644
index 0000000..e3772e4
--- /dev/null
+++ b/musician/templates/musician/components/usage_progress_bar.html
@@ -0,0 +1,17 @@
+{% comment %}
+Resource usage rendered as bootstrap progress bar 
+
+Expected parameter: detail
+Expected structure: dictionary or object with attributes:
+    - usage (int): 125
+    - total (int): 200
+    - unit (string): 'MB'
+    - percent (int: [0, 25, 50, 75, 100]: 75
+{% endcomment %}
+<div class="text-center">
+    {{ detail.usage }} of {{ detail.total }}{{ detail.unit }}
+</div>
+<div class="progress">
+    <div class="progress-bar bg-secondary w-{{ detail.percent }}" role="progressbar" aria-valuenow="{{ detail.usage }}"
+        aria-valuemin="0" aria-valuemax="{{ detail.total }}"></div>
+</div>
diff --git a/musician/templates/musician/mail.html b/musician/templates/musician/mail.html
index 622fdc1..f247653 100644
--- a/musician/templates/musician/mail.html
+++ b/musician/templates/musician/mail.html
@@ -28,14 +28,7 @@
             <td>{{ obj.type|capfirst }}</td>
             <td>
                 {% if obj.type == 'mailbox' %}
-                {% with obj.type_detail as detail %}
-                <div class="text-center">
-                    {{ detail.usage }} of {{ detail.total }}{{ detail.unit }}
-                </div>
-                <div class="progress">
-                    <div class="progress-bar bg-secondary w-{{ detail.percent }}" role="progressbar" aria-valuenow="{{ detail.usage }}" aria-valuemin="0" aria-valuemax="{{ detail.total }}"></div>
-                </div>
-                {% endwith %}
+                {% include "musician/components/usage_progress_bar.html" with detail=obj.type_detail %}
                 {% else %}
                 {{ obj.type_detail }}
                 {% endif %}