mirror of
https://github.com/hargata/lubelog.git
synced 2025-12-10 00:46:08 -06:00
Merge pull request #735 from hargata/Hargata/costtable.row.highlight
added row highlighting when viewing cost tables.
This commit is contained in:
commit
d65001f412
@ -22,10 +22,10 @@
|
||||
<table class="table table-hover">
|
||||
<thead class="sticky-top">
|
||||
<tr class="d-flex">
|
||||
<th scope="col" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@(translator.Translate(userLanguage, "Year"))</th>
|
||||
<th scope="col" style="cursor:pointer;" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@(translator.Translate(userLanguage, "Year"))</th>
|
||||
@foreach(int year in years){
|
||||
if (year != default){
|
||||
<th scope="col" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@year</th>
|
||||
<th scope="col" style="cursor:pointer;" onclick="toggleBarChartTableData()" class="col-2 flex-grow-1 flex-shrink-1 text-truncate">@year</th>
|
||||
}
|
||||
}
|
||||
</tr>
|
||||
|
||||
@ -16,28 +16,33 @@
|
||||
new Chart($("#pie-chart"), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: [decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")')],
|
||||
labels: [
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")'),
|
||||
decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")')
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Type")'),
|
||||
backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"],
|
||||
backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ffa600", "#ff6361" ],
|
||||
data: [
|
||||
globalParseFloat('@Model.ServiceRecordSum'),
|
||||
globalParseFloat('@Model.CollisionRecordSum'),
|
||||
globalParseFloat('@Model.UpgradeRecordSum'),
|
||||
globalParseFloat('@Model.TaxRecordSum'),
|
||||
globalParseFloat('@Model.GasRecordSum')
|
||||
globalParseFloat('@Model.GasRecordSum'),
|
||||
globalParseFloat('@Model.TaxRecordSum')
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
onClick: (e) => {
|
||||
showDataTable();
|
||||
onClick: (e, a, c) => {
|
||||
showDataTable(a);
|
||||
},
|
||||
onHover: (e, a, c) => {
|
||||
a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
|
||||
@ -52,8 +52,11 @@
|
||||
]
|
||||
},
|
||||
options: {
|
||||
onClick: (e) => {
|
||||
showBarChartTable();
|
||||
onClick: (e, a, c) => {
|
||||
showBarChartTable(a);
|
||||
},
|
||||
onHover: (e, a, c) => {
|
||||
a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
|
||||
@ -176,7 +176,7 @@ function refreshBarChart() {
|
||||
});
|
||||
setSelectedMetrics();
|
||||
}
|
||||
function showBarChartTable() {
|
||||
function showBarChartTable(elemClicked) {
|
||||
var selectedMetrics = [];
|
||||
var vehicleId = GetVehicleId().vehicleId;
|
||||
var year = getYear();
|
||||
@ -208,6 +208,14 @@ function showBarChartTable() {
|
||||
}, function (data) {
|
||||
$("#vehicleDataTableModalContent").html(data);
|
||||
$("#vehicleDataTableModal").modal('show');
|
||||
//highlight clicked row.
|
||||
if (elemClicked.length > 0) {
|
||||
var rowClickedIndex = elemClicked[0].index + 1;
|
||||
var rowToHighlight = $("#vehicleDataTableModalContent").find(`tbody > tr:nth-child(${rowClickedIndex})`);
|
||||
if (rowToHighlight.length > 0) {
|
||||
rowToHighlight.addClass('table-info');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function toggleBarChartTableData() {
|
||||
@ -311,12 +319,19 @@ function exportAttachments() {
|
||||
}
|
||||
});
|
||||
}
|
||||
function showDataTable() {
|
||||
function showDataTable(elemClicked) {
|
||||
var vehicleId = GetVehicleId().vehicleId;
|
||||
var year = getYear();
|
||||
$.get(`/Vehicle/GetCostTableForVehicle?vehicleId=${vehicleId}`, { year: year }, function (data) {
|
||||
$("#vehicleDataTableModalContent").html(data);
|
||||
$("#vehicleDataTableModal").modal('show');
|
||||
if (elemClicked.length > 0) {
|
||||
var rowClickedIndex = elemClicked[0].index + 1;
|
||||
var rowToHighlight = $("#vehicleDataTableModalContent").find(`tbody > tr:nth-child(${rowClickedIndex})`);
|
||||
if (rowToHighlight.length > 0) {
|
||||
rowToHighlight.addClass('table-info');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function hideDataTable() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user