gestioCOF/kfet/templates/kfet/transfers_create.html

{% extends 'kfet/base.html' %}
{% load staticfiles %}

{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/transfers_form.css' %}">
<script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
{% endblock %}

{% block title %}Nouveaux transferts{% endblock %}
{% block content-header-title %}Nouveaux transferts{% endblock %}

{% block content %}

{% csrf_token %}

<form id="transfers_form">
  <div class="transfer_general text-center">
    <input type="text" name="comment" id="comment" placeholder="Commentaire"><!--
    --><button type="submit" id="submit" class="btn btn-primary btn-lg">Enregistrer</button>
    {{ transfer_formset.management_form }}
  </div>
  <table class="transfer_formset table">
    <thead>
      <tr>
        <td></td>
        <td>De</td>
        <td><span class="glyphicon glyphicon-euro"></span></td>
        <td>Vers</td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      {% for form in transfer_formset %}
        <tr class="transfer_form" id="{{ form.prefix }}">
          <td class="from_acc_data"></td>
          <td class="from_acc">
            <input type="text" name="from_acc" class="input_from_acc" maxlength="3" autocomplete="off" spellcheck="false">
            {{ form.from_acc }}
          </td>
          <td class="amount">{{ form.amount }}</td>
          <td class="to_acc">
            <input type="text" name="to_acc" class="input_to_acc" maxlength="3" autocomplete="off" spellcheck="false">
            {{ form.to_acc }}
          </td>
          <td class="to_acc_data"></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</form>

<script type="text/javascript">
$(document).ready(function () {
    function getAccountData(trigramme, callback = function() {}) {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.account.read.json' %}",
            method  : "POST",
            data    : { trigramme: trigramme },
            success : callback,
        });
    }

    function updateAccountData(trigramme, $input) {
        var $form = $input.closest('.transfer_form');
        if ($input.attr('name') == 'from_acc') {
            var $data = $form.find('.from_acc_data');
            var $next = $form.find('.amount input');
        } else {
            var $data = $form.find('.to_acc_data');
            var $next = $form.next('.transfer_form').find('.from_acc input');
        }
        var $input_id = $input.next('input');
        if (isValidTrigramme(trigramme)) {
            getAccountData(trigramme, function(data) {
                $input_id.val(data.id);
                $data.text(data.name);
                $next.focus();
            });
        } else {
            $input_id.val('');
            $data.text('');
        }
    }

    $('.input_from_acc, .input_to_acc').on('input', function() {
        var tri = $(this).val().toUpperCase();
        updateAccountData(tri, $(this));
    });

    $('#transfers_form').on('submit', function(e) {
        e.preventDefault();
        performTransfers();
    });

    function performTransfers(password = '') {
        var data = $('#transfers_form').serialize();
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.transfers.perform' %}",
            method  : "POST",
            data    : data,
            beforeSend: function ($xhr) {
                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
                if (password != '')
                    $xhr.setRequestHeader("KFetPassword", password);
            },
        })
        .done(function(data) {
            window.location.href = "{% url 'kfet.transfers' %}";
        })
        .fail(function($xhr) {
            var data = $xhr.responseJSON;
            switch ($xhr.status) {
                case 403:
                    requestAuth(data, performTransfers);
                    break;
            }
        });
    }
});
</script>

{% endblock %}