Merge pull request #691 from hargata/Hargata/611

automatic decimal formatting.

Helper/ConfigHelper.cs

@@ -185,6 +185,7 @@ namespace CarCareTracker.Helper
                 EnableAuth = bool.Parse(_config[nameof(UserConfig.EnableAuth)]),
                 EnableRootUserOIDC = bool.Parse(_config[nameof(UserConfig.EnableRootUserOIDC)]),
                 HideZero = bool.Parse(_config[nameof(UserConfig.HideZero)]),
+                AutomaticDecimalFormat = bool.Parse(_config[nameof(UserConfig.AutomaticDecimalFormat)]),
                 UseUKMPG = bool.Parse(_config[nameof(UserConfig.UseUKMPG)]),
                 UseMarkDownOnSavedNotes = bool.Parse(_config[nameof(UserConfig.UseMarkDownOnSavedNotes)]),
                 UseThreeDecimalGasCost = bool.Parse(_config[nameof(UserConfig.UseThreeDecimalGasCost)]),

Models/UserConfig.cs

@@ -19,6 +19,7 @@
         public bool EnableShopSupplies { get; set; }
         public bool EnableExtraFieldColumns { get; set; }
         public bool HideSoldVehicles { get; set; }
+        public bool AutomaticDecimalFormat { get; set; }
         public string PreferredGasUnit { get; set; } = string.Empty;
         public string PreferredGasMileageUnit { get; set; } = string.Empty;
         public List<UserColumnPreference> UserColumnPreferences { get; set; } = new List<UserColumnPreference>();

Views/Home/_Settings.cshtml

@@ -37,10 +37,14 @@
             <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="useDescending" checked="@Model.UserConfig.UseDescending">
             <label class="form-check-label" for="useDescending">@translator.Translate(userLanguage, "Sort lists in Descending Order(Newest to Oldest)")</label>
         </div>
-        <div class="form-check form-switch">
+        <div class="form-check form-switch form-check-inline">
             <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="hideZero" checked="@Model.UserConfig.HideZero">
             <label class="form-check-label" for="hideZero">@translator.Translate(userLanguage, "Replace $0.00 Costs with ---")</label>
         </div>
+        <div class="form-check form-switch form-check-inline">
+            <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="automaticDecimalFormat" checked="@Model.UserConfig.AutomaticDecimalFormat">
+            <label class="form-check-label" for="automaticDecimalFormat">@translator.Translate(userLanguage, "Automatically Format Decimals")</label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="useThreeDecimal" checked="@Model.UserConfig.UseThreeDecimalGasCost">
             <label class="form-check-label" for="useThreeDecimal">@translator.Translate(userLanguage, "Use Three Decimals For Fuel Cost")</label>

Views/Shared/_Layout.cshtml

@@ -10,6 +10,7 @@
     var useMPG = userConfig.UseMPG;
     var useMarkDown = userConfig.UseMarkDownOnSavedNotes;
     var useThreeDecimals = userConfig.UseThreeDecimalGasCost;
+    var automaticDecimalFormat = userConfig.AutomaticDecimalFormat;
     var shortDatePattern = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
     var firstDayOfWeek = (int)System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek;
     var numberFormat = System.Globalization.CultureInfo.CurrentCulture.NumberFormat;
@@ -90,6 +91,42 @@
             input = input.replace(".", decimalSeparator);
             return input;
         }
+        function fixDecimalInput(input, numOfDecimals) {
+            if ("@automaticDecimalFormat" == "True") {
+                //get the decimal separator.
+                var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
+                var inputText = $(input).val().trim();
+                inputText = inputText.replace(decimalSeparator, '');
+                inputText = +inputText;
+                if (isNaN(inputText)){
+                    return;
+                }
+                inputText = inputText.toString();
+                if (inputText == '') {
+                    return;
+                };
+                //check number of decimals.
+                if (inputText.length <= numOfDecimals) {
+                    //less than number of decimals, assume everything is behind the decimal.
+                    inputText = `0${decimalSeparator}${inputText}`; //add leading zero.
+                    $(input).val(inputText);
+                } else {
+                    //check if leading zero
+                    var charToSlice = numOfDecimals * -1;
+                    var charsBehindDecimal = inputText.slice(charToSlice);
+                    var charsFrontDecimal = inputText.substr(0, inputText.length - numOfDecimals);
+                    inputText = `${charsFrontDecimal}${decimalSeparator}${charsBehindDecimal}`;
+                    $(input).val(inputText);
+                }
+            }
+        }
+        function interceptDecimalKeys(event) {
+            if ("@automaticDecimalFormat" == "True") {
+                if (event.which == 190 || event.which == 188) {
+                    event.preventDefault(); //intercept keys.
+                }
+            }
+        }
         function genericErrorMessage(){
             return decodeHTMLEntities('@translator.Translate(userLanguage, "An error has occurred, please try again later")');
         }

