added calendar view modal

Controllers/HomeController.cs

@@ -78,6 +78,12 @@ namespace CarCareTracker.Controllers
             }
             return PartialView("_Calendar", reminders);
         }
+        public IActionResult ViewCalendarReminder(int reminderId)
+        {
+            var reminder = _reminderRecordDataAccess.GetReminderRecordById(reminderId);
+            var reminderUrgency = _reminderHelper.GetReminderRecordViewModels(new List<ReminderRecord> { reminder }, reminder.Mileage + 1000, DateTime.Now).FirstOrDefault();
+            return PartialView("_ReminderRecordCalendarModal", reminderUrgency);
+        }
         public IActionResult Settings()
         {
             var userConfig = _config.GetUserConfig(User);

Views/Home/_Calendar.cshtml

@@ -14,6 +14,12 @@
         </div>
     </div>
 </div>
+<div class="modal fade" data-bs-focus="false" id="reminderRecordCalendarModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content" id="reminderRecordCalendarModalContent">
+        </div>
+    </div>
+</div>
 <script>
     initCalendar();
 </script>

Views/Home/_ReminderRecordCalendarModal.cshtml

@@ -0,0 +1,42 @@
+@using CarCareTracker.Helper
+@inject IConfigHelper config
+@inject ITranslationHelper translator
+@model ReminderRecordViewModel
+@{
+    var userConfig = config.GetUserConfig(User);
+    var userLanguage = userConfig.UserLanguage;
+}
+<div class="modal-header">
+    <h5 class="modal-title">@(translator.Translate(userLanguage, "View Reminder"))</h5>
+    <button type="button" class="btn-close" onclick="hideCalendarReminderModal()" aria-label="Close"></button>
+</div>
+<div class="modal-body">
+    <form>
+        <div class="form-group">
+            <div class="row">
+                <div class="col-md-6 col-12" id="reminderOptions">
+                    <input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
+                    <label for="reminderDescription">@translator.Translate(userLanguage, "Date")</label>
+                    <input type="text" id="reminderDescription" readonly class="form-control" value="@Model.Date.ToShortDateString()">
+                    <label for="reminderDescription">@translator.Translate(userLanguage,"Description")</label>
+                    <input type="text" id="reminderDescription" readonly class="form-control" value="@Model.Description">
+                </div>
+                <div class="col-md-6 col-12">
+                    <label for="reminderNotes">@translator.Translate(userLanguage,"Notes")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>
+                    <textarea id="reminderNotes" readonly class="form-control" rows="5">@Model.Notes</textarea>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-danger" onclick="deleteCalendarReminderRecord(@Model.Id)" style="margin-right:auto;">@translator.Translate(userLanguage, "Delete")</button>
+    <button type="button" class="btn btn-secondary" onclick="hideCalendarReminderModal()">@translator.Translate(userLanguage, "Close")</button>
+    @if (Model.IsRecurring && (Model.Urgency == ReminderUrgency.VeryUrgent || Model.Urgency == ReminderUrgency.PastDue))
+    {
+        <button type="button" class="btn btn-primary" onclick="markDoneCalendarReminderRecord(@Model.Id)">@translator.Translate(userLanguage, "Mark as Done")</button>
+    }
+</div>
+<script>
+
+</script>

wwwroot/css/site.css

@@ -312,6 +312,10 @@ input[type="file"] {
 }
 .reminder-exist{
     overflow:auto;
+    vertical-align:top;
+}
+.reminder-exist p{
+    margin:0;
 }
 .reminderCalendarViewContent .datepicker table tr td.day {
     cursor: default;

wwwroot/js/garage.js

@@ -64,6 +64,20 @@ function getVehicleCalendarEvents() {
 }
 function showCalendarReminderModal(id) {
     event.stopPropagation();
+    $.get(`/Home/ViewCalendarReminder?reminderId=${id}`, function (data) {
+        if (data) {
+            $("#reminderRecordCalendarModalContent").html(data);
+            $("#reminderRecordCalendarModal").modal('show');
+            $('#reminderRecordCalendarModal').off('shown.bs.modal').on('shown.bs.modal', function () {
+                if (getGlobalConfig().useMarkDown) {
+                    toggleMarkDownOverlay("reminderNotes");
+                }
+            });
+        }
+    })
+}
+function hideCalendarReminderModal() {
+    $("#reminderRecordCalendarModal").modal('hide');
 }
 function generateReminderItem(id, urgency, description) {
     if (description.trim() == '') {
@@ -71,15 +85,54 @@ function generateReminderItem(id, urgency, description) {
     }
     switch (urgency) {
         case "VeryUrgent":
-            return `<p class="badge text-wrap bg-danger reminder-calendar-item" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
+            return `<p class="badge text-wrap bg-danger reminder-calendar-item mb-2" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
         case "PastDue":
-            return `<p class="badge text-wrap bg-secondary reminder-calendar-item" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
+            return `<p class="badge text-wrap bg-secondary reminder-calendar-item mb-2" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
         case "Urgent":
-            return `<p class="badge text-wrap bg-warning reminder-calendar-item" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
+            return `<p class="badge text-wrap bg-warning reminder-calendar-item mb-2" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
         case "NotUrgent":
-            return `<p class="badge text-wrap bg-success reminder-calendar-item" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
+            return `<p class="badge text-wrap bg-success reminder-calendar-item mb-2" onclick='showCalendarReminderModal(${id})'>${encodeHTMLInput(description)}</p>`;
     }
 }
+function markDoneCalendarReminderRecord(reminderRecordId, e) {
+    event.stopPropagation();
+    $.post(`/Vehicle/PushbackRecurringReminderRecord?reminderRecordId=${reminderRecordId}`, function (data) {
+        if (data) {
+            hideCalendarReminderModal();
+            successToast("Reminder Updated");
+            getVehicleCalendarEvents();
+        } else {
+            errorToast(genericErrorMessage());
+        }
+    });
+}
+function deleteCalendarReminderRecord(reminderRecordId, e) {
+    if (e != undefined) {
+        event.stopPropagation();
+    }
+    $("#workAroundInput").show();
+    Swal.fire({
+        title: "Confirm Deletion?",
+        text: "Deleted Reminders cannot be restored.",
+        showCancelButton: true,
+        confirmButtonText: "Delete",
+        confirmButtonColor: "#dc3545"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            $.post(`/Vehicle/DeleteReminderRecordById?reminderRecordId=${reminderRecordId}`, function (data) {
+                if (data) {
+                    hideCalendarReminderModal();
+                    successToast("Reminder Deleted");
+                    getVehicleCalendarEvents();
+                } else {
+                    errorToast(genericErrorMessage());
+                }
+            });
+        } else {
+            $("#workAroundInput").hide();
+        }
+    });
+}
 function initCalendar() {
     if (groupedDates.length == 0) {
         //group dates