kpsul/kfet/templates/kfet/history.html

{% extends 'kfet/base_col_2.html' %}
{% load l10n staticfiles widget_tweaks %}

{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/multiple-select.css' %}">
<script type="text/javascript" src="{% static 'kfet/js/multiple-select.js' %}"></script>
{{ filter_form.media }}
<script type="text/javascript" src="{% static 'kfet/js/history.js' %}"></script>
{% endblock %}

{% block title %}Historique{% endblock %}
{% block header-title %}Historique{% endblock %}

{% block fixed %}

<aside>
  <div class="heading">
    <span id="nb_opes"></span>
    <span class="sub">opérations</span>
  </div>
  <div class="text">
    <ul class="list-unstyled">
      <li style="position: relative;"><b>De</b> {{ filter_form.from_date|add_class:"form-control" }}</li>
      <li style="position: relative;"><b>à</b> {{ filter_form.to_date|add_class:"form-control" }}</li>
      <li><b>Caisses</b> {{ filter_form.checkouts }}</li>
      <li><b>Comptes</b> {{ filter_form.accounts }}</li>
    </ul>
  </div>
</aside>

{% endblock %}

{% block main %}

<table id="history" class="table">
</table>

<script type="text/javascript">
$(document).ready(function() {
    settings = { 'subvention_cof': parseFloat({{ kfet_config.subvention_cof|unlocalize }})}

    khistory = new KHistory();

    var $from_date = $('#id_from_date');
    var $to_date = $('#id_to_date');
    var $checkouts = $('#id_checkouts');
    var $accounts = $('#id_accounts');

    function getSelectedMultiple($el) {
        var selected = [];
        $el.find(':selected').each(function() {
            selected.push($(this).val())
        });
        return selected;
    }

    function getHistory() {
        var data = {};
        if ($from_date.val())
            data['from'] = moment($from_date.val()).format('YYYY-MM-DD HH:mm:ss');
        if ($to_date.val())
            data['to'] = moment($to_date.val()).format('YYYY-MM-DD HH:mm:ss');
        var checkouts = getSelectedMultiple($checkouts);
        if ($checkouts)
            data['checkouts'] = checkouts;
        var accounts = getSelectedMultiple($accounts);
            data['accounts'] = accounts;

        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.history.json' %}",
            method  : "POST",
            data    : data,
        })
        .done(function(data) {
            for (var i=0; i<data['opegroups'].length; i++) {
                khistory.addOpeGroup(data['opegroups'][i]);
            }
            var nb_opes = khistory.$container.find('.ope:not(.canceled)').length;
            $('#nb_opes').text(nb_opes);
        });
    }

    let defaults_datetimepicker = {
        timeZone  : 'Europe/Paris',
        format    : 'YYYY-MM-DD HH:mm',
        stepping  : 5,
        locale    : 'fr',
        showTodayButton: true
    };

    $from_date.datetimepicker($.extend({}, defaults_datetimepicker, {
        defaultDate: moment().subtract(24, 'hours'),
    }));
    $to_date.datetimepicker($.extend({}, defaults_datetimepicker, {
        defaultDate: moment(),
    }));

    $("#from_date").on("dp.change", function (e) {
        $('#to_date').data("DateTimePicker").minDate(e.date);
    });
    $("#to_date").on("dp.change", function (e) {
        $('#from_date').data("DateTimePicker").maxDate(e.date);
    });

    $("select").multipleSelect({
        width: '100%',
        filter: true,
        allSelected: " ",
        selectAllText: "Tout-te-s",
        countSelected: "# sur %"
    });

    $("input").on('dp.change change', function() {
        khistory.reset();
        getHistory();
    });

    khistory.$container.selectable({
        filter: 'div.opegroup, div.ope',
        selected: function(e, ui) {
            $(ui.selected).each(function() {
                if ($(this).hasClass('opegroup')) {
                    var opegroup = $(this).data('opegroup');
                    $(this).siblings('.ope').filter(function() {
                        return $(this).data('opegroup') == opegroup
                    }).addClass('ui-selected');
                }
            });
        },
    });

    $(document).on('keydown', function (e) {
        if (e.keyCode == 46) {
            // DEL (Suppr)
            var opes_to_cancel = [];
            khistory.$container.find('.ope.ui-selected').each(function () {
                opes_to_cancel.push($(this).data('ope'));
            });
            if (opes_to_cancel.length > 0)
                confirmCancel(opes_to_cancel);
        }
    });

    function confirmCancel(opes_to_cancel) {
        var nb = opes_to_cancel.length;
        var content = nb+" opérations vont être annulées";
        $.confirm({
            title: 'Confirmation',
            content: content,
            backgroundDismiss: true,
            animation: 'top',
            closeAnimation: 'bottom',
            keyboardEnabled: true,
            confirm: function() {
                cancelOperations(opes_to_cancel);
            }
        });
    }

    function requestAuth(data, callback) {
        var content = getErrorsHtml(data);
        content += '<input type="password" name="password" autofocus>',
        $.confirm({
            title: 'Authentification requise',
            content: content,
            backgroundDismiss: true,
            animation:'top',
            closeAnimation:'bottom',
            keyboardEnabled: true,
            confirm: function() {
                var password = this.$content.find('input').val();
                callback(password);
            },
            onOpen: function() {
                var that = this;
                this.$content.find('input').on('keypress', function(e) {
                    if (e.keyCode == 13)
                        that.$confirmButton.click();
                });
            },
        });
    }

    function getErrorsHtml(data) {
        var content = '';
        if ('missing_perms' in data['errors']) {
            content += 'Permissions manquantes';
            content += '<ul>';
            for (var i=0; i<data['errors']['missing_perms'].length; i++)
                content += '<li>'+data['errors']['missing_perms'][i]+'</li>';
            content += '</ul>';
        }
        if ('negative' in data['errors']) {
            var url_base = "{% url 'kfet.account.update' LIQ}";
            url_base = base_url(0, url_base.length-8);
            for (var i=0; i<data['errors']['negative'].length; i++) {
                content += '<a class="btn btn-primary" href="'+url_base+data['errors']['negative'][i]+'/edit" target="_blank">Autorisation de négatif requise pour '+data['errors']['negative'][i]+'</a>';
            }
        }
        return content;
    }

    function cancelOperations(opes_array, password = '') {
        var data = { 'operations' : opes_array }
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.cancel_operations' %}",
            method  : "POST",
            data    : data,
            beforeSend: function ($xhr) {
                $xhr.setRequestHeader("X-CSRFToken", csrftoken);
                if (password != '')
                    $xhr.setRequestHeader("KFetPassword", password);
            },

        })
        .done(function(data) {
            khistory.$container.find('.ui-selected').removeClass('ui-selected');
        })
        .fail(function($xhr) {
            var data = $xhr.responseJSON;
            switch ($xhr.status) {
                case 403:
                    requestAuth(data, function(password) {
                        cancelOperations(opes_array, password);
                    });
                    break;
                case 400:
                    displayErrors(getErrorsHtml(data));
                    break;
            }

        });
    }


    getHistory();
});
</script>

{% endblock %}