From 812e768f93f31008fab9884f8b11b27f4f3d627c Mon Sep 17 00:00:00 2001
From: "DESKTOP-GENO133\\IvanPlex" <ivancheahkf@gmail.com>
Date: Fri, 2 Feb 2024 07:01:42 -0700
Subject: [PATCH] added sorting functionality to touch screen devices.

---
 Views/Home/Index.cshtml |  2 +-
 wwwroot/js/garage.js    | 26 ++++++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
index d4fb0fd..86ffe5b 100644
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@@ -14,7 +14,7 @@
 <div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
     <ul class="navbar-nav" 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"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button>
+            <button class="nav-link user-select-none @(Model == "garage" ? "active" : "")" ontouchstart="detectLongTouch(this)" ontouchend="detectTouchEndPremature(this)" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button>
         </li>
         <li class="nav-item" 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"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>Settings</span></button>
diff --git a/wwwroot/js/garage.js b/wwwroot/js/garage.js
index 81912d5..62df2ea 100644
--- a/wwwroot/js/garage.js
+++ b/wwwroot/js/garage.js
@@ -105,8 +105,26 @@ function sortVehicles(desc) {
     sortedRow.push($('.garage-item-add'))
     $('.vehiclesContainer').html(sortedRow);
 }
-function sortGarage(sender) {
+
+var touchtimer;
+var touchduration = 800;
+function detectLongTouch(sender) {
     event.preventDefault();
+    if (!touchtimer) {
+        touchtimer = setTimeout(function () { sortGarage(sender, true); detectTouchEndPremature(sender); }, touchduration);
+    }
+}
+function detectTouchEndPremature(sender) {
+    if (touchtimer) {
+        clearTimeout(touchtimer);
+        touchtimer = null;
+    }
+}
+
+function sortGarage(sender, isMobile) {
+    if (event != undefined) {
+        event.preventDefault();
+    }
     sender = $(sender);
     if (sender.hasClass("active")) {
         //do sorting only if garage is the active tab.
@@ -117,12 +135,12 @@ function sortGarage(sender) {
         if (sender.hasClass('sort-asc')) {
             sender.removeClass('sort-asc');
             sender.addClass('sort-desc');
-            sender.html(`${garageIcon}${sortColumn}${sortDescIcon}`);
+            sender.html(isMobile ? `<span class="ms-2 display-3">${garageIcon}${sortColumn}${sortDescIcon}</span>` : `${garageIcon}${sortColumn}${sortDescIcon}`);
             sortVehicles(true);
         } else if (sender.hasClass('sort-desc')) {
             //restore table
             sender.removeClass('sort-desc');
-            sender.html(`${garageIcon}${sortColumn}`);
+            sender.html(isMobile ? `<span class="ms-2 display-3">${garageIcon}${sortColumn}</span>` : `${garageIcon}${sortColumn}`);
             $('.vehiclesContainer').html(storedTableRowState);
             filterGarage($(".tagfilter.bg-primary").get(0), true);
         } else {
@@ -142,7 +160,7 @@ function sortGarage(sender) {
                 }
             }
             sender.addClass('sort-asc');
-            sender.html(`${garageIcon}${sortColumn}${sortAscIcon}`);
+            sender.html(isMobile ? `<span class="ms-2 display-3">${garageIcon}${sortColumn}${sortAscIcon}</span>` : `${garageIcon}${sortColumn}${sortAscIcon}`);
             storedTableRowState = null;
             storedTableRowState = $('.vehiclesContainer').html();
             sortVehicles(false);