added reminder refresh and count

Controllers/VehicleController.cs

@@ -600,16 +600,17 @@ namespace CarCareTracker.Controllers
                         //have to specify by which metric this reminder is urgent.
                         reminderViewModel.Metric = ReminderMetric.Date;
                     }
+                    else if (reminder.Mileage < currentMileage + 50)
+                    {
+                        reminderViewModel.Urgency = ReminderUrgency.VeryUrgent;
+                        reminderViewModel.Metric = ReminderMetric.Odometer;
+                    }
                     else if (reminder.Date < DateTime.Now.AddDays(30))
                     {
                         reminderViewModel.Urgency = ReminderUrgency.Urgent;
                         reminderViewModel.Metric = ReminderMetric.Date;
                     }
-                    else if (reminder.Mileage < currentMileage + 50)
-                    {
-                        reminderViewModel.Urgency = ReminderUrgency.VeryUrgent;
-                        reminderViewModel.Metric = ReminderMetric.Odometer;
-                    } else if (reminder.Mileage < currentMileage + 100)
+                     else if (reminder.Mileage < currentMileage + 100)
                     {
                         reminderViewModel.Urgency = ReminderUrgency.Urgent;
                         reminderViewModel.Metric = ReminderMetric.Odometer;
@@ -652,7 +653,7 @@ namespace CarCareTracker.Controllers
         public IActionResult GetVehicleHaveUrgentOrPastDueReminders(int vehicleId)
         {
             var result = GetRemindersAndUrgency(vehicleId);
-            if (result.Where(x=>x.Urgency == ReminderUrgency.Urgent || x.Urgency == ReminderUrgency.PastDue).Any())
+            if (result.Where(x=>x.Urgency == ReminderUrgency.VeryUrgent || x.Urgency == ReminderUrgency.PastDue).Any())
             {
                 return Json(true);
             }
@@ -672,10 +673,17 @@ namespace CarCareTracker.Controllers
             return Json(result);
         }
         [HttpGet]
-        public IActionResult GetAddReminderRecordPartialView()
+        public IActionResult GetAddReminderRecordPartialView(ReminderRecordInput? reminderModel)
+        {
+            if (reminderModel is not null)
+            {
+                return PartialView("_ReminderRecordModal", reminderModel);
+            }
+            else
             {
                 return PartialView("_ReminderRecordModal", new ReminderRecordInput());
             }
+        }
         [HttpGet]
         public IActionResult GetReminderRecordForEditById(int reminderRecordId)
         {

Views/Vehicle/Index.cshtml

@@ -37,7 +37,7 @@
             <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-journal-bookmark me-2"></i>Notes</button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="reminder-tab" data-bs-toggle="tab" data-bs-target="#reminder-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-bell me-2"></i>Reminders</button>
+            <button class="nav-link" id="reminder-tab" data-bs-toggle="tab" data-bs-target="#reminder-tab-pane" type="button" role="tab" aria-selected="false"><div id="reminderBellDiv" style="display:inline-flex;"><i id="reminderBell" class="bi bi-bell me-2"></i></div>Reminders</button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="report-tab" data-bs-toggle="tab" data-bs-target="#report-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-file-bar-graph me-2"></i>Reports</button>

Views/Vehicle/_ReminderRecords.cshtml

@@ -3,6 +3,10 @@
     <div class="d-flex justify-content-between">
         <div class="d-flex align-items-center flex-wrap">
             <span class="ms-2 badge bg-success">@($"# of Reminders: {Model.Count()}")</span>
+            <span class="ms-2 badge bg-secondary">@($"Past Due: {Model.Where(x => x.Urgency == ReminderUrgency.PastDue).Count()}")</span>
+            <span class="ms-2 badge bg-danger">@($"Very Urgent: {Model.Where(x=>x.Urgency == ReminderUrgency.VeryUrgent).Count()}")</span>
+            <span class="ms-2 badge bg-warning">@($"Urgent: {Model.Where(x => x.Urgency == ReminderUrgency.Urgent).Count()}")</span>
+            <span class="ms-2 badge bg-success">@($"Not Urgent: {Model.Where(x => x.Urgency == ReminderUrgency.NotUrgent).Count()}")</span>
         </div>
         <div>
             <button onclick="showAddReminderModal()" class="btn btn-primary btn-md mt-1 mb-1"><i class="bi bi-pencil-square me-2"></i>Add Reminder</button>
@@ -17,7 +21,8 @@
                     <th scope="col" class="col-1">Urgency</th>
                     <th scope="col" class="col-2">Metric</th>
                     <th scope="col" class="col-5">Description</th>
-                    <th scope="col" class="col-4">Notes</th>
+                    <th scope="col" class="col-3">Notes</th>
+                    <th scope="col" class="col-1">Delete</th>
                 </tr>
             </thead>
             <tbody>
@@ -28,26 +33,35 @@
                         {
                             <td class="col-1"><span class="badge text-bg-danger">Very Urgent</span></td>
                         }
-                        else if (reminderRecord.Urgency == ReminderUrgency.Urgent){
+                        else if (reminderRecord.Urgency == ReminderUrgency.Urgent)
+                        {
                             <td class="col-1"><span class="badge text-bg-warning">Urgent</span></td>
-                        } else if (reminderRecord.Urgency == ReminderUrgency.PastDue)
+                        }
+                        else if (reminderRecord.Urgency == ReminderUrgency.PastDue)
                         {
                             <td class="col-1"><span class="badge text-bg-secondary">Past Due</span></td>
                         }
-                        else {
+                        else
+                        {
                             <td class="col-1"><span class="badge text-bg-success">Not Urgent</span></td>
                         }
                         @if (reminderRecord.Metric == ReminderMetric.Date)
                         {
                             <td class="col-2">@reminderRecord.Date.ToShortDateString()</td>
-                        } else if (reminderRecord.Metric == ReminderMetric.Odometer)
+                        }
+                        else if (reminderRecord.Metric == ReminderMetric.Odometer)
                         {
                             <td class="col-2">@reminderRecord.Mileage</td>
-                        } else {
+                        }
+                        else
+                        {
                             <td class="col-2">@reminderRecord.Metric</td>
                         }
                         <td class="col-5">@reminderRecord.Description</td>
-                        <td class="col-4 text-truncate">@reminderRecord.Notes</td>
+                        <td class="col-3 text-truncate">@reminderRecord.Notes</td>
+                        <td class="col-1 text-truncate">
+                            <button type="button" class="btn btn-danger" onclick="deleteReminderRecord(@reminderRecord.Id, this)"><i class="bi bi-trash"></i></button>
+                        </td>
                     </tr>
                 }
             </tbody>

wwwroot/css/site.css

@@ -56,3 +56,47 @@ html {
         font-size: 2rem;
     }
 }
