Sith/counter/templates/counter/counter_main.jinja

{% extends "core/base.jinja" %}

{% macro barman_logout_link(user) %}
  <form method="post" action="{{ url('counter:logout', counter_id=counter.id) }}" class="inline">
    {% csrf_token %}
    <input type="hidden" name="user_id" value="{{ user.id }}">
    <button type="submit" name="submit_param" value="submit_value" class="link-button">{{ user.get_display_name() }}</button>
  </form>
{% endmacro %}

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

{% block info_boxes %}
{% endblock %}

{% block nav %}
{% endblock %}

{% block content %}
  <h3>{% trans counter_name=counter %}{{ counter_name }} counter{% endtrans %}</h3>
  <div>
    <h3>{% trans %}Sales{% endtrans %}</h3>
    {% if last_basket %}
      <h4>{% trans %}Last selling: {% endtrans %}</h4>
      <p>{% trans %}Client: {% endtrans %}{{ last_customer }} - {% trans %}New amount: {% endtrans %}{{ new_customer_amount }} €.</p>
      <ul>
        {% for s in last_basket %}
          <li>{{ s }}</li>
        {% endfor %}
      </ul>
      <p><strong>{% trans %}Total: {% endtrans %}{{ last_total }} €</strong></p>
    {% endif %}
    {% if can_click %}
      <p>{% trans %}Enter client code:{% endtrans %}</p>
      <form method="post" action="" id="select-user-form">
        {% csrf_token %}
        {{ form }}
        <p><input type="submit" value="{% trans %}validate{% endtrans %}" /></p>
      </form>
    {% else %}
      <p>{% trans %}Please, login{% endtrans %}</p>
    {% endif %}
  </div>
  {% if counter.type == 'BAR' %}
    <h3>{% trans %}Barmen:{% endtrans %}</h3>

    {% if barmen_here %}
      <div class="row gap-2x">
        <div>
          <h4>{% trans %}On this device{% endtrans %}</h4>
          {% for b in barmen_here %}
            <p>{{ barman_logout_link(b) }}</p>
          {% endfor %}
        </div>
        <div>
          <h4>{% trans %}Elsewhere{% endtrans %}</h4>
          {% if barmen_here|length == barmen|length %}
            {# all logged barmen are logged in this session #}
            <p><em>{% trans %}No barman logged elsewhere{% endtrans %}</em></p>
          {% else %}
            {% for b in barmen %}
              {%- if b not in barmen_here -%}
                <p>{{ barman_logout_link(b) }}</p>
              {%- endif -%}
            {% endfor %}
          {% endif %}
        </div>
      </div>
    {% else %}
      {% for b in barmen %}
        <p>{{ barman_logout_link(b) }}</p>
      {% endfor %}
    {% endif %}
    {{ login_fragment }}
  {% endif %}
{% endblock %}

{% block script %}
  {{ super() }}
  <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", () => {
      {# The login form annoyingly takes priority over the code form
         This is due to the loading time of the web component
         We can't rely on DOMContentLoaded to know if the component is there so we
         periodically run a script until the field is there #}
      const autofocus = () => {
        const field = document.querySelector("input[id='id_code']");
        if (field === null){
          setTimeout(autofocus, 0.5);
          return;
        }
        field.focus();
      }
      autofocus()
    })
  </script>
{% endblock %}