Sith/counter/templates/counter/activity.jinja

{% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import user_profile_link %}

{% block title %}
  {% trans counter_name=counter %}{{ counter_name }} activity{% endtrans %}
{% endblock %}

{% block additional_js %}
  <script defer src="{{ static('webpack/graph-index.ts') }}"></script>
{% endblock %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('counter/css/activity.scss') }}">
{%- endblock -%}

{% block content %}
  <h3>{% trans counter_name=counter %}{{ counter_name }} activity{% endtrans %}</h3>
  {% if counter.type == 'BAR' %}
    <h4>{% trans %}Barmen list{% endtrans %}</h4>
    <ul>
      {% if counter.barmen_list | length > 0 %}
        {% for b in counter.barmen_list %}
          <li>{{ user_profile_link(b) }}</li>
        {% endfor %}
      {% else %}
        {% trans %}There is currently no barman connected.{% endtrans %}
      {% endif %}
    </ul>
    <h4>{% trans %}Last Week Activity {% endtrans %}</h4>
    <div id="activityGraph" width="400" height="200"></div>
    <br/>
  {% endif %}

  <h5>{% trans %}Legend{% endtrans %}</h5>
  <div class="activity-description">
    <div>
      <i class="fa fa-check" style="color: #2ecc71"></i>
      <span>{% trans %}counter is open, there's at least one barman connected{% endtrans %}</span>
    </div>
    <div>
      <i class="fa fa-times" style="color: #eb2f06"></i>
      <span>{% trans %}counter is not open : no one is connected{% endtrans %}</span>
    </div>
  </div>
{% endblock %}

{% block script %}
  {{super()}}
  <script>
    window.addEventListener("DOMContentLoaded", () => {
      loadChart({
        canvas: document.getElementById("activityGraph"),
        startDate: new Date().setDate(new Date().getDate() - 7),
        counterId: {{ counter.id }},
      });
    });
  </script>
{% endblock %}