dev-chiefworks
204 lines
10 KiB
PHP
204 lines
10 KiB
PHP
<script>
|
|
if(typeof numberWithCommas === 'undefined'){
|
|
function numberWithCommas(x) {
|
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
}
|
|
</script>
|
|
<link href="/assets/css/member/activity.css" rel="stylesheet" type="text/css" />
|
|
<div class="panel panel-flat" style="background-color: aliceblue;">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="wrap-activites-table">
|
|
<h4>User App Activities</h4>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<ul class="nav nav-tabs list-active-tab" role="tablist">
|
|
<li class="nav-item active">
|
|
<a class="nav-link active" href="#activity" role="tab" data-toggle="tab" aria-selected="true" data-screen-name="activity">Activity</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#timetravel" role="tab" data-toggle="tab" data-screen-name="activity-time-traveled">Time Travel</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#spentcategory" role="tab" data-toggle="tab" data-screen-name="activity-monthly-spent">Spent Category</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#emission" role="tab" data-toggle="tab" data-screen-name="activity-emissions">Emission</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#personalty" role="tab" data-toggle="tab" data-screen-name="activity-personality">Personalty</a>
|
|
</li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div class="wrap-form-date-range-filter" style="max-width: 400px; margin-bottom: 20px;">
|
|
<form name="range-date-filter">
|
|
<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">
|
|
<div class="input-group-btn">
|
|
<button class="btn btn-default" type="submit">
|
|
<i class="glyphicon glyphicon-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane active" id="activity" data-action="getTripreport">
|
|
<?php if ( isset( $trip_report ) ): ?>
|
|
<div class="col-12" id="getTripreport">
|
|
<?php include_once( __DIR__ . '/activities/activity.php' ); ?>
|
|
</div>
|
|
<?php endif ?>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="timetravel" data-action="getTimetravel">
|
|
<?php if ( $timetravel_data ): ?>
|
|
<div id="getTimetravel">
|
|
<?php include_once( __DIR__ . '/activities/timetravel.php' ); ?>
|
|
</div>
|
|
<?php endif ?>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="spentcategory" data-action="getSpentCategory">
|
|
<div class="row" id="getSpentCategory">
|
|
<?php include_once( __DIR__ . '/activities/spentcategory.php' ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="emission" data-action="getEmissions">
|
|
<div class="row" id="getEmissions">
|
|
<?php include_once( __DIR__ . '/activities/emissions.php' ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane fade" id="personalty" data-action="getPersonalty">
|
|
<div class="row" id="getPersonalty">
|
|
<?php include_once( __DIR__ . '/activities/personalty.php' ); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /current server load -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
// Load member's activities cards for each activity
|
|
if(typeof filterParams !== "undefined"){
|
|
filterParams.member_id = <?= $member_id ?>;
|
|
}
|
|
|
|
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
var screen_name = $(e.target).data('screen-name');
|
|
|
|
if (screen_name != 'activity' && typeof filterParams!=='undefined') {
|
|
filterParams.screen_name = screen_name;
|
|
}
|
|
});
|
|
|
|
(function( $ ) {
|
|
// add input range date
|
|
var customizer = {
|
|
rangeDateInput: $('.inp-filter-date'),
|
|
formFilterByRange: $('form[name="range-date-filter"]'),
|
|
memberId: '<?php echo $selected_user['id']; ?>',
|
|
oldFilter: '<?php echo (isset( $start_date ) and isset( $end_date )) ? $start_date . ' - ' . $end_date : ''; ?>',
|
|
activeTab: '<?php echo $active_tab; ?>',
|
|
init: function() {
|
|
this.rangeDateInputInit();
|
|
this.filterByRangeDate();
|
|
this.triggerShowNext();
|
|
|
|
if ( this.oldFilter.length ) {
|
|
this.rangeDateInput.val( this.oldFilter );
|
|
}
|
|
|
|
// active tab
|
|
$('ul.list-active-tab').find('a[href="'+this.activeTab+'"]').trigger('click');
|
|
},
|
|
enabledNext: function() {
|
|
$('.calendar.left').find('th.month').next().addClass('next available').html('<i class="icon-arrow-right32"></i>');
|
|
},
|
|
triggerShowNext: function() {
|
|
$(document.body).find('.calendar')
|
|
.on('click.daterangepicker', '.prev', customizer.enabledNext)
|
|
.on('click.daterangepicker', '.next', customizer.enabledNext)
|
|
.on('mousedown.daterangepicker', 'td.available', customizer.enabledNext)
|
|
.on('mouseenter.daterangepicker', 'td.available', customizer.enabledNext)
|
|
.on('mouseleave.daterangepicker', 'td.available', customizer.enabledNext);
|
|
|
|
$(document.body).find('.ranges')
|
|
.on('mouseenter.daterangepicker', 'li', customizer.enabledNext);
|
|
},
|
|
rangeDateInputInit: function() {
|
|
this.rangeDateInput.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.rangeDateInput.on('show.daterangepicker', function(event) {
|
|
customizer.enabledNext();
|
|
});
|
|
|
|
this.rangeDateInput.on('apply.daterangepicker', function(ev, picker) {
|
|
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
|
|
});
|
|
|
|
this.rangeDateInput.on('cancel.daterangepicker', function(ev, picker) {
|
|
$(this).val('');
|
|
});
|
|
},
|
|
filterByRangeDate: function() {
|
|
this.formFilterByRange.on('submit', function(event) {
|
|
event.preventDefault();
|
|
try {
|
|
// get current tab
|
|
var _this = $(this),
|
|
_input = _this.find( customizer.rangeDateInput ),
|
|
_active = $('ul.list-active-tab').find('li.active').children('a').attr('href'),
|
|
startDate,
|
|
endDate;
|
|
|
|
if ( _input.val().length <= 0 ) {
|
|
startDate = null;
|
|
endDate = null;
|
|
} else {
|
|
var rangeDate = _input.val().split('-');
|
|
startDate = $.trim(rangeDate[0]);
|
|
endDate = $.trim(rangeDate[1]);
|
|
}
|
|
viewMemberActionLimitOffset( 'ACTIVITIES', customizer.memberId, 50, 0, {'start_date': startDate, 'end_date': endDate, 'active_tab': _active } );
|
|
} catch (err) {
|
|
console.log( err );
|
|
}
|
|
});
|
|
}
|
|
};
|
|
customizer.init();
|
|
})(jQuery);
|
|
</script>
|