{% extends "django_w2ui/server-side.html" %}
{% load staticfiles %}

{% block server-side-objects %}active{% endblock %}

{% block server-side-container %}
<div id="users" style="width: 100%; height: 600px;"></div>

<script>
$(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});
$(function () {
	w2utils.settings.dataType = 'JSON';
	w2utils.settings.groupSymbol = '.'
    // define and render grid
    $('#users').w2grid({
        name    : 'users',
        url     : "{% url "DT-users-default" %}",
        header  : 'List of Users',
        show: {
            header        : true,
            toolbar       : true,
            footer        : true,
            toolbarAdd    : true,
            toolbarDelete : true,
            selectColumn  : true,
        },
        recid: 'pk',
        searches: [
            { field: 'recid', caption: 'ID', type: 'int' },
        ],
        columns: [
            { field: 'recid', caption: 'ID', size: '30px', searchable: true, sortable: true, hidden: true },
            { field: 'fname', caption: 'First Name', size: '80px', searchable: true, sortable: true },
            { field: 'lname', caption: 'Last Name', size: '80px', searchable: true, sortable: true },
            { field: 'email', caption: 'Email', size: '150px', searchable: true, sortable: true },
            { field: 'login', caption: 'Login', size: '60px', searchable: true, sortable: true },
            { field: 'date_birthday', caption: 'Birthday', size: '80px', searchable: true, sortable: true },
            { field: 'date_registration', caption: 'Registration', size: '85px', searchable: true, sortable: true },
            { field: 'importo_registrato', caption: 'Importo Registrato', size: '120px', searchable: true, sortable: true },
            { field: 'timestamp', caption: 'Timestamp', size: '110px', searchable: true, sortable: true },
            { field: 'text', caption: 'Text', size: '200px', searchable: true, sortable: true }
        ],
        sortData: [ { field: 'fname', direction: 'asc' } ],
        onAdd: function (event) {
            editUser(0);
        },
        onDblClick: function (event) {
            editUser(event.recid);
        }
    });
    // defined form
    $().w2form({
        name     : 'user_edit',
        url     : "{% url "DT-users-form" %}",
        style     : 'border: 0px; background-color: transparent;',
        formHTML: 
            '<div class="w2ui-page page-0">'+
            '    <div class="w2ui-label">First Name:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="fname" type="text" size="35"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Last Name:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="lname" type="text" size="35"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Email:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="email" type="text" size="35"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Login:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="login" type="text" size="25"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Password:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="password" type="password" size="25"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Date Birthday:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="date_birthday" type="text" />'+
            '    </div>'+
            '    <div class="w2ui-label">Date Registration:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="date_registration" type="text" />'+
            '    </div>'+
            '    <div class="w2ui-label">Importo Registrato:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="importo_registrato" type="text" size="25"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Note:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="text" type="text" style="width: 450px; height: 80px; resize: none"/>'+
            '    </div>'+
            '    <div class="w2ui-label">Timestamp:</div>'+
            '    <div class="w2ui-field">'+
            '        <input name="timestamp" type="text" class="datetimepicker" size="25"/>'+
            '    </div>'+
            '</div>'+
            '<div class="w2ui-buttons">'+
            '    <input type="button" value="Cancel" name="cancel">'+
            '    <input type="button" value="Save" name="save">'+
            '</div>',
        fields: [
            { name: 'fname', type: 'text', required: true },
            { name: 'lname', type: 'text', required: true },
            { name: 'email', type: 'email' },
            { name: 'login', type: 'text', required: true },
            { name: 'password', type: 'text', required: false },
            { name: 'date_birthday', type: 'date', required: false },
            { name: 'date_registration', type: 'date', required: false },
            { name: 'importo_registrato', type: 'int', required: false },
            { name: 'text', type: 'text', required:  false },
            { name: 'timestamp', type: 'text', required: false },
        ],
        actions: {
            "save": function () { 
                this.save(function (data) {
                    if (data.status == 'success') {
                        w2ui['users'].reload();
                        $().w2popup('close');
                    }
                    // if error, it is already displayed by w2form
                }); 
            },
            "cancel": function () { 
                $().w2popup('close');
            },
        }
    });
});
function editUser(recid) {
    $().w2popup('open', {
        title   : (recid == 0 ? 'Add User' : 'Edit User'),
        body    : '<div id="user_edit" style="width: 100%; height: 100%"></div>',
        style   : 'padding: 15px 0px 0px 0px',
        width   : 500,
        height  : 300, 
        onOpen  : function (event) {
            event.onComplete = function () {
                w2ui['user_edit'].clear();
                w2ui['user_edit'].recid = recid;
                $('#w2ui-popup #user_edit').w2render('user_edit');
                $('input[type=date]').w2field('date',  { format: 'd-m-yyyy' });
                $('.datetimepicker').datetimepicker({format:'d-m-Y H:i',lang:'it'});
                
            }
        }
    });
}
</script>
</html>

{% endblock %}

{% block server-side-extra-script %}

{% endblock %}
