Proyectos de Subversion LeadersLinked - Backend

<?php

$routeOverview = $this->url('discovery-contacts/progress-by-day');

$this->headLink()->appendStylesheet($this->basePath('plugins/nprogress/nprogress.css'));

$this->inlineScript()->appendFile($this->basePath('plugins/nprogress/nprogress.js'));

$this->inlineScript()->appendFile($this->basePath('plugins/jsrender/jsrender.js'));

$this->headLink()->appendStylesheet($this->basePath('plugins/fontawesome-free/css/all.min.css'));

$this->headLink()->appendStylesheet($this->basePath('plugins/daterangepicker/daterangepicker.css'));

$this->inlineScript()->appendFile($this->basePath('plugins/moment/moment.min.js'));

$this->inlineScript()->appendFile($this->basePath('plugins/daterangepicker/daterangepicker.js'));

$this->inlineScript()->appendFile($this->basePath('plugins/chart.js/chart.js'));

$this->inlineScript()->appendFile($this->basePath('plugins/chartjs-plugin-datalabels/chartjs-plugin-datalabels.js'));

echo <<<CSS

CSS;

$this->headStyle()->captureEnd();

$this->inlineScript()->captureStart();

echo <<<JS

jQuery( document ).ready(function( $ ) {

    var startDate   = moment().format('YYYY-MM-DD');

    var endDate     = moment().format('YYYY-MM-DD');

    var ctxchartProgressByDay = document.getElementById("chartProgressByDay").getContext("2d");

    // draw empty chart

    var chartProgressByDay = new Chart(ctxchartProgressByDay, {

        type: 'line',

        data: {

            labels: [],

            datasets: [

                {

                	label : 'LABEL_CONTACT_PROGRESS_BY_DAY',

         			backgroundColor: '#E69090',

                    borderColor: '#E69090',

                    borderWidth: 1,

                    fill: false,

                    data : []

              	},

            ]

        },

        options: {

            tooltips: {

                mode: 'index',

                intersect: false

            },

            scales: {

                yAxes: [{

                    ticks: {

                        beginAtZero:true

                    }

                }]

            }

        }

    });

    $.fn.reload = function() {

        NProgress.start();

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'get',

            'url'       : '$routeOverview',

            'data'      :  {

                'startDate' : startDate,

                'endDate' : endDate

            },

        }).done(function(response) {

            if(response['success']) {

                chartProgressByDay.data.labels = response.data.added_on;

                chartProgressByDay.data.datasets[0].data = response.data.total_by_day;

                chartProgressByDay.update();

                //Table

                var data = [

                    {

                        "name": response.data.first_name,

                        'last_name':response.data.last_name,

                        "nickname": "Bob",

                        "showNickname": true

                    },

                    {

                        "name": "Susan",

                        "nickname": "Sue",

                        "showNickname": false

                    }

                ];

                var template = $.templates("#theTmpl");

                var htmlOutput = template.render(data);

                $("#result").html(htmlOutput);

            }else{

                $.fn.showError(response);

            }

        }).fail(function( jqXHR, textStatus, errorThrown) {

            $.fn.showError(textStatus);

        }).always(function() {

            NProgress.done();

        });

        return false;

    }

    $('#filterdate').daterangepicker({

        maxDate: new Date(),

        locale: {

            format: 'DD/MM/YYYY',

            applyLabel: 'Aplicar',

            cancelLabel: 'Cancelar',

            daysOfWeek: ['Do', 'Lu','Ma', 'Mi', 'Ju', 'Vi', 'Sa'],

            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',

                'Junio',

                'Agosto',

                'Septiembre',

                'Octubre',

                'Noviembre',

                'Diciembre'

            ],

        }

    });

    $('#filterdate').on('apply.daterangepicker', function(ev, picker) {

        startDate = picker.startDate.format('YYYY-MM-DD');

        endDate =picker.endDate.format('YYYY-MM-DD');

        $.ajax({

            'dataType'  : 'json',

            'accept'    : 'application/json',

            'method'    : 'post',

            'url'       :  '$routeOverview',

            'data'      :  {

                'startDate' : startDate,

                'endDate' : endDate

            },

            'processData': false,

            'contentType': false,

            success: function (response) {

                console.log('enviado');

            }

        });

        $.fn.reload();

    });

    $.fn.reload();

});

JS;

$this->inlineScript()->captureEnd();

?>

<section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-12" id="row-list">

                <div class="card">

                    <div class="card-header">

                        <h2>Progreso Diario de contactos</h2>

                        <div class="form-group">

                            <label>LABEL_DATE_RANGE</label>

                            <div class="input-group">

                                <div class="input-group-prepend">

                                    <span class="input-group-text"><i class="far fa-calendar"></i></span>

                                </div>

                                <input type="text" class="form-control float-right" name="filterdate" id="filterdate">

                            </div>

                            <!-- /.input group -->

                        </div>

                    </div>

                    <div class="card-body">

                        <div class="row">

                            <div class="col-lg-12 col-12 chart">

                                <canvas id="chartProgressByDay" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<div>

   <em>Name:</em> {{:name}}

   <em>Last Name:</em> {{:last_name}}

</div>

</script>

</section>