MasterClass/resources/app/backoffice/statistics/statistics_export.js

var recherches_tab_is_active = false;
/* GET OLD WIDTH tab data */
var old_el_width = $('#tab-data').width();

var statExport = (function ($, window, jQuery) {
    return {
        "set_vars": function (options) {
            $.extend(_vars_, options || {});
        },
        "get_vars" : function(){
            return _vars_;
        },
        "setExportWidth": function(reset){
            $('#tab-data').attr(
                'style',(reset == 1)?old_el_width:'width:900px'
            );
        },
        /**
        * Export statistics as PDF
        * Initial testing
        */
        export_to_pdf: function() {
            // insert breaks before exporting
            $('.br').removeClass('hidden');
            var cur_date_range = $("#ga_date_range").val();
            $('.cur_date_range').html('Date: '+ cur_date_range);
            cur_date_range = cur_date_range.replace('-', 'au');
            
            /* SET FIXED ELEMENT WIDTH FOR EXPORT TEMPORARILY TO AVOID OVERLAPPING*/
            statExport.setExportWidth(0);
            
            /*Delay the preparation of the export so that it can catch the fixed set width*/
            setTimeout(function(){
                // show third tab to include the pie graph in the
                var element = statExport.cloneElement('#tab-data');
                statExport.general(element);
                // Données statistiques - 2019_03_01 04_08_16 (Du 30_01_2019 au 28_02_2019)
                var today = new Date();
                var dd = today.getDate();
                var mm = today.getMonth() + 1; //January is 0!
                
                var yyyy = today.getFullYear();
                if (dd < 10) {
                    dd = '0' + dd;
                } 
                if (mm < 10) {
                    mm = '0' + mm;
                } 
                var cur_date = `${yyyy}_${mm}_${dd}`;
                
                var opt = {
                    margin:       [.5,.5,.5,-1.7],
                    filename:     `Données statistiques - ${cur_date} (Du ${cur_date_range}).pdf`,
                    // pagebreak: { before: '.br_before', after: '.br_after'},
                    pagebreak: { before: '.br_before', after: '.br_after'},
                    image:        { type: 'jpeg', quality: 1,  },
                    html2canvas:  {dpi: 90, letterRendering: false, width: 1180, removeContainer: false, scale: 1,  y:0},
                    jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait'}
                };
                
                try {
                    html2pdf()
                    .from(element.get(0))
                    .set(opt)
                    .toPdf()
                    .get('pdf')
                    .then(function (pdf) {
                        statExport.addHeaderAndFooter(pdf);
                    })
                    .save();
                }catch(e){
                    console.log(e);
                }
                if (!recherches_tab_is_active) {
                    $('#recherches-tab').removeClass('active');
                }
                
                // $('.page-loader').remove();
                app.rmbtn_loader('#export_dashboard_to_pdf');
                // remove breaks before exporting
                $('.br').addClass('hidden');
            }, 500);
            
            /* RESET ELEMENT WIDTH (delay so that export pdf width the fixed width will work properly)*/
            setTimeout(function(){
                statExport.setExportWidth(1);
                app.remove_loader();
            }, 500);
        },

        /**
        * Adjust content before printing
        * 
        */
        general : function(el) {
            // $('<br/> <br/> <br/>').insertBefore(el.find('.margin-topp'));
            // el.find('.page2').css('margin-bottom', "253px");
            // el.find('.page3').css('margin-bottom', "-413px");
            // el.find('.page4').css('margin-bottom', "-159px"); //neg pababa, 
            // el.find('.page5').css('margin-bottom', "40px");
            // 
            // el.find('.abonnes-page6').css('margin-bottom', "-571px");
            // el.find('.abonnes-page7').css('margin-bottom', "-317px");
            // el.find('.recherches-page8').css('margin-bottom', "-64px");
        },

        /**
        * Clone element before changing it
        * Can add page breaks to any element
        */
        cloneElement : function(el){
            var originalContent = $(el);
            var newContent = originalContent.clone();
            newContent.find('.tab-pane:not(#glossary-tab)').show();
            var originalCanvas = originalContent.find('canvas');
            
            try {
                if(originalCanvas.length > 0) {

                    var cloneCanvas = newContent.find("canvas");
                    var style = 'width:100%;height:100%';
                    $.each(originalCanvas, function(index, value) {
                        var originalContext = originalCanvas[index].getContext("2d");
                        var canvas = originalContext.canvas;
                        $(cloneCanvas[index]).replaceWith('<img src="'+(canvas.toDataURL('image/png'))+'" style="'+style+'" />');
                    });
                }
            } catch(e){
                console.log(e);
            }

            /* RESET TO ORIGINAL WIDTH*/
            // $(el).width(old_el_width+'px');
            return newContent;
        },

        /**
        * Add Header on the first page and Footer to every canvas
        * Mimic the header
        */
        addHeaderAndFooter : function(pdf) {
            var totalPages = pdf.internal.getNumberOfPages();
            var header = $("#ga_date_range").val();
            var page_title = "Général"; 
            
            for (page = 1; page <= totalPages; page++) {
                pdf.setPage(page);
                // switch (page) {
                //     case 1:
                //         pdf.fromHTML(
                //             `<h3 class="no_margin" style="margin:none!important; color: #153853 !important;">
                //             Statistiques - ${ page_title } <br />
                //             <small>Date: ${ header } </small> 
                //             </h3>`, 12, 2);
                //     break;
                //     case 2:
                //     case 3:
                //     case 4:
                //     case 5:
                //     case 6:
                //         page_title = "Général"; 
                //     case 2:
                //         page_title = "Abonnés"
                //         break;
                //     default:
                // 
                // }
                // if(i >= 6 && i <=7 ) page_title = "Abonnés";
                // else if (i > 7 ) page_title="Recherches"
                // console.log(pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
                pdf.setFontSize(10);
                pdf.setTextColor(150);
                pdf.text(7.1, 11.4, 'Page '+page+' of '+totalPages);
            } 
        },        
    };//end of return

// Pass in jQuery.
})(jQuery, this);

$(document).ready(function() {
    $('a#export_dashboard_to_pdf').on('click', function(event) {
        $('.loader-container').prepend(app.get_loader2('Exporting...'));
        
        if ($('#recherches-tab').hasClass('active')) {
            recherches_tab_is_active = true;
        }
        if (!recherches_tab_is_active) {
            $('#recherches-tab').addClass('active');
        }
        // $('#page-wrapper').append(app.get_loader());
        app.btn_loader('#export_dashboard_to_pdf');
        setTimeout(statExport.export_to_pdf, 1000);
        
        return false;
    });
});