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

add sorting to garage tab.

Browse Source
This commit is contained in:
DESKTOP-GENO133\IvanPlex
2024-02-01 20:21:49 -07:00
parent a11f8377fe
commit ed678c36a5
3 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Home/Index.cshtml
View File

@@ -45,7 +45,7 @@
<hr />
<ul class="nav nav-tabs lubelogger-tab" id="homeTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link @(Model == "garage" ? "active" : "")" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front me-2"></i>Garage</button>
<button class="nav-link @(Model == "garage" ? "active" : "")" oncontextmenu="sortGarage(this)" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front me-2"></i>Garage</button>
</li>
<li class="nav-item ms-auto" role="presentation">
<button class="nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><i class="bi bi-gear me-2"></i>Settings</button>

6
Views/Home/_GarageDisplay.cshtml
View File

@@ -14,14 +14,14 @@
</div>
}
<div class="row">
<div class="row gy-3 align-items-stretch">
<div class="row gy-3 align-items-stretch vehiclesContainer">
@foreach (Vehicle vehicle in Model)
{
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 user-select-none garage-item" data-tags='@string.Join(" ", vehicle.Tags)' 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">
<h5 class="card-title text-truncate">@($"{vehicle.Year}")</h5>
<h5 class="card-title text-truncate garage-item-year" data-unit="@vehicle.Year">@($"{vehicle.Year}")</h5>
<h5 class="card-title text-truncate">@($"{vehicle.Make}")</h5>
<h5 class="card-title text-truncate">@($"{vehicle.Model}")</h5>
<p class="card-text text-truncate">@vehicle.LicensePlate</p>
@@ -29,7 +29,7 @@
</div>
</div>
}
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-xl-2 col-lg-4 col-md-4 col-sm-4 col-4 garage-item-add">
<div class="card" onclick="showAddVehicleModal()" style="height:100%;">
<img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;" />
</div>

72
wwwroot/js/garage.js
View File

@@ -61,13 +61,22 @@ function hidePinnedNotes(vehicleId) {
}
}
function filterGarage(sender) {
var tagName = sender.textContent;
function filterGarage(sender, isSort) {
var rowData = $(".garage-item");
if (sender == undefined) {
rowData.removeClass('override-hide');
return;
}
var tagName = sender.textContent;
if ($(sender).hasClass("bg-primary")) {
if (!isSort) {
rowData.removeClass('override-hide');
$(sender).removeClass('bg-primary');
$(sender).addClass('bg-secondary');
} else {
rowData.addClass('override-hide');
$(`[data-tags~='${tagName}']`).removeClass('override-hide');
}
} else {
//hide table rows.
rowData.addClass('override-hide');
@@ -80,4 +89,63 @@ function filterGarage(sender) {
$(sender).addClass('bg-primary');
$(sender).removeClass('bg-secondary');
}
}
function sortVehicles(desc) {
//get row data
var rowData = $('.garage-item');
var sortedRow = rowData.toArray().sort((a, b) => {
var currentVal = globalParseFloat($(a).find(".garage-item-year").attr('data-unit'));
var nextVal = globalParseFloat($(b).find(".garage-item-year").attr('data-unit'));
if (desc) {
return nextVal - currentVal;
} else {
return currentVal - nextVal;
}
});
sortedRow.push($('.garage-item-add'))
$('.vehiclesContainer').html(sortedRow);
}
function sortGarage(sender) {
event.preventDefault();
sender = $(sender);
if (sender.hasClass("active")) {
//do sorting only if garage is the active tab.
var sortColumn = sender.text();
var garageIcon = '<i class="bi bi-car-front me-2"></i>';
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>';
if (sender.hasClass('sort-asc')) {
sender.removeClass('sort-asc');
sender.addClass('sort-desc');
sender.html(`${garageIcon}${sortColumn}${sortDescIcon}`);
sortVehicles(true);
} else if (sender.hasClass('sort-desc')) {
//restore table
sender.removeClass('sort-desc');
sender.html(`${garageIcon}${sortColumn}`);
$('.vehiclesContainer').html(storedTableRowState);
filterGarage($(".tagfilter.bg-primary").get(0), true);
} 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.
$('.vehiclesContainer').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(`${garageIcon}${sortColumn}${sortAscIcon}`);
storedTableRowState = null;
storedTableRowState = $('.vehiclesContainer').html();
sortVehicles(false);
}
}
}