kpsul/kfet/templates/kfet/history.html

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

{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/jquery-ui.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/bootstrap-datetimepicker.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'kfet/css/multiple-select.css' %}">
<script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.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/moment.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/moment-fr.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/moment-timezone-with-data-2010-2020.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/bootstrap-datetimepicker.min.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/multiple-select.js' %}"></script>
<script type="text/javascript" src="{% url 'js_reverse' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/kfet.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/kfet.api.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/history.js' %}"></script>
{% endblock %}

{% block title %}Historique{% endblock %}
{% block content-header-title %}Historique{% 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 class="line line-big" id="nb_opes"></div>
        <div class="line line-bigsub">opérations</div>
        <div class="block">
          <h2>Filtres</h2>
          <div class="line" style="position:relative"><b>De</b> <input type="text" id="from_date" class="form-control"></div>
          <div class="line" style="position:relative"><b>à</b> <input type="text" id="to_date" class="form-control"></div>
          <div class="line"><b>Caisses</b> {{ filter_form.checkouts }}</div>
          <div class="line"><b>Comptes</b> {{ filter_form.accounts }}</div>
        </div>
      </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>Général</h2>
        <div>
        </div>
      </div>
      <div class="content-right-block">
        <h2>Opérations</h2>
        <div>
          <div id="history" class="table">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    'use strict';

    // Lock to avoid multiple requests
    window.lock = 0;


    var history = new History();

    var $from_date = $('#from_date');
    var $to_date = $('#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 updateHistory() {

        // Get API options
        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;
        history.api_options = data ;

        // Update history
        history.reset();
    }

    $('#from_date').datetimepicker({
        timeZone  : 'Europe/Paris',
        format    : 'YYYY-MM-DD HH:mm',
        stepping  : 5,
        locale    : 'fr',
        defaultDate: moment().subtract(24, 'hours'),
        showTodayButton: true,
    });
    $('#to_date').datetimepicker({
        timeZone  : 'Europe/Paris',
        format    : 'YYYY-MM-DD HH:mm',
        stepping  : 5,
        defaultDate: moment(),
        locale    : 'fr',
        showTodayButton: true,
    });
    $("#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,
    });

    $("input").on('dp.change change', function() {
        updateHistory();
    });

    // -----
    // Synchronization
    // -----

    var websocket_msg_default = {'opegroups':[],'opes':[]}

    var websocket_protocol = window.location.protocol == 'https:' ? 'wss' : 'ws';
    var location_host = window.location.host;
    var location_url = window.location.pathname.startsWith('/gestion/') ? location_host + '/gestion' : location_host;
    var socket = new ReconnectingWebSocket(websocket_protocol+"://" + location_url + "/ws/k-fet/k-psul/");
    socket.onmessage = function(e) {
        var data = $.extend({}, websocket_msg_default, JSON.parse(e.data));
        history.update_data(data);
    }


    updateHistory();
});
</script>

{% endblock %}