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

make cost columns sortable.

Browse Source
This commit is contained in:
DESKTOP-T0O5CDB\DESK-555BD
2024-01-27 07:37:39 -07:00
parent 093631bf6f
commit f00ab897b5
7 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Views/Shared/_Layout.cshtml
View File

@@ -59,10 +59,16 @@
//remove thousands separator.
var thousandSeparator = "@numberFormat.NumberGroupSeparator";
var decimalSeparator = "@numberFormat.NumberDecimalSeparator";
var currencySymbol = "@numberFormat.CurrencySymbol";
if (input == "---") {
input = "0";
}
//strip thousands from input.
input = input.replace(thousandSeparator, "");
//convert to JS format where decimal is only separated by .
input = input.replace(decimalSeparator, ".");
//remove any currency symbol
input = input.replace(currencySymbol, "");
return parseFloat(input);
}
function globalFloatToString(input) {

2
Views/Vehicle/_CollisionRecords.cshtml
View File

@@ -45,7 +45,7 @@
<th scope="col" class="col-2 col-xl-1">Date</th>
<th scope="col" class="col-2">Odometer</th>
<th scope="col" class="col-3 col-xl-4">Description</th>
<th scope="col" class="col-2">Cost</th>
<th scope="col" class="col-2" onclick="toggleSort('accident-tab-pane', this)" style="cursor:pointer;">Cost</th>
<th scope="col" class="col-3">Notes</th>
</tr>
</thead>

8
Views/Vehicle/_Gas.cshtml
View File

@@ -77,10 +77,10 @@
<tr class="d-flex">
<th scope="col" class="col-2">Date Refueled</th>
<th scope="col" class="col-2">Odometer(@(distanceUnit))</th>
<th scope="col" class="col-2">Consumption(@(consumptionUnit))</th>
<th scope="col" class="col-4">Fuel Economy(@(fuelEconomyUnit))</th>
<th scope="col" class="col-1">Cost</th>
<th scope="col" class="col-1">Unit Cost</th>
<th scope="col" class="col-2" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Consumption(@(consumptionUnit))</th>
<th scope="col" class="col-4" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Fuel Economy(@(fuelEconomyUnit))</th>
<th scope="col" class="col-1" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Cost</th>
<th scope="col" class="col-1" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Unit Cost</th>
</tr>
</thead>
<tbody>

2
Views/Vehicle/_ServiceRecords.cshtml
View File

@@ -45,7 +45,7 @@
<th scope="col" class="col-2 col-xl-1">Date</th>
<th scope="col" class="col-2">Odometer</th>
<th scope="col" class="col-3 col-xl-4">Description</th>
<th scope="col" class="col-2">Cost</th>
<th scope="col" class="col-2" onclick="toggleSort('servicerecord-tab-pane', this)" style="cursor:pointer;">Cost</th>
<th scope="col" class="col-3">Notes</th>
</tr>
</thead>

2
Views/Vehicle/_TaxRecords.cshtml
View File

@@ -44,7 +44,7 @@
<tr class="d-flex">
<th scope="col" class="col-3 col-xl-1">Date</th>
<th scope="col" class="col-4 col-xl-6">Description</th>
<th scope="col" class="col-2">Cost</th>
<th scope="col" class="col-2" onclick="toggleSort('tax-tab-pane', this)" style="cursor:pointer;">Cost</th>
<th scope="col" class="col-3">Notes</th>
</tr>
</thead>

2
Views/Vehicle/_UpgradeRecords.cshtml
View File

@@ -45,7 +45,7 @@
<th scope="col" class="col-2 col-xl-1">Date</th>
<th scope="col" class="col-2">Odometer</th>
<th scope="col" class="col-3 col-xl-4">Description</th>
<th scope="col" class="col-2">Cost</th>
<th scope="col" class="col-2" onclick="toggleSort('upgrade-tab-pane', this)" style="cursor:pointer;">Cost</th>
<th scope="col" class="col-3">Notes</th>
</tr>
</thead>

57
wwwroot/js/shared.js
View File

@@ -158,4 +158,61 @@ function setDebounce(callBack) {
debounce = setTimeout(function () {
callBack();
}, 1000);
}
var storedTableRowState = null;
function toggleSort(tabName, sender) {
var sortColumn = sender.textContent;
var sortAscIcon = '<i class="bi bi-sort-numeric-down ms-2"></i>';
var sortDescIcon = '<i class="bi bi-sort-numeric-down-alt ms-2"></i>';
sender = $(sender);
//order of sort - asc, desc, reset
if (sender.hasClass('sort-asc')) {
sender.removeClass('sort-asc');
sender.addClass('sort-desc');
sender.html(`${sortColumn}${sortDescIcon}`);
sortTable(tabName, sortColumn, true);
} else if (sender.hasClass('sort-desc')) {
//restore table
sender.removeClass('sort-desc');
sender.html(`${sortColumn}`);
$(`#${tabName} table tbody`).html(storedTableRowState);
} else {
//first time sorting.
//check if table was sorted before by a different column(only relevant to fuel tab)
if (storedTableRowState != null && ($(".sort-asc").length > 0 || $(".sort-desc").length > 0)) {
//restore table state.
$(`#${tabName} table tbody`).html(storedTableRowState);
//reset other sorted columns
if ($(".sort-asc").length > 0) {
$(".sort-asc").html($(".sort-asc").html().replace(sortAscIcon, ""));
$(".sort-asc").removeClass("sort-asc");
}
if ($(".sort-desc").length > 0) {
$(".sort-desc").html($(".sort-desc").html().replace(sortDescIcon, ""));
$(".sort-desc").removeClass("sort-desc");
}
}
sender.addClass('sort-asc');
sender.html(`${sortColumn}${sortAscIcon}`);
storedTableRowState = null;
storedTableRowState = $(`#${tabName} table tbody`).html();
sortTable(tabName, sortColumn, false);
}
}
function sortTable(tabName, columnName, desc) {
//get column index.
var columns = $(`#${tabName} table th`).toArray().map(x => x.innerText);
var colIndex = columns.findIndex(x => x == columnName);
//get row data
var rowData = $(`#${tabName} table tbody tr`);
var sortedRow = rowData.toArray().sort((a, b) => {
var currentVal = globalParseFloat(a.children[colIndex].textContent);
var nextVal = globalParseFloat(b.children[colIndex].textContent);
if (desc) {
return nextVal - currentVal;
} else {
return currentVal - nextVal;
}
});
$(`#${tabName} table tbody`).html(sortedRow);
}