Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16822 | Rev 16864 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
15760 anderson 1
<?php
15759 anderson 2
 
16040 anderson 3
$routeOverview = $this->url('discovery-contacts/progress-by-day');
16758 efrain 4
$routeDownload = $this->url('discovery-contacts/progress-by-day/download');
5
 
6
 
16822 efrain 7
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/nprogress/nprogress.css'));
8
$this->inlineScript()->appendFile($this->basePath('assets/vendors/nprogress/nprogress.js'));
9
$this->inlineScript()->appendFile($this->basePath('assets/vendors/jsrender/jsrender.js'));
15760 anderson 10
 
16822 efrain 11
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/fontawesome-free/css/all.min.css'));
12
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/daterangepicker/daterangepicker.css'));
13
$this->inlineScript()->appendFile($this->basePath('assets/vendors/moment/moment.min.js'));
14
$this->inlineScript()->appendFile($this->basePath('assets/vendors/daterangepicker/daterangepicker.js'));
15760 anderson 15
 
16822 efrain 16
$this->headLink()->appendStylesheet($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.css'));
15760 anderson 17
 
16822 efrain 18
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net/jquery.dataTables.js'));
19
$this->inlineScript()->appendFile($this->basePath('assets/vendors/datatables.net-bs5/dataTables.bootstrap5.js'));
16370 anderson 20
 
21
 
16822 efrain 22
$this->inlineScript()->appendFile($this->basePath('assets/vendors/chart.js/chart.js'));
23
$this->inlineScript()->appendFile($this->basePath('assets/vendors/chartjs-plugin-datalabels/chartjs-plugin-datalabels.js'));
15760 anderson 24
 
16758 efrain 25
/*
26
$this->headStyle()->captureStart();
15760 anderson 27
echo <<<CSS
16758 efrain 28
 
29
 
30
#tableUsers {
31
    display: flex;
32
    flex-flow: column;
33
    width: 100%;
34
}
35
 
36
#tableUsers thead {
37
    flex: 0 0 auto;
38
}
39
 
40
#tableUsers tbody {
41
    flex: 1 1 auto;
42
    display: block;
43
    overflow-y: auto;
44
    overflow-x: hidden;
45
}
46
 
47
#tableUsers tr {
48
    width: 100%;
49
    display: table;
50
    table-layout: fixed;
51
}
15760 anderson 52
CSS;
16758 efrain 53
$this->headStyle()->captureEnd();*/
15760 anderson 54
 
55
$this->inlineScript()->captureStart();
56
echo <<<JS
15857 anderson 57
jQuery( document ).ready(function( $ ) {
15760 anderson 58
 
15857 anderson 59
    var startDate   = moment().format('YYYY-MM-DD');
60
    var endDate     = moment().format('YYYY-MM-DD');
15760 anderson 61
 
16047 anderson 62
    var ctxchartProgressByDay = document.getElementById("chartProgressByDay").getContext("2d");
63
    var chartProgressByDay = new Chart(ctxchartProgressByDay, {
16236 anderson 64
        type: 'line',
15857 anderson 65
        data: {
16218 anderson 66
            labels: [],
15857 anderson 67
            datasets: [
68
                {
16232 anderson 69
                	label : 'LABEL_CONTACT_PROGRESS_BY_DAY',
16090 anderson 70
         			backgroundColor: '#E69090',
71
                    borderColor: '#E69090',
72
                    borderWidth: 1,
73
                    fill: false,
16221 anderson 74
                    data : []
16090 anderson 75
              	},
15857 anderson 76
            ]
77
        },
78
        options: {
79
            tooltips: {
80
                mode: 'index',
81
                intersect: false
15760 anderson 82
            },
15857 anderson 83
            scales: {
84
                yAxes: [{
85
                    ticks: {
86
                        beginAtZero:true
15760 anderson 87
                    }
15857 anderson 88
                }]
89
            }
90
        }
91
    });
16047 anderson 92
 
93
    $.fn.reload = function() {
94
        NProgress.start();
95
        $.ajax({
96
            'dataType'  : 'json',
97
            'accept'    : 'application/json',
98
            'method'    : 'get',
99
            'url'       : '$routeOverview',
100
            'data'      :  {
101
                'startDate' : startDate,
102
                'endDate' : endDate
103
            },
104
        }).done(function(response) {
16221 anderson 105
            if(response['success']) {
16569 anderson 106
 
16758 efrain 107
                chartProgressByDay.data.labels = response.data.graph.labels;
108
                chartProgressByDay.data.datasets[0].data = response.data.graph.values;
109
                chartProgressByDay.update()
16628 anderson 110
 
16608 anderson 111
 
16758 efrain 112
                $('#tableUsers').html(
113
                    $('#tableTemplate').render(response.data.table)
114
                );
16608 anderson 115
 
16031 anderson 116
            }else{
16183 anderson 117
                $.fn.showError(response);
16031 anderson 118
            }
15987 anderson 119
        }).fail(function( jqXHR, textStatus, errorThrown) {
120
            $.fn.showError(textStatus);
121
        }).always(function() {
122
            NProgress.done();
15872 anderson 123
        });
15987 anderson 124
        return false;
15872 anderson 125
    }
126
 
16028 anderson 127
    $('#filterdate').daterangepicker({
128
        maxDate: new Date(),
129
        locale: {
130
            format: 'DD/MM/YYYY',
131
            applyLabel: 'Aplicar',
132
            cancelLabel: 'Cancelar',
133
            daysOfWeek: ['Do', 'Lu','Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
134
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',
135
                'Junio',
136
                'Agosto',
137
                'Septiembre',
138
                'Octubre',
139
                'Noviembre',
140
                'Diciembre'
141
            ],
142
        }
143
    });
144
 
16758 efrain 145
    $('#filterdate').on('apply.daterangepicker', function(ev, picker) {
146
        startDate = picker.startDate.format('YYYY-MM-DD');
147
        endDate =picker.endDate.format('YYYY-MM-DD');
148
        $.fn.reload();
149
    });
16381 anderson 150
 
16758 efrain 151
    $('button.btn-download').click(function(e) {
152
        e.preventDefault();
16421 anderson 153
 
16411 anderson 154
 
16758 efrain 155
        NProgress.start();
16237 anderson 156
        $.ajax({
157
            'dataType'  : 'json',
16758 efrain 158
            'method'    : 'get',
159
            'url'       : '$routeDownload',
16237 anderson 160
            'data'      :  {
161
                'startDate' : startDate,
162
                'endDate' : endDate
163
            },
16758 efrain 164
        }).done(function(response) {
165
            if(response['success']) {
166
                var anchor = window.document.createElement("a");
167
                anchor.href = 'data:application/octet-stream;charset=utf-8;base64,' + response['data']['content'] ;
168
                anchor.download = response['data']['basename'];
169
                document.body.appendChild(anchor);
170
                anchor.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
171
                document.body.removeChild(anchor);
172
            } else {
173
                $.fn.showError(response['data']);
16237 anderson 174
            }
16758 efrain 175
        }).fail(function( jqXHR, textStatus, errorThrown) {
176
            showError(textStatus);
177
        }).always(function() {
178
            NProgress.done();
16237 anderson 179
        });
16758 efrain 180
 
181
 
16029 anderson 182
    });
183
 
15875 anderson 184
    $.fn.reload();
15873 anderson 185
 
15857 anderson 186
});
15760 anderson 187
JS;
188
$this->inlineScript()->captureEnd();
189
?>
190
 
191
 
192
 
15857 anderson 193
<section class="content">
15759 anderson 194
    <div class="container-fluid">
195
        <div class="row">
15857 anderson 196
            <div class="col-12" id="row-list">
15759 anderson 197
                <div class="card">
198
                    <div class="card-header">
16543 anderson 199
                        <h2>LABEL_DAILY_PROGRESS_CHART</h2>
15857 anderson 200
                        <div class="form-group">
15859 anderson 201
                            <label>LABEL_DATE_RANGE</label>
15857 anderson 202
 
203
                            <div class="input-group">
204
                                <div class="input-group-prepend">
205
                                    <span class="input-group-text"><i class="far fa-calendar"></i></span>
206
                                </div>
207
                                <input type="text" class="form-control float-right" name="filterdate" id="filterdate">
208
                            </div>
209
                            <!-- /.input group -->
210
                        </div>
15759 anderson 211
                    </div>
212
                    <div class="card-body">
15857 anderson 213
                        <div class="row">
16450 anderson 214
                            <div class="col-lg-12 col-12 chart">
15988 anderson 215
                                <canvas id="chartProgressByDay" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
15857 anderson 216
                            </div>
16448 anderson 217
                        </div>
16758 efrain 218
                    	<div class="row">
219
                            <div class="col-12" id="row-table">
220
                            	<div style="height: 300px;overflow: scroll;">
16822 efrain 221
                    				<table id="tableUsers" style="width: 100%" class="table table-bordered">
16758 efrain 222
                            		</table>
223
                            </div>
224
                        </div>
15759 anderson 225
                    </div>
16758 efrain 226
                	<div class="card-footer clearfix">
227
                        <div class="text-right">
228
                            <button class="btn btn-primary btn-download">LABEL_DOWNLOAD</button>
229
 
230
                        </div>
231
                    </div>
15759 anderson 232
                </div>
233
            </div>
16424 anderson 234
        </div>
16758 efrain 235
   </div>
16450 anderson 236
</section>
16376 anderson 237
 
16633 anderson 238
 
16567 anderson 239
 
16758 efrain 240
<script id="tableTemplate" type="text/x-jsrender">
241
 
242
        <thead>
243
            <tr>
244
                <th>LABEL_FIRST_NAME</th>
245
                <th>LABEL_LAST_NAME</th>
246
                <th>LABEL_EMAIL</th>
247
                {{for labels}}
248
                    <th>
249
                        {{:date}}
250
                    </th>
251
                {{/for}}
16638 anderson 252
        </tr>
16633 anderson 253
    </thead>
16634 anderson 254
    <tbody>
16758 efrain 255
        {{for users}}
16639 anderson 256
            <tr>
16758 efrain 257
                <td>{{:first_name}}</td>
258
                <td>{{:last_name}}</td>
259
                <td>{{:email}}</td>
260
                {{for values}}
261
                <td class="text-right">
262
                    {{:value}}
16641 anderson 263
                </td>
16758 efrain 264
                {{/for}}
16639 anderson 265
            </tr>
266
        {{/for}}
16634 anderson 267
    </tbody>
16633 anderson 268
 
16611 anderson 269
 
16612 anderson 270
 
16563 anderson 271
</script>
16560 anderson 272
 
273
<!-- <section class="content">
16450 anderson 274
    <div class="container-fluid">
16399 anderson 275
        <div class="row">
276
            <div class="col-12" id="row-list">
277
                <div class="card">
278
                    <div class="card-header">
16546 anderson 279
                        <h2>LABEL_CONTACT_JOURNAL_PROGRESS</h2>
16399 anderson 280
                        <div class="form-group">
281
                        </div>
282
                    </div>
283
                    <div class="card-body">
284
                        <div class="row">
285
                            <div class="col-lg-12 col-12 chart">
16845 efrain 286
                                <table id="gridTable" class="table table-striped table-bordered">
16399 anderson 287
                                    <thead>
288
                                        <tr>
16547 anderson 289
                                            <th>LABEL_FIRST_NAME</th>
290
                                            <th>LABEL_LAST_NAME</th>
291
                                            <th>LABEL_EMAIL</th>
292
                                            <th>LABEL_ADDED</th>
293
                                            <th>LABEL_ADDED_DATE</th>
16399 anderson 294
                                        </tr>
295
                                    </thead>
16451 anderson 296
                                </table>
16399 anderson 297
                            </div>
298
                        </div>
299
                    </div>
300
                </div>
301
            </div>
302
        </div>
16560 anderson 303
</section> -->