Merge pull request #735 from hargata/Hargata/costtable.row.highlight

added row highlighting when viewing cost tables.
This commit is contained in:
Hargata Softworks 2024-11-23 15:34:37 -07:00 committed by GitHub
commit d65001f412
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 39 additions and 16 deletions

View File

@ -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>

View File

@ -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: {

View File

@ -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: {

View File

@ -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() {