mirror of
https://github.com/hargata/lubelog.git
synced 2025-12-10 00:46:08 -06:00
Merge pull request #176 from hargata/Hargata/pinned.notes.garage
touch screen support for pinned notes.
This commit is contained in:
commit
6f0115e5c5
@ -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">
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user