{% extends 'Accounts/comun.html' %}
<title>Rutas</title>
{% load static %}
{% load i18n %}
{% load tz %}
<script src="{% static 'dev/index.js' %}"></script>

{% block content %}

 <div class="container-fluid">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Rutas</h1>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
          </div>

         

          <div class="row">
            <div class="col-xl-12 col-lg-12">

                <div class="demo-container">
                    <div id="gridContainer"></div>

                </div>
               
            </div>
          </div>
        </div>


<script>

   



    function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	var expires = "expires=" + d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') {
			c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
			return c.substring(name.length, c.length);
		}
	}
	return "";
}


    DevExpress.localization.locale(navigator.language || navigator.browserLanguage);

    $(function(){
    var orders = new DevExpress.data.CustomStore({
        load: function (loadOptions) {
            var deferred = $.Deferred(),
                args = {};
    
            if (loadOptions.sort)
            {
                args.orderby = loadOptions.sort[0].selector;
                if (loadOptions.sort[0].desc)
                    args.orderby += " desc";
            }
    
            args.skip = loadOptions.skip;
            args.take = loadOptions.take;

            

            $.ajax({
                url: "http://127.0.0.1:8000/listRoutes/",
                dataType: "json", 
                data: args,
                success: function(result) {
                    deferred.resolve(result.items, { totalCount: result.totalCount });
                },
                error: function() {
                    deferred.reject("Data Loading Error");
                },
                timeout: 5000
            });
    
            return deferred.promise();
        }
    });
    
    $("#gridContainer").dxDataGrid({
		 columnChooser: { enabled: true },
		columnFixing: {enabled: true},
		//keyExpr: "ID",
		//focusedRowEnabled: true,
        showBorders: true,
        dataSource: {store: orders}, //datasource arriba
        showBorders: true,
        remoteOperations: {
            sorting: true,
            paging: true
        },
        //editing: {
        //    mode: "popup",
        //    allowUpdating: true,
        //    popup: {
        //        title: "Employee Info",
        //        showTitle: true,
        //        width: 700,
        //        height: 525,
        //        position: {
        //            my: "top",
        //            at: "top",
        //            of: window
        //        }
        //    },
        //    form: {
        //        items: [{
        //            itemType: "group",
        //            colCount: 2,
        //            colSpan: 2,
        //            items: ["FirstName", "LastName", "Prefix", "BirthDate", "Position", "HireDate", {
        //                dataField: "Notes",
        //                editorType: "dxTextArea",
        //                colSpan: 2,
        //                editorOptions: {
        //                    height: 100
        //                }
        //            }]
        //        }, {
        //            itemType: "group",
        //            colCount: 2,
        //            colSpan: 2,
        //            caption: "Home Address",
        //            items: ["StateID", "Address"]
        //        }]
        //    }
        //},
        paging: {
            pageSize: 100
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [8, 12, 20]
        },
        rowAlternationEnabled:{
			visible:true
		
        },
   //     selection:{
			//mode: "multiple"
   //     },
        focusedRowEnabled: true,
        columns: [
             "name", "totalkm", "duration","referencecost", {
                //dataField: "SaleAmount",
                //format: "currency"
            }
        ],
        groupPanel: {
            visible: true
        },
        scrolling: {
            mode: "virtual"
        },
		filterRow: {
            visible: true
        },
        headerFilter: {
            visible: true
        },
        export: {
            enabled: true,
			printingEnabled: true,
            customizeExcelCell: (options) => {
                var gridCell = options.gridCell;
                if(!gridCell) {
                    return;
                }
            }
        },
		stateStoring: {
			enabled: true,
			type: "custom",
			customLoad: function () {
				return JSON.parse(getCookie("key") || '{}');
			},
			customSave: function (state) {
				setCookie("key", JSON.stringify(state), 1000);
			},
		}
    }).dxDataGrid("instance");
    });

//$(function(){
//    var orders = new DevExpress.data.CustomStore({
//        load: function (loadOptions) {
//            var deferred = $.Deferred(),
//                args = {};
    
//            if (loadOptions.sort) {
//                args.orderby = loadOptions.sort[0].selector;
//                if (loadOptions.sort[0].desc)
//                    args.orderby += " desc";
//            }
    
//            args.skip = loadOptions.skip;
//            args.take = loadOptions.take;
//            $.ajax({
//                url: "http://127.0.0.1:8000/static/dev/data.json",
//                dataType: "json", 
//                data: args,
//                success: function(result) {
//                    deferred.resolve(result.items, { totalCount: result.totalCount });
//                },
//                error: function() {
//                    deferred.reject("Data Loading Error");
//                },
//                timeout: 5000
//            });
    
//            return deferred.promise();
//        }
//    });
    
