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

Merge pull request #214 from hargata/Hargata/sort.gas.tab

Browse Source 
Hargata/sort.gas.tab
This commit is contained in:
Hargata Softworks
2024-02-01 20:34:32 -07:00
committed by GitHub
parent f7574a9a60 7bc08c9950
commit a08d4798e1
5 changed files with 77 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -4,9 +4,7 @@ A self-hosted, open-source vehicle service records and maintainence tracker.
Visit our website: https://lubelogger.com
Support this project on [Patreon](https://patreon.com/LubeLogger)
Alternatively, you can also donate on [Stripe](https://buy.stripe.com/aEU9Egc8DdMc9bO144)
Support this project by [Subscribing on Patreon](https://patreon.com/LubeLogger) or [Making a Donation](https://buy.stripe.com/aEU9Egc8DdMc9bO144)
## Why
Because nobody should have to deal with a homemade spreadsheet or a shoebox full of receipts when it comes to vehicle maintainence.

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

@@ -20,14 +20,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>
@@ -35,7 +35,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>

4
Views/Home/_Settings.cshtml
View File

@@ -160,14 +160,14 @@
<img src="/defaults/lubelogger_logo.png" />
</div>
<div class="d-flex justify-content-center">
<small class="text-body-secondary">Version 1.1.0</small>
<small class="text-body-secondary">Version 1.1.1</small>
</div>
<p class="lead">
Proudly developed in the rural town of Price, Utah by Hargata Softworks.
</p>
<p class="lead">
If you enjoyed using this app, please consider spreading the good word.<br />
If you are a commercial user, or if you just want to support the development of this project, consider subscribing to <a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="https://www.patreon.com/LubeLogger" target="_blank">our Patreon</a>
If you are a commercial user, or if you just want to support the development of this project, consider subscribing to <a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="https://www.patreon.com/LubeLogger" target="_blank">our Patreon</a> or make a <a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="https://buy.stripe.com/aEU9Egc8DdMc9bO144" target="_blank">donation</a>
</p>
<div class="d-flex justify-content-center">
<h6 class="display-7 mt-2">Hometown Shoutout</h6>

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');
@@ -81,3 +90,62 @@ function filterGarage(sender) {
$(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);
}
}
}