lingo/lingo/basket/templates/lingo/basket/basket_detail.html

{% extends "lingo/interstitial_base.html" %}
{% load i18n gadjo %}

{% block title %}{% trans "Basket" %}{% endblock %}

{% block extrascripts %}
  <script src="{% xstatic 'jquery' 'jquery.min.js' %}"></script>
{% endblock %}

{% block content %}
  <div class="basket-title">
    {% if request.session.back_url %}
      <a class="pk-button basket-back-link" href="{{ request.session.back_url }}"><span class="sr-only">{% trans "Back" %}</span></a>
    {% endif %}
    <h1>{% trans "My basket" %}</h1>
  </div>
  {% for message in basket.information_messages %}
    <p>{{ message }}</p>
  {% endfor %}
  <ul class="basket">
    {% for line in basket.lines %}
      {% for slug, label, description, quantity, unit_amount, total_amount in line.formatted_items %}
        <li class="basket-item">
          <a class="basket-item--label" {% if line.form_url %}href="{{ line.form_url }}{% endif %}">{{ line.user_name }} - {{ label }}{% if description %} - {{ description }}{% endif %}</a>
          <span class="basket-item--total-amount">{% blocktrans with amount=total_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
        </li>
      {% endfor %}
    {% endfor %}
  </ul>
  {% if basket.lines %}
    <ul class="basket-amounts">
      <li class="basket-amounts--total">
        <span class="basket-amounts--total--label">{% trans "Basket amount:" %}</span>
        <span class="basket-amounts--total--amount">{% blocktrans with amount=basket.total_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
      </li>
      {% if basket.credit_amount %}
        <li class="basket-amounts--credit">
          <span class="basket-amounts--credit--label">{% trans "Credit:" %}</span>
          <span class="basket-amounts--credit--amount">{% blocktrans with amount=basket.credit_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
        </li>
      {% endif %}
      <li class="basket-amounts--remaining">
        <span class="basket-amounts--remaining--label">
          {% if basket.remaining_amount < 0 %}
            {% trans "New credit:" %}
          {% else %}
            {% trans "Amount to pay:" %}
          {% endif %}
        </span>
        <span class="basket-amounts--remaining--amount">{% blocktrans with amount=basket.remaining_amount|floatformat:"2" %}{{ amount }}€{% endblocktrans %}</span>
      </li>
    </ul>

    {% if not basket.is_expired %}
      <div id="expiration">
        {% trans "Your basket expires in:" %}
        <span id="timer">
          <span id="days"></span>
          <span id="hours"></span>
          <span id="minutes"></span>
          <span id="seconds"></span>
        </span>
      </div>
    {% else %}
      <div id="expired">
        {% trans "Your basket has expired." %}
      </div>
    {% endif %}

    <a href="{% url 'lingo-basket-invoice-pdf' %}">{% trans "see invoice" %}</a>
    {% if basket.status == 'open' and not basket.is_expired %}
      <a id="validate-btn" class="pk-button" rel="popup" href="{% url 'lingo-basket-validate' %}">{% trans "Validate" %}</a>
    {% endif %}
    <a class="pk-button" rel="popup" href="{% url 'lingo-basket-cancel' %}">{% trans "Cancel" %}</a>
  {% endif %}
  <style>
    .basket-title {
      display: flex;
      align-items: center;
    }
    .basket-back-link::before {
      content: "\f104";
      font-family: "FontAwesome";
    }
    .basket-title h1 {
      margin: 0;
      flex: 1;
    }
    ul.basket, ul.basket-amounts {
      list-style: none;
      padding-left: 0;
    }
    li.basket-item, ul.basket-amounts li {
      text-align: right;
    }
  </style>
  {% if basket.lines and not basket.is_expired %}
    <script>
      $(function() {
        function makeTimer() {

          var endTime = new Date("{{ basket.expiry_at.isoformat }}");
          endTime = (Date.parse(endTime) / 1000);

          var now = new Date();
          now = (Date.parse(now) / 1000);

          var timeLeft = endTime - now;

          var days = Math.floor(timeLeft / 86400);
          var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
          var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
          var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
          if (seconds < 0 || minutes < 0 || hours < 0 || days < 0) {
            $("#timer").html("💥");
          } else {

            if (hours < "10") { hours = "0" + hours; }
            if (minutes < "10") { minutes = "0" + minutes; }
            if (seconds < "10") { seconds = "0" + seconds; }

            if (days > 0) {
              $("#days").html(days + "<span>" + "{% trans "days" %}" + "</span>");
            } else {
              $('#days').hide;
            }
            if (hours > 0) {
              $("#hours").html(hours + " <span>" + "{% trans "hours" %}" + "</span>");
            } else {
              $('#hours').hide;
            }
            $("#minutes").html(minutes + " <span>" + "{% trans "minutes" %}" + "</span>");
            var seconds_html = seconds + " <span>" + "{% trans "seconds" %}" + "</span>"
            if (days == 0 && hours == 0 && minutes == 0) {
              if (seconds == 3) {
                seconds_html += ' 🧨';
              }
              if (seconds == 2) {
                seconds_html += ' 🧨 🧨';
              }
              if (seconds == 1) {
                seconds_html += ' 🧨 🧨 🧨';
              }
              if (seconds == 0) {
                $("#expiration").html("💥").addClass("boom");
              }
            }
            $("#seconds").html(seconds_html);
          }
        };
        setInterval(function() { makeTimer(); }, 1000);
      });
    </script>
  {% endif %}
{% endblock %}