Views/Vehicle/_CollisionRecordModal.cshtml

@@ -43,7 +43,7 @@
                         </div>
                     }
                     <label for="collisionRecordCost">@translator.Translate(userLanguage, "Cost")</label>
-                    <input type="text" inputmode="decimal" id="collisionRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of the repair")" value="@(isNew ? "" : Model.Cost)">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="collisionRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of the repair")" value="@(isNew ? "" : Model.Cost)">
                     @if (isNew)
                     {
                         @await Html.PartialAsync("_SupplyStore", "RepairRecord")

Views/Vehicle/_GasModal.cshtml

@@ -62,7 +62,7 @@
                         }
                     </div>
                     <label for="gasRecordGallons">@($"{translator.Translate(userLanguage, "Fuel Consumption")}({consumptionUnit})")</label>
-                    <input type="text" inputmode="decimal" id="gasRecordGallons" class="form-control" placeholder="@translator.Translate(userLanguage,"Amount of gas refueled")" value="@(isNew ? "" : Model.GasRecord.Gallons)">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 3)" id="gasRecordGallons" class="form-control" placeholder="@translator.Translate(userLanguage,"Amount of gas refueled")" value="@(isNew ? "" : Model.GasRecord.Gallons)">
                     <div class="form-check form-switch">
                         <input class="form-check-input" type="checkbox" role="switch" id="gasIsFillToFull" checked="@Model.GasRecord.IsFillToFull">
                         <label class="form-check-label" for="gasIsFillToFull">@translator.Translate(userLanguage,"Is Filled To Full")</label>
@@ -75,7 +75,7 @@
                     @if (isNew)
                     {
                         <div class="input-group">
-                            <input type="text" inputmode="decimal" id="gasRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of gas refueled")" value="@(isNew ? "" : Model.GasRecord.Cost)">
+                            <input type="text" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 3)" inputmode="decimal" id="gasRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of gas refueled")" value="@(isNew ? "" : Model.GasRecord.Cost)">
                             <div class="input-group-text">
                                 <select class="form-select form-select-sm" id="gasCostType">
                                     <option value="total">@translator.Translate(userLanguage,"Total")</option>
@@ -85,7 +85,7 @@
                         </div>
                     } else
                     {
-                        <input type="text" inputmode="decimal" id="gasRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of gas refueled")" value="@(isNew ? "" : Model.GasRecord.Cost)">
+                        <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 3)" id="gasRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of gas refueled")" value="@(isNew ? "" : Model.GasRecord.Cost)">
                     }
                     <label for="gasRecordTag">@translator.Translate(userLanguage,"Tags(optional)")</label>
                     <select multiple class="form-select" id="gasRecordTag">

Views/Vehicle/_GasRecordsModal.cshtml

@@ -23,9 +23,9 @@
                     <label for="gasRecordMileage">@translator.Translate(userLanguage, "Odometer")</label>
                     <input type="number" inputmode="numeric" id="gasRecordMileage" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
                     <label for="gasRecordConsumption">@translator.Translate(userLanguage, "Fuel Consumption")</label>
-                    <input type="text" inputmode="decimal" id="gasRecordConsumption" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 3)" id="gasRecordConsumption" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
                     <label for="gasRecordCost">@translator.Translate(userLanguage, "Cost")</label>
-                    <input type="text" inputmode="decimal" id="gasRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 3)" id="gasRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
                     <label for="gasRecordTag">@translator.Translate(userLanguage, "Tags(use --- to clear all existing tags)")</label>
                     <select multiple class="form-select" id="gasRecordTag"></select>
                     @foreach (ExtraField field in Model.EditRecord.ExtraFields)

Views/Vehicle/_GenericRecordModal.cshtml

@@ -25,7 +25,7 @@
                     <label for="genericRecordDescription">@translator.Translate(userLanguage, "Description")</label>
                     <input type="text" id="genericRecordDescription" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
                     <label for="genericRecordCost">@translator.Translate(userLanguage, "Cost")</label>
-                    <input type="text" inputmode="decimal" id="genericRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="genericRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"(multiple)")">
                     <label for="genericRecordTag">@translator.Translate(userLanguage, "Tags(use --- to clear all existing tags)")</label>
                     <select multiple class="form-select" id="genericRecordTag"></select>
                     @foreach (ExtraField field in Model.EditRecord.ExtraFields)

Views/Vehicle/_PlanRecordModal.cshtml

@@ -20,7 +20,7 @@
                     <label for="planRecordDescription">@translator.Translate(userLanguage, "Description")</label>
                     <input type="text" id="planRecordDescription" class="form-control" placeholder="@translator.Translate(userLanguage, "Describe the Plan")" value="@Model.Description">
                     <label for="planRecordCost">@translator.Translate(userLanguage, "Cost")</label>
