dev-chiefworks
335 lines
14 KiB
PHP
335 lines
14 KiB
PHP
<?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>
|