+
+.bell-shake {
+    animation: bellshake .5s;
+    backface-visibility: hidden;
+    transform-origin: top center;
+}
+
+@keyframes bellshake {
+    0% {
+        transform: rotate(0);
+    }
+
+    15% {
+        transform: rotate(5deg);
+    }
+
+    30% {
+        transform: rotate(-5deg);
+    }
+
+    45% {
+        transform: rotate(4deg);
+    }
+
+    60% {
+        transform: rotate(-4deg);
+    }
+
+    75% {
+        transform: rotate(2deg);
+    }
+
+    85% {
+        transform: rotate(-2deg);
+    }
+
+    92% {
+        transform: rotate(1deg);
+    }
+
+    100% {
+        transform: rotate(0);
+    }
+}

wwwroot/js/reminderrecord.js

@@ -12,7 +12,10 @@
 function hideAddReminderRecordModal() {
     $('#reminderRecordModal').modal('hide');
 }
-function deleteReminderRecord(reminderRecordId) {
+function deleteReminderRecord(reminderRecordId, e) {
+    if (e != undefined) {
+        event.stopPropagation();
+    }
     $("#workAroundInput").show();
     Swal.fire({
         title: "Confirm Deletion?",

wwwroot/js/vehicle.js

@@ -73,6 +73,7 @@ function getVehicleServiceRecords(vehicleId) {
     $.get(`/Vehicle/GetServiceRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#servicerecord-tab-pane").html(data);
+            getVehicleHaveImportantReminders(vehicleId);
         }
     })
 }
@@ -80,6 +81,7 @@ function getVehicleGasRecords(vehicleId) {
     $.get(`/Vehicle/GetGasRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#gas-tab-pane").html(data);
+            getVehicleHaveImportantReminders(vehicleId);
         }
     });
 }
@@ -87,6 +89,7 @@ function getVehicleCollisionRecords(vehicleId) {
     $.get(`/Vehicle/GetCollisionRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#accident-tab-pane").html(data);
+            getVehicleHaveImportantReminders(vehicleId);
         }
     });
 }
@@ -94,6 +97,7 @@ function getVehicleTaxRecords(vehicleId) {
     $.get(`/Vehicle/GetTaxRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#tax-tab-pane").html(data);
+            getVehicleHaveImportantReminders(vehicleId);
         }
     });
 }
@@ -101,6 +105,7 @@ function getVehicleReminders(vehicleId) {
     $.get(`/Vehicle/GetReminderRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#reminder-tab-pane").html(data);
+            getVehicleHaveImportantReminders(vehicleId);
         }
     });
 }
@@ -172,7 +177,16 @@ function uploadVehicleFilesAsync(event) {
         }
     });
 }
-function showAddReminderModal() {
+function showAddReminderModal(reminderModalInput) {
+    if (reminderModalInput != undefined) {
+        $.get('/Vehicle/GetAddReminderRecordPartialView', {reminderModel: reminderModalInput}, function (data) {
+            $("#reminderRecordModalContent").html(data);
+            $('#reminderDate').datepicker({
+                startDate: "+0d"
+            });
+            $("#reminderRecordModal").modal("show");
+        });
+    } else {
         $.get('/Vehicle/GetAddReminderRecordPartialView', function (data) {
             $("#reminderRecordModalContent").html(data);
             $('#reminderDate').datepicker({
@@ -181,3 +195,19 @@ function showAddReminderModal() {
             $("#reminderRecordModal").modal("show");
         });
     }
+}
+function getVehicleHaveImportantReminders(vehicleId) {
+    $.get(`/Vehicle/GetVehicleHaveUrgentOrPastDueReminders?vehicleId=${vehicleId}`, function (data) {
+        if (data) {
+            $("#reminderBell").removeClass("bi-bell");
+            $("#reminderBell").addClass("bi-bell-fill");
+            $("#reminderBell").addClass("text-warning");
+            $("#reminderBellDiv").addClass("bell-shake");
+        } else {
+            $("#reminderBellDiv").removeClass("bell-shake");
+            $("#reminderBell").removeClass("bi-bell-fill");
+            $("#reminderBell").addClass("bi-bell");
+            $("#reminderBell").removeClass("text-warning");
+        }
+    });
+}