Display visual progress for billing usage stats

Signed-off-by: Michal Čihař <michal@cihar.com>

weblate/html/accounts/profile.html

@@ -349,13 +349,29 @@
 
   {% with billing.plan as plan %}
   <table class="table">
-  <tr><th>{% trans "Current plan" %}</th><td>{{ plan.name }}<a href="https://weblate.org/hosting/" class="btn btn-default btn-xs pull-right flip">{% trans "See other plans" %}</a></td></tr>
-  <tr><th>{% trans "Monthly price" %}</th><td>{{ plan.price }} EUR</td></tr>
-  <tr><th>{% trans "Yearly price" %}</th><td>{{ plan.yearly_price }} EUR</td></tr>
-  <tr><th>{% trans "Strings limit" %}</th><td>{% blocktrans with plan.display_limit_strings as total and billing.count_strings as used %}Used {{ used }} from {{ total }}{% endblocktrans %}</td></tr>
-  <tr><th>{% trans "Languages limit" %}</th><td>{% blocktrans with plan.display_limit_languages as total and billing.count_languages as used %}Used {{ used }} from {{ total }}{% endblocktrans %}</td></tr>
-  <tr><th>{% trans "Repositories limit" %}</th><td>{% blocktrans with plan.display_limit_repositories as total and billing.count_repositories as used %}Used {{ used }} from {{ total }}{% endblocktrans %}</td></tr>
-  <tr><th>{% trans "Projects limit" %}</th><td>{% blocktrans with plan.display_limit_projects as total and billing.projects.count as used %}Used {{ used }} from {{ total }}{% endblocktrans %}</td></tr>
+  <tr><th>{% trans "Current plan" %}</th><td>{{ plan.name }}</td><td><a href="https://weblate.org/hosting/" class="btn btn-default btn-xs pull-right flip">{% trans "See other plans" %}</a></td></tr>
+  <tr><th>{% trans "Monthly price" %}</th><td>{{ plan.price }} EUR</td><td></td></tr>
+  <tr><th>{% trans "Yearly price" %}</th><td>{{ plan.yearly_price }} EUR</td><td></td></tr>
+  <tr><th>{% trans "Strings limit" %}</th>
+  {% with plan.display_limit_strings as total and billing.count_strings as used %}
+  {% include "billing-used.html" %}
+  {% endwith %}
+  </tr>
+  <tr><th>{% trans "Languages limit" %}</th>
+  {% with plan.display_limit_languages as total and billing.count_languages as used %}
+  {% include "billing-used.html" %}
+  {% endwith %}
+  </tr>
+  <tr><th>{% trans "Repositories limit" %}</th>
+  {% with plan.display_limit_repositories as total and billing.count_repositories as used %}
+  {% include "billing-used.html" %}
+  {% endwith %}
+  </tr>
+  <tr><th>{% trans "Projects limit" %}</th>
+  {%  with plan.display_limit_projects as total and billing.projects.count as used %}
+  {% include "billing-used.html" %}
+  {% endwith %}
+  </tr>
   </table>
   {% endwith %}
 </div>

weblate/html/billing-used.html

+{% load i18n %}
+
+<td>
+{% if total == 0 %}
+{% blocktrans %}Used {{ used }}{% endblocktrans %}
+{% else %}
+{% blocktrans %}Used {{ used }} from {{ total }}{% endblocktrans %}
+{% endif %}
+</td>
+<td>
+
+<div class="progress">
+{% if total == 0 %}
+  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
+{% else %}
+{% if used > total %}
+  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
+{% else %}
+  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ used }}" aria-valuemin="0" aria-valuemax="{{ total }}" style="width: {% widthratio used total 100 %}%;"></div>
+{% endif %}
+{% endif %}
+</div>
+</td>