first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,262 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user