Merge pull request #176 from hargata/Hargata/pinned.notes.garage

touch screen support for pinned notes.
This commit is contained in:
Hargata Softworks 2024-01-27 07:41:06 -07:00 committed by GitHub
commit 6f0115e5c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 72 additions and 9 deletions

View File

@ -4,7 +4,7 @@
{
foreach (Vehicle vehicle in Model)
{
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4" id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none" id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
<div class="card" onclick="viewVehicle(@vehicle.Id)">
<img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down;" />
<div class="card-body">

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

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>

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>

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>

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>

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>

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);
}