kpsul/kfet/templates/kfet/kpsul.html

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

{% block extra_head %}
<script type="text/javascript" src="{% static 'kfet/js.cookie.js' %}"></script>
{% endblock %}

{% block title %}K-Psul{% endblock %}

{% block content %}

{% csrf_token %}

<form id="operationgroup_form">{{ operationgroup_form }}</form>

{{ trigramme_form.as_p }}
<div id="account_data">
    <p id="account-balance"></p>
    <p id="account-name"></p>
    <p id="account-email"></p>
    <p id="account-is_cof"></p>
    <p id="account-promo"></p>
    <p id="account-is_frozen"></p>
    <p id="account-departement"></p>
    <p id="account-nickname"></p>
</div>

{{ checkout_form.as_p }}
<div id="checkout_data">
    <p id="checkout-name"></p>
    <p id="checkout-balance"></p>
    <p id="checkout-valid_from"></p>
    <p id="checkout-valid_to"></p>
</div>

<form id="operation_formset">
    {{ operation_formset.as_p }}
</form>

<button type="button" id="perform_operations">Valider</button>

<script type="text/javascript">
$(document).ready(function() {
    // -----
    // General
    // -----

    // Retrieving csrf token
    var csrftoken = Cookies.get('csrftoken');
    // Appending csrf token to ajax post requests
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    // -----
    // Account data management
    // -----

    // Initializing
    var triInput = $('#id_trigramme')
    var triPattern = /^[^a-z]{3}$/
    var account_data = {}

    // Display data
    function displayAccountData() {
        for (var elem in account_data) {
            $('#account-'+elem).text(account_data[elem]);
        }
    }

    // Clear data
    function resetAccountData() {
        account_data = {
            'pk'   : 0,
            'name' : '',
            'email': '',
            'is_cof' : '',
            'promo'  : '',
            'balance': '',
            'is_frozen'  : '',
            'departement': '',
            'nickname'   : '',
        }
        $('#id_on_acc').val(0);
        displayAccountData();
    }

    // Store data
    function storeAccountData(data) {
        for (var elem in data) {
            account_data[elem] = data[elem];
        }
        $('#id_on_acc').val(account_data['pk']);
        displayAccountData();
    }

    // Retrieve via ajax
    function retrieveAccountData(tri) {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.account_data' %}",
            method  : "POST",
            data    : { trigramme: tri },
        })
         .done(function(data) { storeAccountData(data) })
         .fail(function() { resetAccountData() });
    }

    // Event listener
    triInput.on('input', function() {
        var tri = triInput.val()
        // Checking if tri is valid to avoid sending requests
        if (tri.match(triPattern)) {
            retrieveAccountData(tri);
        } else {
            resetAccountData();
        }
    });

    // -----
    // Checkout data management
    // -----

    // Initializing
    var checkoutInput = $('#id_checkout_select');
    var checkout_data = {}

    // Display data
    function displayCheckoutData() {
        for (var elem in checkout_data) {
            $('#checkout-'+elem).text(checkout_data[elem]);
        }
    }

    // Clear data
    function resetCheckoutData() {
        checkout_data = {
            'pk'  : 0,
            'name': '',
            'balance'   : '',
            'valid_from': '',
            'valid_to'  : '',
        }
        $('#id_checkout').val(0);
        displayCheckoutData();
    }

    // Store data
    function storeCheckoutData(data) {
        for (var elem in data) {
            checkout_data[elem] = data[elem];
        }
        $('#id_checkout').val(checkout_data['pk']);
        displayCheckoutData();
    }

    // Retrieve data
    function retrieveCheckoutData(id) {
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.checkout_data' %}",
            method  : "POST",
            data    : { 'pk': id },
        })
         .done(function(data) { storeCheckoutData(data) })
         .fail(function() { resetCheckoutData() });
    }

    // Event listener
    checkoutInput.on('change', function() {
        retrieveCheckoutData(checkoutInput.val());
    });

    // -----
    // Perform operations
    // -----

    var performButton  = $('#perform_operations');
    var operationGroup = $('#operationgroup_form');
    var operations     = $('#operation_formset');

    function performOperations() {
        data = operationGroup.serialize() + '&' + operations.serialize();
        $.ajax({
            dataType: "json",
            url     : "{% url 'kfet.kpsul.perform_operations' %}",
            method  : "POST",
            data    : data,
        })
        .done(function(data) {
            console.log(data);
        })
        .always(function($xhr) {
            var data = $xhr.responseJSON;
            console.log(data);
        });
    }

    // Event listeners
    performButton.on('click', function() {
        performOperations();
    });
});
</script>

{% endblock %}