-                    <input type="text" inputmode="decimal" id="planRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage, "Cost of the Plan")" value="@Model.Cost">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="planRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage, "Cost of the Plan")" value="@Model.Cost">
                     @if (isNew)
                     {
                         @await Html.PartialAsync("_SupplyStore", "PlanRecord")

Views/Vehicle/_PlanRecordTemplateEditModal.cshtml

@@ -20,7 +20,7 @@
                     <label for="planRecordDescription">@translator.Translate(userLanguage, "Description")</label>
                     <input type="text" id="planRecordDescription" class="form-control" placeholder="@translator.Translate(userLanguage, "Describe the Plan")" value="@Model.Description">
                     <label for="planRecordCost">@translator.Translate(userLanguage, "Cost")</label>
-                    <input type="text" inputmode="decimal" id="planRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage, "Cost of the Plan")" value="@Model.Cost">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="planRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage, "Cost of the Plan")" value="@Model.Cost">
                     @await Html.PartialAsync("_SupplyStore", "PlanRecordTemplate")
                     <label for="planRecordType">@translator.Translate(userLanguage, "Type")</label>
                     <select class="form-select" id="planRecordType">

Views/Vehicle/_ServiceRecordModal.cshtml

@@ -43,7 +43,7 @@
                         </div>
                     }
                     <label for="serviceRecordCost">@translator.Translate(userLanguage,"Cost")</label>
-                    <input type="text" inputmode="decimal" id="serviceRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of the service")" value="@(isNew ? "" : Model.Cost)">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="serviceRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of the service")" value="@(isNew ? "" : Model.Cost)">
                     @if (isNew)
                     {
                         @await Html.PartialAsync("_SupplyStore", "ServiceRecord")

Views/Vehicle/_SupplyRecordModal.cshtml

@@ -32,7 +32,7 @@
                         <div class="col-md-6 col-12">
                             <label for="supplyRecordQuantity">@translator.Translate(userLanguage,"Quantity")</label>
                             <div class="input-group">
-                                <input type="text" inputmode="decimal" id="supplyRecordQuantity" class="form-control" placeholder="@translator.Translate(userLanguage,"Quantity")" value="@(isNew ? "1" : Model.Quantity)">
+                                <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="supplyRecordQuantity" class="form-control" placeholder="@translator.Translate(userLanguage,"Quantity")" value="@(isNew ? 1.ToString("N2") : Model.Quantity.ToString("N2"))">
                                 <div class="input-group-text">
                                     <button type="button" class="btn btn-sm zero-y-padding btn-primary" onclick="replenishSupplies()"><i class="bi bi-plus"></i></button>
                                 </div>
@@ -40,7 +40,7 @@
                         </div>
                         <div class="col-md-6 col-12">
                             <label for="supplyRecordCost">@translator.Translate(userLanguage,"Cost")</label>
-                            <input type="text" inputmode="decimal" id="supplyRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost")" value="@(isNew ? "" : Model.Cost)">
+                            <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="supplyRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost")" value="@(isNew ? "" : Model.Cost)">
                         </div>
                     </div>
                     <label for="supplyRecordTag">@translator.Translate(userLanguage, "Tags(optional)")</label>

Views/Vehicle/_SupplyUsage.cshtml

@@ -42,7 +42,7 @@
                             var supplyUsage = Model.Usage.Where(x => x.SupplyId == supplyRecord.Id).SingleOrDefault();
                             <tr class="d-flex" id="supplyRows" data-tags='@string.Join(" ", supplyRecord.Tags)'>
                                 <td class="col-1"><input class="form-check-input" type="checkbox" onchange="toggleQuantityFieldDisabled(this)" value="@supplyRecord.Id" @(supplyUsage == default ? "" : "checked")></td>
-                                <td class="col-2"><input type="text" inputmode="decimal" @(supplyUsage == default ? "disabled" : "") value="@(supplyUsage == default ? "" : supplyUsage.Quantity)" onchange="recalculateTotal()" class="form-control"></td>
+                                <td class="col-2"><input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" @(supplyUsage == default ? "disabled" : "") value="@(supplyUsage == default ? "" : supplyUsage.Quantity)" onchange="recalculateTotal()" class="form-control"></td>
                                 <td class="col-2 supplyquantity">@supplyRecord.Quantity</td>
                                 <td class="col-2 text-truncate">@StaticHelper.TruncateStrings(supplyRecord.PartNumber)</td>
                                 <td class="col-3 text-truncate">@StaticHelper.TruncateStrings(supplyRecord.Description)</td>

Views/Vehicle/_TaxRecordModal.cshtml

@@ -33,7 +33,7 @@
                         </div>
                     }
                     <label for="taxRecordCost">@translator.Translate(userLanguage,"Cost")</label>
