dev-chiefworks
263 lines
9.2 KiB
PHP
263 lines
9.2 KiB
PHP
<!-- include css -->
|
|
<link href="/assets/css/reports/signup_email_report.css" rel="stylesheet" type="text/css" />
|
|
|
|
<?php
|
|
$startdate = isset( $_GET['startdate'] ) ? str_replace( '-', '/', $_GET['startdate'] ) : null;
|
|
$enddate = isset( $_GET['enddate'] ) ? str_replace( '-', '/', $_GET['enddate'] ) : null;
|
|
?>
|
|
<div class="wrap-form-date-range-filter" style="max-width: 400px; margin-bottom: 20px;">
|
|
<form name="range-date-filter" method="GET" action="/bkoreport/signup_email_report">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
|
|
<input type="text" class="form-control inp-filter-date" placeholder="Search" value="<?php if ( $startdate and $enddate ) echo $startdate . ' - ' . $enddate; ?>">
|
|
<div class="input-group-btn">
|
|
<button class="btn btn-default" type="submit">
|
|
<i class="glyphicon glyphicon-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-2">
|
|
<div class="panel panel-flat" style="background-color:#CEE0D7;">
|
|
<div class="panel-heading">
|
|
<h6 class="panel-title">Signup Email Report</h6>
|
|
<div class="heading-elements"></div>
|
|
</div>
|
|
<table class="table table-striped table-hover table-bordered table-condensed" style="font-size:10px;">
|
|
<thead class="bg-indigo">
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Count</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if ( $signup_emails ): ?>
|
|
<?php foreach ( $signup_emails as $item ): ?>
|
|
<?php
|
|
// $email = call_user_func_array( 'array_merge', $item['email'] );
|
|
// $count = count( $email );
|
|
// $content = implode( "<br/>", $email );
|
|
// array_push( $counts, $count );
|
|
?>
|
|
<tr>
|
|
<td><?php echo $item['day']; ?></td>
|
|
<td><a href="#" type="button" class="btn explode" data-toggle="modal" data-date="<?php echo $item['day']; ?>"><?php echo $item['count']; ?></a></td>
|
|
</tr>
|
|
<?php endforeach ?>
|
|
<?php endif ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-10">
|
|
<canvas id="signup-emails-charts"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Popup - list emails detail -->
|
|
<div class="modal fade" id="explode" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document" style="width: 80%;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Email Details</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div id="pagination" style="margin-left: 20px; margin-top: 20px;"></div>
|
|
<div class="modal-body" id="table-content"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ( $signup_emails ): ?>
|
|
<?php
|
|
$labels = array_map( function( $e ) {return "'$e'"; }, array_column( $signup_emails, 'day') );
|
|
$counts = array_map( function( $e ) {return "'$e'"; }, array_column( $signup_emails, 'count') );
|
|
?>
|
|
<script type="text/javascript">
|
|
(function( $ ) {
|
|
$(function() {
|
|
var buildchart = {
|
|
targ: document.getElementById('signup-emails-charts'),
|
|
init: function() {
|
|
if ( !this.targ ) return;
|
|
this.build();
|
|
},
|
|
build: function() {
|
|
var ctx = this.targ.getContext('2d');
|
|
var chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [<?php echo implode( ', ', $labels ); ?>],
|
|
datasets: [{
|
|
data: [<?php echo implode( ', ', $counts ); ?>],
|
|
backgroundColor: '#d6ebfb',
|
|
borderWidth: 1,
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: { labels: { render: 'value' } },
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
userCallback: function( label, index, labels ) {
|
|
if ( Math.floor(label) === label ) {
|
|
return label;
|
|
}
|
|
}
|
|
},
|
|
}]
|
|
},
|
|
title: {
|
|
display: true,
|
|
fontSize: 18,
|
|
padding: 20,
|
|
text: 'Signup Email Report <?php echo ( $startdate and $enddate ) ? 'from ' . $startdate . ' - to ' . $enddate : 'in last month'; ?>'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
buildchart.init();
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
<?php endif ?>
|
|
<script type="text/javascript">
|
|
(function( $ ) {
|
|
$(function() {
|
|
var daterange = {
|
|
targ: $('.inp-filter-date'),
|
|
form: $('form[name="range-date-filter"]'),
|
|
init: function() {
|
|
if ( !this.targ ) return;
|
|
this.rangeDateInputInit();
|
|
// submit date range filter
|
|
this.submitFilter();
|
|
},
|
|
rangeDateInputInit: function() {
|
|
this.targ.daterangepicker({
|
|
opens: 'right',
|
|
autoUpdateInput: false,
|
|
locale: {
|
|
cancelLabel: 'Clear'
|
|
},
|
|
ranges: {
|
|
'Today': [moment(), moment()],
|
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
|
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
|
'Last 60 Days': [moment().subtract(59, 'days'), moment()],
|
|
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
|
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
|
|
'Two months ago': [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')]
|
|
},
|
|
alwaysShowCalendars: true
|
|
}, function(start, end, label) {
|
|
$('.calendar.left').find('th.month').next().addClass('next available').html('<i class="icon-arrow-right32"></i>');
|
|
});
|
|
|
|
this.targ.on('apply.daterangepicker', function(ev, picker) {
|
|
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
|
|
});
|
|
|
|
this.targ.on('cancel.daterangepicker', function(ev, picker) {
|
|
$(this).val('');
|
|
});
|
|
},
|
|
submitFilter: function() {
|
|
this.form.on('submit', function(event) {
|
|
event.preventDefault();
|
|
var _this = $(this),
|
|
input = _this.find( daterange.targ ),
|
|
startdate,
|
|
enddate;
|
|
|
|
if ( input.val().length <= 0 ) {
|
|
startdate = null;
|
|
enddate = null;
|
|
window.location.replace( '/bkoreport/signup_email_report/' );
|
|
} else {
|
|
var rangeDate = input.val().split('-');
|
|
startdate = $.trim( rangeDate[0].replaceAll('/', '-') );
|
|
enddate = $.trim( rangeDate[1].replaceAll('/', '-') );
|
|
window.location.href = '/bkoreport/signup_email_report/?startdate=' + startdate +'&enddate='+ enddate;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
daterange.init();
|
|
|
|
// run popup
|
|
$(document).on('click', '.explode', function(event) {
|
|
var date = $(this).attr('data-date');
|
|
$('#explode').find('.modal-body').attr( 'data-content', date );
|
|
$('#explode').modal( {cache:false}, 'show' );
|
|
});
|
|
|
|
$(document).on('shown.bs.modal', function(event) {
|
|
var date = $('#explode').find('.modal-body').attr( 'data-content' );
|
|
showTable( date );
|
|
});
|
|
|
|
// pagination
|
|
$(document).on('click', '#pagination>ul>li>a', function(event) {
|
|
event.preventDefault();
|
|
var url = $(this).attr('href');
|
|
$.ajax({
|
|
url: url,
|
|
})
|
|
.done(function( res ) {
|
|
$('#table-content').html( res.results );
|
|
$('#pagination').html( res.pagination.link );
|
|
})
|
|
.fail(function( err ) {
|
|
console.log( err );
|
|
})
|
|
.always(function() {
|
|
console.log("complete");
|
|
});
|
|
|
|
});
|
|
|
|
function showTable( date ) {
|
|
try {
|
|
$.ajax({
|
|
url: '/bkoreport/signup_email_report_details/',
|
|
type: 'GET',
|
|
data: {
|
|
date: date,
|
|
},
|
|
dataType: 'json'
|
|
})
|
|
.done(function( res ) {
|
|
// create datatable
|
|
$('#table-content').html( res.results );
|
|
$('#pagination').html( res.pagination.link );
|
|
})
|
|
.fail(function( err ) {
|
|
console.log( err );
|
|
})
|
|
.always(function() {
|
|
console.log("complete");
|
|
});
|
|
} catch ( err ) {
|
|
alert( err );
|
|
}
|
|
}
|
|
});
|
|
})(jQuery);
|
|
</script>
|