WEB/src/Template/Element/Eprosume/Views/datatable.ctp

<script>
    // DOM elements declaration
    var dataTable;
    var searchButton;
    var exportButton;
    var searchInput;
    var searchReset;
    var meterSelect;
    var pickerElement;
    var pickerCallback;
    var periodRadio;
    // general configuration
    var dataTableConfiguration = {
        "order": [[ 0, 'desc' ]],
        "deferRender": true,
        "responsive": true,
        "pageLength": 50,
        "searching": false, 
        "language": {
            "sEmptyTable":     "No records found",
            "sInfo":           "Viewing records from _START_ to _END_ of _TOTAL_",
            "sInfoEmpty":      "Viewing from 0 to 0 of 0 records",
//          "sInfoFiltered":   "(filtered _MAX_ records)",
            "sInfoPostFix":    "",
            "sInfoThousands":  ".",
            "sLengthMenu":     "Viewing _MENU_ records",
            "sLoadingRecords": "Loading...",
            "sProcessing":     "Calculating...",
            "sSearch":         "Search:",
            "sZeroRecords":    "No records found.",
            "oPaginate": {
                "sFirst":      "Start",
                "sPrevious":   "Previous",
                "sNext":       "Next",
                "sLast":       "End"
            },
            "oAria": {
                "sSortAscending":  ": sort the column in ascending order",
                "sSortDescending": ": sort the column in descending order"
            }
        }
    };

    var historyDataTableConfiguration = {
        "initComplete": function() {
            $('#exportButtonWrapper').removeClass("hidden");
            $('#periodInputWrapper').removeClass("hidden");
            $('#searchInputWrapper').removeClass("hidden");
         },
        "processing": true,
        "serverSide": true,
        "ajax": {
            url : "/xhr/history",
            data: function(data) {
                data.meter = meterSelect.val();
                data.txid = searchInput.val();
                data.from = pickerElement.getAttribute("data-from");
                data.to = pickerElement.getAttribute("data-to");
                data.period = $('input[name=periodRadio]:checked').val();
            },
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
            },
            dataType : "json"
        },
        "columns": [
            { "data": "timestamp", "render": function (data, type, row) { return row.id == null ? data : '<a href="/web/block/'+row.id+'">'+data+'</a>'; } },
            { "data": "txID", "className": "cell-fixed", "render": function (data) { return '<div class="cell-clip">'+(data == null ? '' : data)+'</div>'; } },
            { "data": "wallet_from", "render": function (data) { return '<a href="/web/meter/'+data+'">'+data+'</a>'; } },
            { "data": "wallet_to", "render": function (data) { return '<a href="/web/meter/'+data+'">'+data+'</a>'; } },
            { "data": "asset" },
            { "data": "type" },
            { "name": "Value", "data": "amount", "type": "number", "render": function (data) { return data == null ? '-' : data % 1 == 0 ? parseInt(data) : data;} },
            { "name": "Purchased/Sold Energy", "data": "energyDiff", "type": "number", "render": function (data) { return data == null ? '-' : data % 1 == 0 ? parseInt(data) : data;} }
        ]
    };

    var paymentDataTableConfiguration = {
        "initComplete": function() {
            $('#exportButtonWrapper').removeClass("hidden");
            $('#periodInputWrapper').removeClass("hidden");
         },
        "processing": true,
        "serverSide": true,
        "ajax": {
            url : "/xhr/payment",
            data: function(data) {
                data.meter = meterSelect.val();
                data.from = pickerElement.getAttribute("data-from");
                data.to = pickerElement.getAttribute("data-to");
                data.period = $('input[name=periodRadio]:checked').val();
            },
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
            },
            dataType : "json"
        },
        "columns": [
            { "data": "timestamp", "render": function (data, type, row) { return row.id == null ? data : '<a href="/web/block/'+row.id+'">'+data+'</a>'; } },
            { "data": "wallet_from", "render": function (data) { return '<a href="/web/meter/'+data+'">'+data+'</a>'; } },
            { "data": "wallet_to", "render": function (data) { return '<a href="/web/meter/'+data+'">'+data+'</a>'; } },
            { "data": "amount", "type": "number", "render": function (data) { return data == null ? '-' : data % 1 == 0 ? parseInt(data) : data;} },
            { "data": "asset" }
        ]
    };

    var priceHistoryDataTableConfiguration = {
        "initComplete": function() {
            $('#exportButtonWrapper').removeClass("hidden");
         },
        "processing": true,
        "serverSide": true,
        "ajax": {
            url : "/xhr/price/history",
            data: function(data) {
                data.meter = meterSelect.val();
                data.from = pickerElement.getAttribute("data-from");
                data.to = pickerElement.getAttribute("data-to");
            },
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
            },
            dataType : "json"
        },
        "columns": [
            { "data": "timestamp", "render": function (data, type, row) { return row.id == null ? data : '<a href="/web/block/'+row.id+'">'+data+'</a>'; } },
            { "data": "wallet_from", "render": function (data) { return '<a href="/web/meter/'+data+'">'+data+'</a>'; } },
            { "data": "wallet_to", "render": function (data) { return '<a href="/web/meter/'+data+'">'+data+'</a>'; } },
            { "data": "buyPrice", "type": "number", "render": function (data) { return data == null ? '-' : data % 1 == 0 ? parseInt(data) : data;} },
            { "data": "sellPrice", "type": "number", "render": function (data) { return data == null ? '-' : data % 1 == 0 ? parseInt(data) : data;} }
       ]
    };

    var transferDataTableConfiguration = {
        "autoWidth": false,
        "initComplete": function() {
            var $periodRadio = $('input:radio[name=periodRadio]');
            $periodRadio.filter('[value=0]').prop('checked', false);
            $periodRadio.filter('[value=2]').prop('checked', true);
            $('#periodInputWrapper').removeClass("hidden");
            $('#searchInputWrapper').removeClass("hidden");
            $('#searchInputWrapper').hide();
         },
        "processing": true,
        "serverSide": true,
        "ajax": {
            url : "/xhr/historyTransfer",
            data: function(data) {
                data.meter = meterSelect.val();
                data.txid = searchInput.val();
                data.from = pickerElement.getAttribute("data-from");
                data.to = pickerElement.getAttribute("data-to");
                data.period = $('#periodInputWrapper').hasClass("hidden") ? 2 : $('input[name=periodRadio]:checked').val();
            },
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
            },
            dataType : "json"
        },
        "columns": [
            { "data": "timestamp", "render": function (data, type, row) { return row.id == null ? data : '<a href="/web/block/'+row.id+'">'+data+'</a>'; } },
            { "data": "wallet_from", "render": function (data) { return '<a href="/web/balance/'+data+'">'+data+'</a>'; } },
            { "data": "wallet_to", "render": function (data) { return '<a href="/web/balance/'+data+'">'+data+'</a>'; } },
            { "data": "asset" },
            { "name": "Value", "data": "amount", "type": "number", "render": function (data) { return data == null ? '-' : data % 1 == 0 ? parseInt(data) : data;} },
            { "data": "mv", "width": "30%" },
        ]
    };


    // jquery document ready functions
    $(document).ready(function() {    
        // searchButton event listener
        searchButton = $("#searchButton");
        searchInput = $("#searchInput");
        searchReset = $("#searchReset");
        searchButton.click(function () {
            dataTable.search(searchInput.val()).draw();
        });
        searchReset.click(function () {
            searchInput.val("");
            dataTable.search("").draw();
        });
        // meterSelect event listener
        meterSelect = $('#meterSelect'); 
        meterSelect.change( function() {
            dataTable.draw();
        });
        // periodRadio event listener
        periodRadio = $('input[name=periodRadio]'); 
        periodRadio.change( function() {
            dataTable.draw();
        });
        // exportButton event listener
        exportButton = $("#exportButton");
        exportButton.click(function () {
            window.open(dataTable.ajax.url()+"?format=csv&"+$.param(dataTable.ajax.params()));
        });
 
        // pickerSelect element and event listener
        pickerElement = document.getElementById('pickerSelect');
        pickerCallback = function() { dataTable.draw(); };
        var _ = getDate();
        _.setHours(23);_.setMinutes(59);
        var defaultDate = getDateString(_);
        var _min = getDate();
        _min.setDate(_min.getDate() - 60);
        if(pickerElement != null) {
            pickerElement.setAttribute("data-from", getDateString(_min));
            pickerElement.setAttribute("data-to", defaultDate);
            var picker = flatpickr(pickerElement, {
                enableTime: false,
                maxDate: defaultDate,
                mode: 'range',
                time_24hr: true,
                defaultDate: [getDateString(_min), defaultDate],
                onClose: function(selectedDates) {
                    let dates = selectedDates.map(d => getDate(d));
                    dates[0] == null && dates.push(defaultDate);
                    dates[1] == null && dates.push(dates[0]);
                    if((Math.round(dates[1].getTime() / 1000)) - (Math.round(dates[0].getTime() / 1000)) > 5184000) {
                        alert("Max date range is 60 days, please select a different period");
                        return;
                    }
                    dates[1].setHours(23);dates[1].setMinutes(59);
                    pickerElement.setAttribute("data-from", getDateString(dates[0]));
                    pickerElement.setAttribute("data-to", getDateString(dates[1]));
                    pickerCallback();
                }
            });
            $('#meterReset').click( function() {
                meterSelect.find("option:selected").prop("selected", false);
                meterSelect.find("option:first").prop("selected", "selected");
                meterSelect.val(meterSelect.find("option:first").val()).change();
            });
            $('#pickerReset').click( function() {
                picker.clear();
                picker.setDate([getDateString(_min), defaultDate]),
                pickerElement.setAttribute("data-from", getDateString(_min));
                pickerElement.setAttribute("data-to", defaultDate);
                dataTable.draw();
            });
        }
        // datatable init
        objShallowMerge(dataTableConfiguration, <?php echo isset($dataTableConfiguration) ? $dataTableConfiguration : "{}"; ?>)
        dataTable = $('#valueTable').DataTable(dataTableConfiguration);
        dataTable.on('processing.dt', function (e, settings, processing) {
            var overlay = $("#eprosume_overlay");
            if (processing) {
                overlay.show();
            } else {
                overlay.hide();
            }
        });
    });
</script>