first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,139 @@
|
||||
<div class="row trips_containers">
|
||||
<div class="col-lg-4">
|
||||
<div class="summary-wrapper">
|
||||
<div class="sw-header">
|
||||
<p class="text-center"><strong>Activity</strong></p>
|
||||
<span class="currency">$</span>
|
||||
<span class="total-amount"><?=number_format($trip_report['total_amount'], 2)?></span>
|
||||
<p class="description">
|
||||
<?php
|
||||
$checkDateRangeExist = ( isset( $start_date ) and !empty( $start_date ) ) and ( isset( $end_date ) and !empty( $end_date ) );
|
||||
if ( $checkDateRangeExist ) {
|
||||
printf( 'Total money spent from %s to %s', $start_date, $end_date );
|
||||
} else {
|
||||
printf( 'Total money spent last %s days', $trip_report['data']['days'] );
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="sw-content">
|
||||
<?php foreach($trip_report['report'] as $category) { ?>
|
||||
<div class="item-summary <?php echo count($category['items']) > 0 ? 'active' : '' ?>" data-type="<?php echo $category['type'] ?>">
|
||||
<div class="category"><?=$category['type']?></div>
|
||||
<div class="amount">
|
||||
<p class="currency">$</p>
|
||||
<p class="category-total"><?=number_format($category['spent'], 2)?></p>
|
||||
<p class="right-icon"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
|
||||
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
|
||||
</svg></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<p class="transport-category"></p>
|
||||
<div class="details-wrapper">
|
||||
<table id="transportDetails" style="background-color:aliceblue" class="table table-striped table-hover table-bordered table-condensed">
|
||||
<thead class="bg-indigo">
|
||||
<tr>
|
||||
<th>Data Source</th>
|
||||
<th>ID</th>
|
||||
<th>Import ID</th>
|
||||
<th>Member ID</th>
|
||||
<th>Amount</th>
|
||||
<th>Currency</th>
|
||||
<th>Description</th>
|
||||
<th>Time</th>
|
||||
<th>Category</th>
|
||||
<th>Provider Category</th>
|
||||
<th>Merchant Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const tripData = JSON.parse('<?php echo json_encode($trip_report) ?>');
|
||||
const memberID = (tripData.data || {}).member_id || '';
|
||||
$(document).ready(function() {
|
||||
$('.item-summary.active').on('click', function(e) {
|
||||
const transportType = $(this).data('type');
|
||||
const transportData = tripData.report.find(item => item.type === transportType) || {items: []};
|
||||
const transportItems = parseTransportDetails(transportData.items);
|
||||
const transportItemsHtml = transportItems.map(item => {
|
||||
return gernerateDetail(item);
|
||||
}).join(' ');
|
||||
|
||||
$('.transport-category').text(transportType);
|
||||
$('#transportDetails tbody').html(transportItemsHtml);
|
||||
});
|
||||
|
||||
// find and get first category which has data for display on table
|
||||
let firstData = null;
|
||||
for(let i = 0; i < tripData.report.length; i++) {
|
||||
const item = tripData.report[i];
|
||||
if (!item || !item.items || !item.items.length) {
|
||||
continue;
|
||||
}
|
||||
|
||||
firstData = item;
|
||||
break;
|
||||
}
|
||||
|
||||
if (firstData) {
|
||||
const transportItems = parseTransportDetails(firstData.items);
|
||||
const transportItemsHtml = transportItems.map(item => {
|
||||
return gernerateDetail(item);
|
||||
}).join(' ');
|
||||
|
||||
$('.transport-category').text(firstData.type || '');
|
||||
$('#transportDetails tbody').html(transportItemsHtml);
|
||||
}
|
||||
// End find and get first data
|
||||
});
|
||||
|
||||
function parseTransportDetails($data) {
|
||||
return $data.map(item => {
|
||||
return Object.assign({}, item, {
|
||||
currency: formatCurrency(item.currency),
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function formatCurrency(currency) {
|
||||
return currency.replace(/[0-9]/g, '');
|
||||
}
|
||||
|
||||
function gernerateDetail(data) {
|
||||
let data_source = '';
|
||||
if(data.hasOwnProperty('import_id') && data.import_id){
|
||||
data_source = 'Bank';
|
||||
}else if(data.hasOwnProperty('trackedemail_item_id') && data.trackedemail_item_id){
|
||||
data_source = 'Email';
|
||||
}
|
||||
return `
|
||||
<tr>
|
||||
<td>${data_source}</td>
|
||||
<td>${data.id || ''}</td>
|
||||
<td>${data.import_id || ''}</td>
|
||||
<td>${data.member_id || memberID || ''}</td>
|
||||
<td>${data.cost || ''}</td>
|
||||
<td>${data.currency || ''}</td>
|
||||
<td>${data.description || ''}</td>
|
||||
<td>${data.travel_date || ''}</td>
|
||||
<td>${data.category || ''}</td>
|
||||
<td>${data.provider_category || ''}</td>
|
||||
<td>${data.transport_provider_name || ''}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user