first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,334 @@
|
||||
<?php
|
||||
$ttrs = $ttrCharts = [];
|
||||
$ttrTotalItems = isset($timetravel_data['report']) ? count($timetravel_data['report']) : 0;
|
||||
|
||||
$checkDateRangeExist = ( isset( $start_date ) and !empty( $start_date ) ) and ( isset( $end_date ) and !empty( $end_date ) );
|
||||
|
||||
if ( !$checkDateRangeExist ) {
|
||||
if ($ttrTotalItems >= 7) {
|
||||
$ttrs['7D'] = array_slice($timetravel_data['report'], -7, 7, true);
|
||||
}
|
||||
if ($ttrTotalItems >= 30) {
|
||||
$ttrs['30D'] = array_slice($timetravel_data['report'], -30, 30, true);
|
||||
if ($ttrTotalItems > 30) {
|
||||
$ttrs[$ttrTotalItems . 'D'] = $timetravel_data['report'];
|
||||
}
|
||||
} elseif ($ttrTotalItems > 0) {
|
||||
$ttrs[$ttrTotalItems . 'D'] = $timetravel_data['report'];
|
||||
}
|
||||
} else {
|
||||
$ttrs['dateranges'] = ( $ttrTotalItems > 0 ) ? array_reverse( $timetravel_data['report'] ) : array();
|
||||
}
|
||||
|
||||
$timeTravelledTotal7 = $timeTravelledTotal30 = $timeTravelledTotal60 = $daterangesTravelledTotal = $daysCounter = 0;
|
||||
if ($ttrTotalItems > 0) {
|
||||
//array_reverse to get newest
|
||||
foreach (array_reverse($timetravel_data['report']) as $k => $v) {
|
||||
$daysCounter++;
|
||||
$timeTravelled = 0;
|
||||
|
||||
if (isset($v[$k])) {
|
||||
$timeTravelled = 0;//$v[$k]['duration'] ?? 0;
|
||||
foreach ($v[$k] as $item_k){
|
||||
$timeTravelled+=$item_k['duration']??0;
|
||||
}
|
||||
}
|
||||
|
||||
if ( !$checkDateRangeExist ) {
|
||||
if ($daysCounter <= 7) {
|
||||
$timeTravelledTotal7 += $timeTravelled;
|
||||
}
|
||||
if ($daysCounter <= 30) {
|
||||
$timeTravelledTotal30 += $timeTravelled;
|
||||
}
|
||||
if ($daysCounter <= 60) {
|
||||
$timeTravelledTotal60 += $timeTravelled;
|
||||
}
|
||||
} else {
|
||||
$daterangesTravelledTotal += $timeTravelled;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="col-lg-5 overflow-auto">
|
||||
<div class="f-two-tables" style="display: flex; flex-direction: column">
|
||||
<div class="table-responsive" style="order:1;margin-top: 10px;">
|
||||
<table class="table table-striped table-hover table-bordered table-condensed">
|
||||
<thead class="bg-indigo">
|
||||
<tr>
|
||||
<th></th>
|
||||
<?php if ( !$checkDateRangeExist ): ?>
|
||||
<th>7 days</th>
|
||||
<th>30 days</th>
|
||||
<th>60 days</th>
|
||||
<?php else: ?>
|
||||
<th><?php printf( 'from %s to %s', $start_date, $end_date ); ?></th>
|
||||
<?php endif ?>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-center">Total Time traveled</th>
|
||||
<?php if ( !$checkDateRangeExist ): ?>
|
||||
<td class="sys-ttv" data-minutes="<?=$timeTravelledTotal7??0?>"><?= $timeTravelledTotal7 ?? 0 ?> <strong></strong></td>
|
||||
<td class="sys-ttv" data-minutes="<?=$timeTravelledTotal30??0?>"><?= $timeTravelledTotal30 ?? 0 ?> <strong></strong></td>
|
||||
<td class="sys-ttv" data-minutes="<?=$timeTravelledTotal60??0?>"><?= $timeTravelledTotal60 ?? 0 ?> <strong></strong></td>
|
||||
<?php else: ?>
|
||||
<td><?php echo $daterangesTravelledTotal ?? 0; ?></td>
|
||||
<?php endif ?>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<?php if ( $ttrs ): ?>
|
||||
<?php foreach ( $ttrs as $totalDays => $timetravelDataReportFiltered ): ?>
|
||||
<div class="table-responsive timetravel_table_wrap"
|
||||
id="timetravel_table_wrap_<?= $totalDays ?>"
|
||||
style="order: 2; margin-top: 10px;">
|
||||
<table id="timetravel_table_<?= $totalDays ?>"
|
||||
class="table table-striped table-bordered"
|
||||
style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Transport Mode</th>
|
||||
<th>Transport Mode</th>
|
||||
<th>Merchant Name</th>
|
||||
<th>Distance Travelled</th>
|
||||
<th>Time Travelled</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$ttrChart = [
|
||||
'labels' => [],
|
||||
'data' => [],
|
||||
'total_minutes' => 0
|
||||
];
|
||||
$curTimeTravelledPoint = 0;
|
||||
|
||||
foreach ($timetravelDataReportFiltered as $k => $v) {
|
||||
$transportMode = $marchantName = '-';
|
||||
$distance = $v['distance'] ?? 0;
|
||||
$date = $v['date'] ?? '-';
|
||||
$marchantName = $transportMode = '-';
|
||||
$timeTravelled = $v['duration']??0;
|
||||
if (isset($v[$k])) {
|
||||
$category_default = $v[$k]['category']??'';
|
||||
$merchant_name_default = $v[$k]['merchant_name']??'';
|
||||
foreach ($v[$k] as $child){
|
||||
$timeTravelled += $child['duration']??0;
|
||||
echo '<tr>';
|
||||
echo '<td>' . ($child['category']??$category_default) . '</td>';
|
||||
echo '<td>' . ($child['category']??$category_default) . '</td>';
|
||||
echo '<td>' . ($child['merchant_name']??$merchant_name_default) . '</td>';
|
||||
echo '<td>' . $distance . '</td>';
|
||||
echo '<td>' . $child['duration'] . '</td>';
|
||||
echo '<td>' . $date . '</td>';
|
||||
echo '</tr>';
|
||||
}
|
||||
}else{
|
||||
echo '<tr>';
|
||||
echo '<td>' . $transportMode . '</td>';
|
||||
echo '<td>' . $transportMode . '</td>';
|
||||
echo '<td>' . $marchantName . '</td>';
|
||||
echo '<td>' . $distance . '</td>';
|
||||
echo '<td>' . $timeTravelled . '</td>';
|
||||
echo '<td>' . $date . '</td>';
|
||||
echo '</tr>';
|
||||
}
|
||||
|
||||
$curTimeTravelledPoint += $timeTravelled; // time increase
|
||||
//final chart
|
||||
$ttrChart['labels'][] = $date;
|
||||
$ttrChart['data'][] = $curTimeTravelledPoint;
|
||||
$ttrChart['total_minutes'] += $timeTravelled;
|
||||
}
|
||||
//push charts
|
||||
$ttrCharts[$totalDays] = $ttrChart;
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
window.toHHMM = function (sec) {
|
||||
var sec_num = parseInt(sec, 10); // don't forget the second param
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
|
||||
var seconds = sec_num - (hours * 3600) - (minutes * 60);
|
||||
|
||||
if (hours < 10) {hours = "0"+hours;}
|
||||
if (minutes < 10 && hours>0) {minutes = "0"+minutes;}
|
||||
if (seconds < 10) {seconds = "0"+seconds;}
|
||||
if(parseInt(hours)>0){
|
||||
return hours+'h '+minutes+'m';
|
||||
}
|
||||
return minutes+'m';
|
||||
}
|
||||
// format time in total time traveled
|
||||
$(function(){
|
||||
$('td.sys-ttv').each(function(){
|
||||
let minutes = $(this).data('minutes') || 0;
|
||||
$(this).find('strong').first().html('<br/>'+toHHMM(minutes*60));
|
||||
});
|
||||
});
|
||||
|
||||
var timetravel_charts = <?php echo json_encode($ttrCharts); ?>;
|
||||
var timetravel_keys = <?php echo json_encode(array_keys($ttrs)); ?>;
|
||||
$(function () {
|
||||
timetravel_keys.forEach(function (id) {
|
||||
$('#timetravel_table_' + id).DataTable({
|
||||
"columnDefs": [
|
||||
{
|
||||
"targets": [1],
|
||||
"visible": false,
|
||||
"searchable": false
|
||||
}
|
||||
],
|
||||
"order": [[5, "desc"]]
|
||||
});
|
||||
});
|
||||
for (var chart_id in timetravel_charts) {
|
||||
var ctx = document.getElementById('timetravel_chart_' + chart_id);
|
||||
if ( ctx == null ) {
|
||||
continue;
|
||||
}
|
||||
ctx = ctx.getContext('2d');
|
||||
var yticks = {
|
||||
min: 0, // it is for ignoring negative step.
|
||||
beginAtZero: true,
|
||||
callback: function(value, index, values) {
|
||||
if (Math.floor(value) === value) {
|
||||
return value+'m';
|
||||
}
|
||||
}
|
||||
};
|
||||
if(timetravel_charts[chart_id].total_minutes>0){
|
||||
yticks = {
|
||||
beginAtZero: true,
|
||||
callback: function(label, index, labels) {
|
||||
return toHHMM(parseInt(label)*60);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
new Chart(ctx, {
|
||||
// The type of chart we want to create
|
||||
type: 'line', // also try bar or other graph types
|
||||
// The data for our dataset
|
||||
data: {
|
||||
labels: timetravel_charts[chart_id].labels,
|
||||
// Information about the dataset
|
||||
datasets: [{
|
||||
label: "Time travel",
|
||||
backgroundColor: 'lightblue',
|
||||
borderColor: 'royalblue',
|
||||
data: timetravel_charts[chart_id].data,
|
||||
}]
|
||||
},
|
||||
// Configuration options
|
||||
options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
title: function(tooltipItem, data) {
|
||||
return data['labels'][tooltipItem[0]['index']];
|
||||
},
|
||||
label: function (tooltipItem, data) {
|
||||
return toHHMM(tooltipItem.value*60);
|
||||
},
|
||||
},
|
||||
backgroundColor: '#FFF',
|
||||
titleFontSize: 16,
|
||||
titleFontColor: '#0066ff',
|
||||
bodyFontColor: '#000',
|
||||
bodyFontSize: 14,
|
||||
displayColors: false
|
||||
},
|
||||
layout: {
|
||||
padding: 10,
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time travelled (' + toHHMM(timetravel_charts[chart_id].total_minutes*60) + ')'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Time value'
|
||||
},
|
||||
ticks: yticks,
|
||||
}],
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: chart_id
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function fn_show_ttr(id) {
|
||||
$('.timetravel_chart').hide();
|
||||
$('#timetravel_chart_' + id).show();
|
||||
|
||||
$('.timetravel_table_wrap').hide();
|
||||
$('#timetravel_table_wrap_' + id).show();
|
||||
|
||||
$(".btn_switch_ttr").removeClass('btn-success');
|
||||
$("#btn_switch_ttr_" + id).addClass('btn-success');
|
||||
}
|
||||
|
||||
if (timetravel_keys.length > 0) {
|
||||
//trigger show first default
|
||||
fn_show_ttr(timetravel_keys[0]);//timetravel_keys.length - 1
|
||||
}
|
||||
</script>
|
||||
<div class="col-lg-7 overflow-auto">
|
||||
<?php if ($ttrTotalItems > 0) { ?>
|
||||
<h4>Time Travel Chart</h4>
|
||||
<?php if ( !$checkDateRangeExist ): ?>
|
||||
<div class="text-center" style="margin-bottom: 8px;">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<?php
|
||||
foreach (array_keys($ttrs) as $id) {
|
||||
echo '<button type="button" id="btn_switch_ttr_' . $id . '" class="btn_switch_ttr btn btn-outline-secondary" onclick="fn_show_ttr(\'' . $id . '\')">' . $id . '</button>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<!-- Members online -->
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<?php
|
||||
foreach ($ttrCharts as $totalDays => $chart) {
|
||||
echo ' <canvas class="timetravel_chart" id="timetravel_chart_' . $totalDays . '" width="400" height="200"></canvas>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /members online -->
|
||||
<?php } ?>
|
||||
|
||||
|
||||
<div>
|
||||
<?php
|
||||
$activities_cards = $timetravel_data['options']['cards']??[];
|
||||
include( __DIR__ . '/cards.php' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user