kpsul/kfet/templates/kfet/transfers.html

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

{% block extra_head %}
<link rel="stylesheet" style="text/css" href="{% static 'kfet/css/jquery-ui.min.css' %}">
<script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/jquery-confirm.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/kfet.js' %}"></script>
{% endblock %}

{% block title %}Transferts{% endblock %}
{% block content-header-title %}Transferts{% endblock %}

{% block content %}

<div class="row">
  <div class="col-sm-4 col-md-3 col-content-left">
    <div class="content-left">
      <div class="content-left-top">
      </div>
      <div class="buttons">
        <a class="btn btn-primary btn-lg" href="{% url 'kfet.transfers.create' %}">
          Nouveaux
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-8 col-md-9 col-content-right">
    {% include 'kfet/base_messages.html' %}
    <div class="content-right">
      <div class="content-right-block">
        <h2>Liste des transferts</h2>
        <div id="history">
          {% for transfergroup in transfergroups %}
            <div class="opegroup transfergroup" data-transfergroup="{{ transfergroup.pk }}">
              <span>{{ transfergroup.at }}</span>
              <span>{{ transfergroup.valid_by.trigramme }}</span>
              <span>{{ transfergroup.comment }}</span>
            </div>
            {% for transfer in transfergroup.transfers.all %}
            <div class="ope transfer{% if transfer.canceled_at %} canceled{% endif %}" data-transfer="{{ transfer.pk }}" data-transfergroup="{{ transfergroup.pk }}">
                <span class="amount">{{ transfer.amount }} €</span>
                <span class="from_acc">{{ transfer.from_acc.trigramme }}</span>
                <span class="glyphicon glyphicon-arrow-right"></span>
                <span class="to_acc">{{ transfer.to_acc.trigramme }}</span>
              </div>
            {% endfor %}
          {% endfor %}
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

$(document).ready(function() {

    lock = 0;

    function displayErrors(html) {
        $.alert({
            title: 'Erreurs',
            content: html,
            backgroundDismiss: true,
            animation: 'top',
            closeAnimation: 'bottom',
            keyboardEnabled: true,
        });
    }


    function cancelTransfers(transfers_array, password = '') {
        if (lock == 1)
            return false
        lock = 1;
        var data = { 'transfers' : transfers_array }
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.transfers.cancel' %}",
            method  : "POST",
            data    : data,
            beforeSend: function ($xhr) {
                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
                if (password != '')
                    $xhr.setRequestHeader("KFetPassword", password);
            },

        })
        .done(function(data) {
            for (var i=0; i<data['canceled'].length; i++) {
                $('#history').find('.transfer[data-transfer='+data['canceled'][i]+']')
                    .addClass('canceled');
            }
            $('#history').find('.ui-selected').removeClass('ui-selected');
            lock = 0;
        })
        .fail(function($xhr) {
            var data = $xhr.responseJSON;
            switch ($xhr.status) {
                case 403:
                    requestAuth(data, function(password) {
                        cancelTransfers(transfers_array, password);
                    });
                    break;
                case 400:
                    displayErrors(getErrorsHtml(data));
                    break;
            }
            lock = 0;
        });
    }

    $('#history').selectable({
        filter: 'div.transfergroup, div.transfer',
        selected: function(e, ui) {
            $(ui.selected).each(function() {
                if ($(this).hasClass('transfergroup')) {
                    var transfergroup = $(this).attr('data-transfergroup');
                    $(this).siblings('.ope').filter(function() {
                        return $(this).attr('data-transfergroup') == transfergroup
                    }).addClass('ui-selected');
                }
            });
        },
    });

    $(document).on('keydown', function (e) {
        if (e.keyCode == 46) {
            // DEL (Suppr)
            var transfers_to_cancel = [];
            $('#history').find('.transfer.ui-selected').each(function () {
                transfers_to_cancel.push($(this).attr('data-transfer'));
            });
            if (transfers_to_cancel.length > 0)
                cancelTransfers(transfers_to_cancel);
        }
    });

});

</script>

{% endblock %}