Create component 'usage_progress_bar'.

This commit is contained in:
Santiago Lamora 2019-12-04 14:13:33 +01:00
parent fd6df8c4b0
commit 525f17e8b5
2 changed files with 18 additions and 8 deletions

View File

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

View File

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