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

Hargata/sort.gas.tab

README.md

@@ -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)
+Support this project by [Subscribing on Patreon](https://patreon.com/LubeLogger) or [Making a Donation](https://buy.stripe.com/aEU9Egc8DdMc9bO144)
-
-Alternatively, you can also donate on [Stripe](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.

Views/Home/Index.cshtml

@@ -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>

Views/Home/_GarageDisplay.cshtml

@@ -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>

Views/Home/_Settings.cshtml

@@ -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>

wwwroot/js/garage.js

@@ -61,13 +61,22 @@ function hidePinnedNotes(vehicleId) {
     }
 }
 
-function filterGarage(sender) {
+function filterGarage(sender, isSort) {
-    var tagName = sender.textContent;
     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);
+        }
+    }
 }