cphipps/lubelog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added row highlighting when viewing cost tables.

Browse Source
This commit is contained in:
DESKTOP-T0O5CDB\DESK-555BD
2024-11-23 15:34:07 -07:00
parent addf73bc27
commit 9ea223cd0a
4 changed files with 39 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Views/Vehicle/_CostDistanceTableReport.cshtml
View File

@@ -22,10 +22,10 @@
<table class="table table-hover"> <table class="table table-hover">
<thead class="sticky-top"> <thead class="sticky-top">
<tr class="d-flex"> <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){ @foreach(int year in years){
if (year != default){ 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> </tr>

25
Views/Vehicle/_CostMakeUpReport.cshtml
View File

@@ -16,28 +16,33 @@
new Chart($("#pie-chart"), { new Chart($("#pie-chart"), {
type: 'pie', type: 'pie',
data: { data: {
labels: [decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'), labels: [
decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'), decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'), decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")'), decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")')], decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")')
],
datasets: [ datasets: [
{ {
label: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Type")'), label: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Type")'),
backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"], backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ffa600", "#ff6361" ],
data: [ data: [
globalParseFloat('@Model.ServiceRecordSum'), globalParseFloat('@Model.ServiceRecordSum'),
globalParseFloat('@Model.CollisionRecordSum'), globalParseFloat('@Model.CollisionRecordSum'),
globalParseFloat('@Model.UpgradeRecordSum'), globalParseFloat('@Model.UpgradeRecordSum'),
globalParseFloat('@Model.TaxRecordSum'), globalParseFloat('@Model.GasRecordSum'),
globalParseFloat('@Model.GasRecordSum') globalParseFloat('@Model.TaxRecordSum')
] ]
} }
] ]
}, },
options: { options: {
onClick: (e) => { onClick: (e, a, c) => {
showDataTable(); showDataTable(a);
},
onHover: (e, a, c) => {
a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
}, },
plugins: { plugins: {
legend: { legend: {

7
Views/Vehicle/_GasCostByMonthReport.cshtml
View File

@@ -52,8 +52,11 @@
] ]
}, },
options: { options: {
onClick: (e) => { onClick: (e, a, c) => {
showBarChartTable(); showBarChartTable(a);
},
onHover: (e, a, c) => {
a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
}, },
plugins: { plugins: {
title: { title: {

19
wwwroot/js/reports.js
View File

@@ -176,7 +176,7 @@ function refreshBarChart() {
}); });
setSelectedMetrics(); setSelectedMetrics();
} }
function showBarChartTable() { function showBarChartTable(elemClicked) {
var selectedMetrics = []; var selectedMetrics = [];
var vehicleId = GetVehicleId().vehicleId; var vehicleId = GetVehicleId().vehicleId;
var year = getYear(); var year = getYear();
@@ -208,6 +208,14 @@ function showBarChartTable() {
}, function (data) { }, function (data) {
$("#vehicleDataTableModalContent").html(data); $("#vehicleDataTableModalContent").html(data);
$("#vehicleDataTableModal").modal('show'); $("#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() { function toggleBarChartTableData() {
@@ -311,12 +319,19 @@ function exportAttachments() {
} }
}); });
} }
function showDataTable() { function showDataTable(elemClicked) {
var vehicleId = GetVehicleId().vehicleId; var vehicleId = GetVehicleId().vehicleId;
var year = getYear(); var year = getYear();
$.get(`/Vehicle/GetCostTableForVehicle?vehicleId=${vehicleId}`, { year: year }, function (data) { $.get(`/Vehicle/GetCostTableForVehicle?vehicleId=${vehicleId}`, { year: year }, function (data) {
$("#vehicleDataTableModalContent").html(data); $("#vehicleDataTableModalContent").html(data);
$("#vehicleDataTableModal").modal('show'); $("#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() { function hideDataTable() {