kpsul/kfet/templates/kfet/checkoutstatement_create.html

{% extends "kfet/base.html" %}
{% load l10n %}

{% block title %}Nouveau relevé{% endblock %}
{% block content-header-title %}Caisse {{ checkout.name }} - Nouveau relevé{% endblock %}

{% block content %}

<div class="row">
  <div class="col-sm-4 col-md-3 col-content-left">
    <div class="content-left">
      {% include 'kfet/left_checkout.html' %}
    </div>
  </div>
  <div class="col-sm-8 col-md-9 col-content-right">
    {% include "kfet/base_messages.html" %}
    <div class="content-right">
      <form action="" method="post">
        {% csrf_token %}
        <div class="content-right-block">
          <h2>Général</h2>
          <div>
            <label>
              Ne pas compter la caisse
              {{ form.not_count }}
            </label><br>
            Ancienne balance : <span id="balance_old">{{ checkout.balance|unlocalize }}</span> €<br>
            Nouvelle balance : <span id="balance_new">0</span> €<br>
            Pris : <span id="amount_taken">0</span> €<br>
            Erreur : <span id="amount_error">0</span> €<br>
            {% if not perms.kfet.add_checkoutstatement %}
              <label for="password">Mot de passe:</label>
              <input type="password" id="password" name="KFETPASSWORD">
            {% endif %}
            <input type="submit" value="Enregistrer">
          </div>
        </div>
        <div class="content-right-block">
          <h2>Pris</h2>
          <div id="detail_taken">
            <table class="table table-bordered">
              <tr style="font-weight:bold;">
                <td>5€</td>
                <td>10€</td>
                <td>20€</td>
                <td>50€</td>
                <td>100€</td>
                <td>200€</td>
                <td>500€</td>
              <tr>
              <tr>
                <td><input id="id_taken_5" name="taken_5" data-value="5" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_10" name="taken_10" data-value="10" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_20" name="taken_20" data-value="20" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_50" name="taken_50" data-value="50" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_100" name="taken_100" data-value="100" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_200" name="taken_200" data-value="200" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_500" name="taken_500" data-value="500" min="0" value="0" type="number" class="form-control" required></td>
              </tr>
            </table>
            <table class="table table-bordered">
              <tr style="font-weight:bold;">
                <td>2€</td>
                <td>1€</td>
                <td>0.50€</td>
                <td>0.20€</td>
                <td>0.10€</td>
                <td>0.05€</td>
                <td>0.02€</td>
                <td>0.01€</td>
              <tr>
              <tr>
                <td><input id="id_taken_2" name="taken_2" data-value="2" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_1" name="taken_1" data-value="1" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_05" name="taken_05" data-value="0.5" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_02" name="taken_02" data-value="0.2" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_01" name="taken_01" data-value="0.1" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_005" name="taken_005" data-value="0.05" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_002" name="taken_002" data-value="0.02" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_taken_001" name="taken_001" data-value="0.01" min="0" value="0" type="number" class="form-control" required></td>
              </tr>
            </table>
            Chèque: <input id="id_taken_cheque" name="taken_cheque" data-value="1" min="0" step="0.01" value="0" type="number" class="form-control" required>
          </div>
        </div>
        <div class="content-right-block">
          <h2>En caisse</h2>
          <div id="detail_balance">
            <table class="table table-bordered">
              <tr style="font-weight:bold;">
                <td>5€</td>
                <td>10€</td>
                <td>20€</td>
                <td>50€</td>
                <td>100€</td>
                <td>200€</td>
                <td>500€</td>
              <tr>
              <tr>
                <td><input id="id_balance_5" name="balance_5" data-value="5" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_10" name="balance_10" data-value="10" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_20" name="balance_20" data-value="20" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_50" name="balance_50" data-value="50" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_100" name="balance_100" data-value="100" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_200" name="balance_200" data-value="200" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_500" name="balance_500" data-value="500" min="0" value="0" type="number" class="form-control" required></td>
              </tr>
            </table>
            <table class="table table-bordered">
              <tr style="font-weight:bold;">
                <td>2€</td>
                <td>1€</td>
                <td>0.50€</td>
                <td>0.20€</td>
                <td>0.10€</td>
                <td>0.05€</td>
                <td>0.02€</td>
                <td>0.01€</td>
              <tr>
              <tr>
                <td><input id="id_balance_2" name="balance_2" data-value="2" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_1" name="balance_1" data-value="1" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_05" name="balance_05" data-value="0.5" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_02" name="balance_02" data-value="0.2" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_01" name="balance_01" data-value="0.1" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_005" name="balance_005" data-value="0.05" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_002" name="balance_002" data-value="0.02" min="0" value="0" type="number" class="form-control" required></td>
                <td><input id="id_balance_001" name="balance_001" data-value="0.01" min="0" value="0" type="number" class="form-control" required></td>
              </tr>
            </table>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#id_not_count').on('change', function() {
        if ($(this).prop('checked')) {
            $('#detail_balance input').prop('disabled', true);
        } else {
            $('#detail_balance input').prop('disabled', false);
        }
        updateAmounts();
    });

    $('#detail_balance input, #detail_taken input').on('input', function() {
        updateAmounts();
    });

    function getTotal(id_container) {
        var total = 0;
        $('#'+id_container+' input').each(function() {
            total += parseFloat($(this).attr('data-value')) * parseFloat($(this).val());
        });
        return total;
    }

    function updateAmounts() {
        var balance_old = parseFloat($('#balance_old').text());
        var taken = getTotal('detail_taken');
        if ($('#id_not_count').prop('checked')) {
            var error = 0;
            var balance_new = balance_old - taken;
        } else {
            var balance_new = getTotal('detail_balance');
            var error = balance_new + taken - balance_old;
        }
        $('#balance_new').text(balance_new.toFixed(2));
        $('#amount_taken').text(taken.toFixed(2));
        $('#amount_error').text(error.toFixed(2));
    }
});
</script>

{% endblock %}