-                    <input type="text" inputmode="decimal" id="taxRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of tax paid")" value="@(isNew? "" : Model.Cost)">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="taxRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of tax paid")" value="@(isNew? "" : Model.Cost)">
                     <label for="taxRecordTag">@translator.Translate(userLanguage,"Tags(optional)")</label>
                     <select multiple class="form-select" id="taxRecordTag">
                         @foreach (string tag in Model.Tags)

Views/Vehicle/_UpgradeRecordModal.cshtml

@@ -43,7 +43,7 @@
                         </div>
                     }
                     <label for="upgradeRecordCost">@translator.Translate(userLanguage, "Cost")</label>
-                    <input type="text" inputmode="decimal" id="upgradeRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of the upgrade/mods")" value="@(isNew ? "" : Model.Cost)">
+                    <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="upgradeRecordCost" class="form-control" placeholder="@translator.Translate(userLanguage,"Cost of the upgrade/mods")" value="@(isNew ? "" : Model.Cost)">
                     @if (isNew)
                     {
                         @await Html.PartialAsync("_SupplyStore", "UpgradeRecord")

Views/Vehicle/_VehicleModal.cshtml

@@ -93,9 +93,9 @@
                                 <label for="inputSoldDate">@translator.Translate(userLanguage, "Sold Date(optional)")</label>
                                 <input type="text" id="inputSoldDate" class="form-control" placeholder="@translator.Translate(userLanguage, "Sold Date")" value="@Model.SoldDate">
                                 <label for="inputPurchasePrice">@translator.Translate(userLanguage, "Purchased Price(optional)")</label>
-                                <input type="text" inputmode="decimal" id="inputPurchasePrice" class="form-control" placeholder="@translator.Translate(userLanguage, "Purchased Price")" value="@(Model.PurchasePrice == default ? "" : Model.PurchasePrice)">
+                                <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="inputPurchasePrice" class="form-control" placeholder="@translator.Translate(userLanguage, "Purchased Price")" value="@(Model.PurchasePrice == default ? "" : Model.PurchasePrice)">
                                 <label for="inputSoldPrice">@translator.Translate(userLanguage, "Sold Price(optional)")</label>
-                                <input type="text" inputmode="decimal" id="inputSoldPrice" class="form-control" placeholder="@translator.Translate(userLanguage, "Sold Price")" value="@(Model.SoldPrice == default ? "" : Model.SoldPrice)">
+                                <input type="text" inputmode="decimal" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)" id="inputSoldPrice" class="form-control" placeholder="@translator.Translate(userLanguage, "Sold Price")" value="@(Model.SoldPrice == default ? "" : Model.SoldPrice)">
                             </div>
                         </div>
                     </div>

appsettings.json

@@ -15,6 +15,7 @@
   "DisableRegistration": false,
   "EnableRootUserOIDC": false,
   "HideZero": false,
+  "AutomaticDecimalFormat":  false,
   "EnableAutoReminderRefresh": false,
   "EnableAutoOdometerInsert": false,
   "EnableShopSupplies": false,

wwwroot/js/settings.js

@@ -54,6 +54,7 @@ function updateSettings() {
         useMPG: $("#useMPG").is(':checked'),
         useDescending: $("#useDescending").is(':checked'),
         hideZero: $("#hideZero").is(":checked"),
+        automaticDecimalFormat: $("#automaticDecimalFormat").is(":checked"),
         useUKMpg: $("#useUKMPG").is(":checked"),
         useThreeDecimalGasCost: $("#useThreeDecimal").is(":checked"),
         useMarkDownOnSavedNotes: $("#useMarkDownOnSavedNotes").is(":checked"),

wwwroot/js/shared.js

@@ -1135,13 +1135,17 @@ function detectRowTouchEndPremature(sender) {
         rowTouchTimer = null;
     }
 }
+function handleSupplyAddCostKeyDown(event) {
+    handleSwalEnter(event);
+    interceptDecimalKeys(event);
+}
 function replenishSupplies() {
     Swal.fire({
         title: 'Replenish Supplies',
         html: `
-                            <input type="text" id="inputSupplyAddQuantity" class="swal2-input" placeholder="Quantity">
+                            <input type="text" id="inputSupplyAddQuantity" class="swal2-input" placeholder="Quantity" onkeydown="interceptDecimalKeys(event)" onkeyup="fixDecimalInput(this, 2)">
                             <br />
-                            <input type="text" id="inputSupplyAddCost" class="swal2-input" placeholder="Cost" onkeydown="handleSwalEnter(event)">
+                            <input type="text" id="inputSupplyAddCost" class="swal2-input" placeholder="Cost" onkeydown="handleSupplyAddCostKeyDown(event)" onkeyup="fixDecimalInput(this, 2)">
                             <br />
                             <span class='small'>leave blank to use unit cost calculation</span>
               `,