added setting to automatically load parsed markdown.

Helper/ConfigHelper.cs

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

Models/UserConfig.cs

@@ -10,6 +10,7 @@
         public bool HideZero { get; set; }
         public bool UseUKMPG {get;set;}
         public bool UseThreeDecimalGasCost { get; set; }
+        public bool UseMarkDownOnSavedNotes { get; set; }
         public bool EnableAutoReminderRefresh { get; set; }
         public bool EnableAutoOdometerInsert { get; set; }
         public string UserNameHash { get; set; }

Views/Home/_Settings.cshtml

@@ -35,6 +35,10 @@
             <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="useThreeDecimal" checked="@Model.UseThreeDecimalGasCost">
             <label class="form-check-label" for="useThreeDecimal">Use Three Decimals For Fuel Cost</label>
         </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="useMarkDownOnSavedNotes" checked="@Model.UseMarkDownOnSavedNotes">
+            <label class="form-check-label" for="useMarkDownOnSavedNotes">Display Saved Notes in Markdown</label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="enableAutoReminderRefresh" checked="@Model.EnableAutoReminderRefresh">
             <label class="form-check-label" for="enableAutoReminderRefresh">Auto Refresh Lapsed Recurring Reminders</label>
@@ -212,6 +216,7 @@
             hideZero: $("#hideZero").is(":checked"),
             useUKMpg: $("#useUKMPG").is(":checked"),
             useThreeDecimalGasCost: $("#useThreeDecimal").is(":checked"),
+            useMarkDownOnSavedNotes: $("#useMarkDownOnSavedNotes").is(":checked"),
             enableAutoReminderRefresh: $("#enableAutoReminderRefresh").is(":checked"),
             enableAutoOdometerInsert: $("#enableAutoOdometerInsert").is(":checked"),
             visibleTabs: visibleTabs,

Views/Shared/_Layout.cshtml

@@ -5,6 +5,7 @@
     var userConfig = config.GetUserConfig(User);
     var useDarkMode = userConfig.UseDarkMode;
     var enableCsvImports = userConfig.EnableCsvImports;
+    var useMarkDown = userConfig.UseMarkDownOnSavedNotes;
     var shortDatePattern = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
     var numberFormat = System.Globalization.CultureInfo.CurrentCulture.NumberFormat;
     shortDatePattern = shortDatePattern.ToLower();
@@ -47,7 +48,8 @@
         function getGlobalConfig() {
             return {
                 useDarkMode : "@useDarkMode" == "True",
-                enableCsvImport : "@enableCsvImports" == "True"
+                enableCsvImport : "@enableCsvImports" == "True",
+                useMarkDown: "@useMarkDown" == "True"
             }
         }
         function getShortDatePattern() {

appsettings.json

@@ -16,6 +16,7 @@
   "EnableAutoOdometerInsert": false,
   "UseUKMPG": false,
   "UseThreeDecimalGasCost": true,
+  "UseMarkDownOnSavedNotes":  false,
   "VisibleTabs": [ 0, 1, 4, 2, 3, 6, 5, 8 ],
   "DefaultTab": 8,
   "UserNameHash": "",

wwwroot/js/collisionrecord.js

@@ -15,6 +15,11 @@ function showEditCollisionRecordModal(collisionRecordId) {
             //initiate datepicker
             initDatePicker($('#collisionRecordDate'));
             $('#collisionRecordModal').modal('show');
+            $('#collisionRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("collisionRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/gasrecord.js

@@ -15,6 +15,11 @@ function showEditGasRecordModal(gasRecordId) {
             //initiate datepicker
             initDatePicker($('#gasRecordDate'));
             $('#gasRecordModal').modal('show');
+            $('#gasRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("gasRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/note.js

@@ -11,6 +11,11 @@ function showEditNoteModal(noteId) {
         if (data) {
             $("#noteModalContent").html(data);
             $('#noteModal').modal('show');
+            $('#noteModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("noteTextArea");
+                }
+            });
         }
     });
 }

wwwroot/js/odometerrecord.js

@@ -15,6 +15,11 @@ function showEditOdometerRecordModal(odometerRecordId) {
             //initiate datepicker
             initDatePicker($('#odometerRecordDate'));
             $('#odometerRecordModal').modal('show');
+            $('#odometerRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("odometerRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/planrecord.js

@@ -15,6 +15,11 @@ function showEditPlanRecordModal(planRecordId) {
             //initiate datepicker
             initDatePicker($('#planRecordDate'));
             $('#planRecordModal').modal('show');
+            $('#planRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("planRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/reminderrecord.js

@@ -4,6 +4,11 @@
             $("#reminderRecordModalContent").html(data); 
             initDatePicker($('#reminderDate'), true);
             $("#reminderRecordModal").modal("show");
+            $('#reminderRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("reminderNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/servicerecord.js

@@ -15,6 +15,11 @@ function showEditServiceRecordModal(serviceRecordId) {
             //initiate datepicker
             initDatePicker($('#serviceRecordDate'));
             $('#serviceRecordModal').modal('show');
+            $('#serviceRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("serviceRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/supplyrecord.js

@@ -15,6 +15,11 @@ function showEditSupplyRecordModal(supplyRecordId) {
             //initiate datepicker
             initDatePicker($('#supplyRecordDate'));
             $('#supplyRecordModal').modal('show');
+            $('#supplyRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("supplyRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/taxrecord.js

@@ -15,6 +15,11 @@ function showEditTaxRecordModal(taxRecordId) {
             //initiate datepicker
             initDatePicker($('#taxRecordDate'));
             $('#taxRecordModal').modal('show');
+            $('#taxRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("taxRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/upgraderecord.js

@@ -15,6 +15,11 @@ function showEditUpgradeRecordModal(upgradeRecordId) {
             //initiate datepicker
             initDatePicker($('#upgradeRecordDate'));
             $('#upgradeRecordModal').modal('show');
+            $('#upgradeRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("upgradeRecordNotes");
+                }
+            });
         }
     });
 }

wwwroot/js/vehicle.js

@@ -415,8 +415,7 @@ function moveRecord(recordId, source, dest) {
         }
     });
 }
-function showLinks(e) {
+function toggleMarkDownOverlay(textAreaName) {
-    var textAreaName = $(e.parentElement).attr("for");
     var textArea = $(`#${textAreaName}`);
     if ($(".markdown-overlay").length > 0) {
         $(".markdown-overlay").remove();
@@ -429,7 +428,11 @@ function showLinks(e) {
     if (text.length > 0) {
         var formatted = markdown(text);
         //var overlay div
-        var overlayDiv = `<div class='markdown-overlay' style="position:absolute; top:${textArea.css('top')}; left:${textArea.css('left')}; width:${textArea.css('width')}; height:${textArea.css('height')}; padding:${textArea.css('padding')}; overflow-y:auto; background-color:var(--bs-modal-bg);">${formatted}</div>`;
+        var overlayDiv = `<div class='markdown-overlay' onclick='(e) => {event.stopPropagation();}' style="z-index: 1060; position:absolute; top:${textArea.css('top')}; left:${textArea.css('left')}; width:${textArea.css('width')}; height:${textArea.css('height')}; padding:${textArea.css('padding')}; overflow-y:auto; background-color:var(--bs-modal-bg);">${formatted}</div>`;
-        $(e.parentElement).append(overlayDiv);
+        textArea.parent().children(`label[for=${textAreaName}]`).append(overlayDiv);
     }
+}
+function showLinks(e) {
+    var textAreaName = $(e.parentElement).attr("for");
+    toggleMarkDownOverlay(textAreaName);
 }