//    $("#gridContainer").dxDataGrid({
//		 columnChooser: { enabled: true },
//		columnFixing: {enabled: true},
//		//keyExpr: "ID",
//		//focusedRowEnabled: true,
//        showBorders: true,
//        dataSource: {store: orders},
//        showBorders: true,
//        remoteOperations: {
//            sorting: true,
//            paging: true
//        },
//        editing: {
//            mode: "popup",
//            allowUpdating: true,
//            popup: {
//                title: "Employee Info",
//                showTitle: true,
//                width: 700,
//                height: 525,
//                position: {
//                    my: "top",
//                    at: "top",
//                    of: window
//                }
//            },
//            form: {
//                items: [{
//                    itemType: "group",
//                    colCount: 2,
//                    colSpan: 2,
//                    items: ["FirstName", "LastName", "Prefix", "BirthDate", "Position", "HireDate", {
//                        dataField: "Notes",
//                        editorType: "dxTextArea",
//                        colSpan: 2,
//                        editorOptions: {
//                            height: 100
//                        }
//                    }]
//                }, {
//                    itemType: "group",
//                    colCount: 2,
//                    colSpan: 2,
//                    caption: "Home Address",
//                    items: ["StateID", "Address"]
//                }]
//            }
//        },
//        paging: {
//            pageSize: 12
//        },
//        pager: {
//            showPageSizeSelector: true,
//            allowedPageSizes: [8, 12, 20]
//        },
//        columns: [
//            "OrderNumber", "OrderDate", "StoreCity", "StoreState", "Employee", {
//                dataField: "SaleAmount",
//                format: "currency"
//            }
//        ],
//        groupPanel: {
//            visible: true
//        },
//        scrolling: {
//            mode: "virtual"
//        },
//		filterRow: {
//            visible: true
//        },
//        headerFilter: {
//            visible: true
//        },
//        export: {
//            enabled: true,
//			printingEnabled: true,
//            customizeExcelCell: (options) => {
//                var gridCell = options.gridCell;
//                if(!gridCell) {
//                    return;
//                }
//            }
//        },
//		stateStoring: {
//			enabled: true,
//			type: "custom",
//			customLoad: function () {
//				return JSON.parse(getCookie("key") || '{}');
//			},
//			customSave: function (state) {
//				setCookie("key", JSON.stringify(state), 1000);
//			},
//		}
//    }).dxDataGrid("instance");
//});





    ////////////////////////// datagrid - web api service ////////////////////////////////////////////////
//    $(function(){
//    var url = "https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi";
//    $("#grid").dxDataGrid({     
//        dataSource: DevExpress.data.AspNet.createStore({
//            key: "OrderID",
//            loadUrl: url + "/Orders",
//            insertUrl: url + "/InsertOrder",
//            updateUrl: url + "/UpdateOrder",
//            deleteUrl: url + "/DeleteOrder",
//            onBeforeSend: function(method, ajaxOptions) {
//                ajaxOptions.xhrFields = { withCredentials: true };
//            }
//        }),
//        remoteOperations: true,   
//        columns: [{
//                dataField: "CustomerID",
//                caption: "Customer",
//                validationRules: [{
//                    type: "stringLength",
//                    message: "The field Customer must be a string with a maximum length of 5.",
//                    max: 5
//                }],
//                lookup: {
//                    dataSource: DevExpress.data.AspNet.createStore({
//                        key: "Value",
//                        loadUrl: url + "/CustomersLookup",
//                        onBeforeSend: function(method, ajaxOptions) {
//                            ajaxOptions.xhrFields = { withCredentials: true };
//                        }
//                    }),
//                    valueExpr: "Value",
//                    displayExpr: "Text"
//                }
//            }, { 
//                dataField: "OrderDate",
//                dataType: "date",
//                validationRules: [{
//                    type: "required",
//                    message: "The OrderDate field is required."
//                }]
//            }, { 
//                dataField: "Freight",
//                headerFilter: {
//                    groupInterval: 100
//                },
//                validationRules: [{
//                    type: "range",
//                    message: "The field Freight must be between 0 and 2000.",
//                    min: 0,
//                    max: 2000
//                }]
//            }, {
//                dataField: "ShipCountry",
//                validationRules: [{
//                    type: "stringLength",
//                    message: "The field ShipCountry must be a string with a maximum length of 15.",
//                    max: 15
//                }]
//            }, {
//                dataField: "ShipVia",
//                caption: "Shipping Company",
//                dataType: "number",
//                lookup: {
//                    dataSource: DevExpress.data.AspNet.createStore({
//                        key: "Value",
//                        loadUrl: url + "/ShippersLookup",
//                        onBeforeSend: function(method, ajaxOptions) {
//                            ajaxOptions.xhrFields = { withCredentials: true };
//                        }
//                    }),
//                    valueExpr: "Value",
//                    displayExpr: "Text"
//                }
//            }
//        ],
//        filterRow: {
//            visible: true
//        },
//        headerFilter: {
//            visible: true
//        },
//        groupPanel: {
//            visible: true
//        },
//        scrolling: {
//            mode: "virtual"
//        },
//        height: 600,
//        showBorders: true,
//        masterDetail: {
//            enabled: true,
//            template: function(container, options) { 
//                $("<div>")
//                    .dxDataGrid({
//                        dataSource: DevExpress.data.AspNet.createStore({
//                            loadUrl: url + "/OrderDetails",
//                            loadParams: { orderID : options.data.OrderID },
//                            onBeforeSend: function(method, ajaxOptions) {
//                                ajaxOptions.xhrFields = { withCredentials: true };
//                            }
//                        }),
//                        showBorders: true
//                    }).appendTo(container);
//            }
//        },
//        editing: {
//            allowAdding: true,
//            allowUpdating: true,
//            allowDeleting: true
//        },
//        grouping: {
//            autoExpandAll: false
//        },
//        summary: {
//            totalItems: [{
//                column: "Freight",
//                summaryType: "sum"
//            }],
//            groupItems: [{
//                    column: "Freight",
//                    summaryType: "sum"
//                }, {
//                    summaryType: "count"
//                }
//            ]
//        }
//    });
//});
</script>

{% endblock %}