manager: add occupation indicator to event bars

chrono/manager/static/css/style.css

@@ -0,0 +1,10 @@
+.occupation-bar {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	height: 3px;
+	background: #cce;
+	transition: max-width 300ms ease-in;
+	max-width: 0%;
+	width: 100%;
+}

chrono/manager/static/js/chrono.manager.js

@@ -0,0 +1,7 @@
+$(function() {
+  $('[data-total]').each(function() {
+    var total = $(this).data('total');
+    var booked = $(this).data('booked');
+    $(this).find('.occupation-bar').css('max-width', 100 * booked / total + '%');
+  });
+});

chrono/manager/templates/chrono/manager_agenda_view.html

@@ -23,11 +23,12 @@
 <div>
   <ul class="objects-list single-links">
     {% for event in object.event_set.all %}
-    <li><a rel="popup" href="{% url 'chrono-manager-event-edit' pk=event.id %}">
+    <li data-total="{{event.places}}" data-booked="{{event.booked_places}}"><a rel="popup" href="{% url 'chrono-manager-event-edit' pk=event.id %}">
         {% if event.label %}{{event.label}} / {% endif %}
         {% blocktrans with start=event.start_datetime places=event.places booked_places=event.booked_places %}
         {{ start }} ({{ places }} places, {{ booked_places }} booked places)
             {% endblocktrans %}</a>
+        <span class="occupation-bar"></span>
     </li>
     {% endfor %}
   </ul>

chrono/manager/templates/chrono/manager_base.html

@@ -4,6 +4,7 @@
 {% block extrascripts %}
 {{ block.super }}
 <link rel="stylesheet" type="text/css" media="all" href="{% static 'css/datetimepicker.css' %}" />
+<script src="{% static 'js/chrono.manager.js' %}"></script>
 <script src="{% static 'js/bootstrap-datetimepicker.js' %}"></script>
 <script src="{% static 'js/locales/bootstrap-datetimepicker.fr.js' %}"></script>
 {% endblock %}