Merge pull request #176 from hargata/Hargata/pinned.notes.garage

touch screen support for pinned notes.

Views/Home/_GarageDisplay.cshtml

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

Views/Shared/_Layout.cshtml

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

Views/Vehicle/_CollisionRecords.cshtml

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

Views/Vehicle/_Gas.cshtml

@@ -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-2" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Consumption(@(consumptionUnit))</th>
-                    <th scope="col" class="col-4">Fuel Economy(@(fuelEconomyUnit))</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">Cost</th>
+                    <th scope="col" class="col-1" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Cost</th>
-                    <th scope="col" class="col-1">Unit Cost</th>
+                    <th scope="col" class="col-1" onclick="toggleSort('gas-tab-pane', this)" style="cursor:pointer;">Unit Cost</th>
                 </tr>
             </thead>
             <tbody>

Views/Vehicle/_ServiceRecords.cshtml

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

Views/Vehicle/_TaxRecords.cshtml

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

Views/Vehicle/_UpgradeRecords.cshtml

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

wwwroot/js/shared.js

@@ -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);
 }