Sith/counter/templates/counter/counter_click.jinja

{% extends "core/base.jinja" %}
{% from "core/macros.jinja" import user_mini_profile, user_subscription %}

{% block title %}
  {{ counter }}
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
  <link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
{% endblock %}

{% block additional_js %}
  <script type="module" src="{{ static('bundled/counter/counter-click-index.ts') }}"></script>
  <script type="module" src="{{ static('bundled/counter/components/counter-product-select-index.ts') }}"></script>
{% endblock %}

{% block info_boxes %}
{% endblock %}


{% block nav %}
{% endblock %}

{% block content %}
  <h4 id="click_interface">{{ counter }}</h4>

  <div id="bar-ui" x-data="counter">
    <noscript>
      <p class="important">Javascript is required for the counter UI.</p>
    </noscript>

    <div id="user_info">
      <h5>{% trans %}Customer{% endtrans %}</h5>
      {{ user_mini_profile(customer.user) }}
      {{ user_subscription(customer.user) }}
      <p>{% trans %}Amount: {% endtrans %}<span x-text="customerBalance"></span> €</p>
    </div>

    <div id="click_form" style="width: 20%;">
      <h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
      <div>
        {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}

                {# Formulaire pour rechercher un produit en tapant son code dans une barre de recherche #}
        <form method="post" action=""
              class="code_form" @submit.prevent="handleCode">
          {% csrf_token %}

          <input type="hidden" name="action" value="code">

          <counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
            <option value=""></option>
            <optgroup label="{% trans %}Operations{% endtrans %}">
              <option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
              <option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
            </optgroup>
            {% for category in categories.keys() %}
              <optgroup label="{{ category }}">
                {% for product in categories[category] %}
                  <option value="{{ product.code }}">{{ product }}</option>
                {% endfor %}
              </optgroup>
            {% endfor %}
          </counter-product-select>

          <input type="submit" value="{% trans %}Go{% endtrans %}"/>
        </form>

        <template x-for="error in errors">
          <div class="alert alert-red" x-text="error">
          </div>
        </template>
        <p>{% trans %}Basket: {% endtrans %}</p>

        <ul>
          <template x-for="[id, item] in Object.entries(basket)" :key="id">
            <div>
              <form method="post" action="" class="inline del_product_form"
                    @submit.prevent="handleAction">
                {% csrf_token %}
                <input type="hidden" name="action" value="del_product">
                <input type="hidden" name="product_id" :value="id">
                <input type="submit" value="-"/>
              </form>

              <span x-text="item['qty'] + item['bonus_qty']"></span>

              <form method="post" action="" class="inline add_product_form"
                    @submit.prevent="handleAction">
                {% csrf_token %}
                <input type="hidden" name="action" value="add_product">
                <input type="hidden" name="product_id" :value="id">
                <input type="submit" value="+">
              </form>

              <span x-text="products[id].name"></span> :
              <span x-text="(item['qty'] * item['price'] / 100)
                            .toLocaleString(undefined, { minimumFractionDigits: 2 })">
              </span> €
              <template x-if="item['bonus_qty'] > 0">P</template>
            </div>
          </template>
        </ul>
        <p>
          <strong>Total: </strong>
          <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
          <strong> €</strong>
        </p>

        <form method="post"
              action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
          {% csrf_token %}
          <input type="hidden" name="action" value="finish">
          <input type="submit" value="{% trans %}Finish{% endtrans %}"/>
        </form>
        <form method="post"
              action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
          {% csrf_token %}
          <input type="hidden" name="action" value="cancel">
          <input type="submit" value="{% trans %}Cancel{% endtrans %}"/>
        </form>
      </div>
      {% if object.type == "BAR" %}
        <h5>{% trans %}Refilling{% endtrans %}</h5>
        {% if refilling_fragment %}
          <div
            @htmx:after-request="onRefillingSuccess"
          >
            {{ refilling_fragment }}
          </div>
        {% else %}
          <div>
            <p class="alert alert-yellow">
              {% trans trimmed %}
                As a barman, you are not able to refill any account on your own.
                An admin should be connected on this counter for that.
                The customer can refill by using the eboutic.
              {% endtrans %}
            </p>
          </div>
        {% endif %}
        {% if student_card_fragment %}
          <h5>{% trans %}Student card{% endtrans %}</h3>
          <div>
            {{ student_card_fragment }}
          </div>
        {% endif %}

      {% endif %}
    </div>

    <div id="products">
      <ul>
        {% for category in categories.keys() -%}
          <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
        {%- endfor %}
      </ul>
      {% for category in categories.keys() -%}
        <div id="cat_{{ category|slugify }}">
          <h5>{{ category }}</h5>
          {% for p in categories[category] -%}
            <form method="post"
                  action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}"
                  class="form_button add_product_form" @submit.prevent="handleAction">
              {% csrf_token %}
              <input type="hidden" name="action" value="add_product">
              <input type="hidden" name="product_id" value="{{ p.id }}">
              <button type="submit">
                <strong>{{ p.name }}</strong>
                {% if p.icon %}
                  <img src="{{ p.icon.url }}" alt="image de {{ p.name }}"/>
                {% else %}
                  <img src="{{ static('core/img/na.gif') }}" alt="image de {{ p.name }}"/>
                {% endif %}
                <span>{{ p.price }} €<br>{{ p.code }}</span>
              </button>
            </form>
          {%- endfor %}
        </div>
      {%- endfor %}
    </div>
  </div>
{% endblock content %}

{% block script %}
  {{ super() }}
  <script>
    const products = {
      {%- for p in products -%}
        {{ p.id }}: {
          code: "{{ p.code }}",
          name: "{{ p.name }}",
          price: {{ p.price }},
        },
      {%- endfor -%}
    };
    window.addEventListener("DOMContentLoaded", () => {
      loadCounter({
        csrfToken: "{{ csrf_token }}",
        clickApiUrl: "{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}",
        sessionBasket: {{ request.session["basket"]|tojson }},
        customerBalance: {{ customer.amount }},
        customerId: {{ customer.pk }},
      });
    });
  </script>
{% endblock script %}