moved more stuff around.

Views/Vehicle/Index.cshtml

@@ -4,6 +4,7 @@
 @model Vehicle
 @section Scripts{
     <script src="~/js/vehicle.js" asp-append-version="true"></script>
+    <script src="~/js/servicerecord.js" asp-append-version="true"></script>
 }
 <div class="container">
     <div class="row">

Views/Vehicle/_ServiceRecordModal.cshtml

@@ -1,6 +1,7 @@
 @model ServiceRecordInput
 <div class="modal-header">
     <h5 class="modal-title" id="addServiceRecordModalLabel">@(Model.Id == 0 ? "Add New Service Record" : "Edit Service Record")</h5>
+    <button type="button" class="btn-close" onclick="hideAddServiceRecordModal()" aria-label="Close"></button>
 </div>
 <div class="modal-body">
     <form>

wwwroot/css/loader.css

@@ -4,7 +4,7 @@
     left: 0px;
     width: 100%;
     height: 100%;
-    z-index: 1000;
+    z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;

wwwroot/js/servicerecord.js

@@ -0,0 +1,143 @@
+function showAddServiceRecordModal() {
+    $.get('/Vehicle/GetAddServiceRecordPartialView', function (data) {
+        if (data) {
+            $("#serviceRecordModalContent").html(data);
+            //initiate datepicker
+            $('#serviceRecordDate').datepicker({
+                endDate: "+0d"
+            });
+            $('#serviceRecordModal').modal('show');
+        }
+    });
+}
+function showEditServiceRecordModal(serviceRecordId) {
+    $.get(`/Vehicle/GetServiceRecordForEditById?serviceRecordId=${serviceRecordId}`, function (data) {
+        if (data) {
+            $("#serviceRecordModalContent").html(data);
+            //initiate datepicker
+            $('#serviceRecordDate').datepicker({
+                endDate: "+0d"
+            });
+            $('#serviceRecordModal').modal('show');
+        }
+    });
+}
+function hideAddServiceRecordModal() {
+    $('#serviceRecordModal').modal('hide');
+}
+function deleteServiceRecord(serviceRecordId) {
+    $("#workAroundInput").show();
+    Swal.fire({
+        title: "Confirm Deletion?",
+        text: "Deleted Service Records cannot be restored.",
+        showCancelButton: true,
+        confirmButtonText: "Delete",
+        confirmButtonColor: "#dc3545"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            $.post(`/Vehicle/DeleteServiceRecordById?serviceRecordId=${serviceRecordId}`, function (data) {
+                if (data) {
+                    hideAddServiceRecordModal();
+                    successToast("Service Record deleted");
+                    var vehicleId = GetVehicleId().vehicleId;
+                    getVehicleServiceRecords(vehicleId);
+                } else {
+                    errorToast("An error has occurred, please try again later.");
+                }
+            });
+        } else {
+            $("#workAroundInput").hide();
+        }
+    });
+}
+function saveServiceRecordToVehicle(isEdit) {
+    //get values
+    var formValues = getAndValidateServiceRecordValues();
+    //validate
+    if (formValues.hasError) {
+        errorToast("Please check the form data");
+        return;
+    }
+    //save to db.
+    $.post('/Vehicle/SaveServiceRecordToVehicleId', { serviceRecord: formValues }, function (data) {
+        if (data) {
+            successToast(isEdit ? "Service Record Updated" : "Service Record Added.");
+            hideAddServiceRecordModal();
+            getVehicleServiceRecords(formValues.vehicleId);
+        } else {
+            errorToast("An error has occurred, please try again later.");
+        }
+    })
+}
+function uploadServiceRecordFilesAsync() {
+    let formData = new FormData();
+    var files = $("#serviceRecordFiles")[0].files;
+    for (var x = 0; x < files.length; x++) {
+        formData.append("file", files[x]);
+    }
+    sloader.show();
+    $.ajax({
+        url: "/Files/HandleMultipleFileUpload",
+        data: formData,
+        cache: false,
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        success: function (response) {
+            sloader.hide();
+            if (response.length > 0) {
+                uploadedFiles.push.apply(uploadedFiles, response);
+            }
+        }
+    });
+}
+function getAndValidateServiceRecordValues() {
+    var serviceDate = $("#serviceRecordDate").val();
+    var serviceMileage = $("#serviceRecordMileage").val();
+    var serviceDescription = $("#serviceRecordDescription").val();
+    var serviceCost = $("#serviceRecordCost").val();
+    var serviceNotes = $("#serviceRecordNotes").val();
+    var vehicleId = GetVehicleId().vehicleId;
+    var serviceRecordId = getServiceRecordModelData().id;
+    //validation
+    var hasError = false;
+    if (serviceDate.trim() == '') { //eliminates whitespace.
+        hasError = true;
+        $("#serviceRecordDate").addClass("is-invalid");
+    } else {
+        $("#serviceRecordDate").removeClass("is-invalid");
+    }
+    if (serviceMileage.trim() == '' || parseInt(serviceMileage) < 0) {
+        hasError = true;
+        $("#serviceRecordMileage").addClass("is-invalid");
+    } else {
+        $("#serviceRecordMileage").removeClass("is-invalid");
+    }
+    if (serviceDescription.trim() == '') {
+        hasError = true;
+        $("#serviceRecordDescription").addClass("is-invalid");
+    } else {
+        $("#serviceRecordDescription").removeClass("is-invalid");
+    }
+    if (serviceCost.trim() == '') {
+        hasError = true;
+        $("#serviceRecordCost").addClass("is-invalid");
+    } else {
+        $("#serviceRecordCost").removeClass("is-invalid");
+    }
+    return {
+        id: serviceRecordId,
+        hasError: hasError,
+        vehicleId: vehicleId,
+        date: serviceDate,
+        mileage: serviceMileage,
+        description: serviceDescription,
+        cost: serviceCost,
+        notes: serviceNotes,
+        files: uploadedFiles
+    }
+}
+function deleteServiceRecordFile(fileLocation, event) {
+    event.parentElement.remove();
+    uploadedFiles = uploadedFiles.filter(x => x.location != fileLocation);
+}

wwwroot/js/vehicle.js

@@ -52,145 +52,4 @@ function DeleteVehicle(vehicleId) {
             window.location.href = '/Home';
         }
     })
-}
-function showAddServiceRecordModal() {
-    $.get('/Vehicle/GetAddServiceRecordPartialView', function (data) {
-        if (data) {
-            $("#serviceRecordModalContent").html(data);
-            //initiate datepicker
-            $('#serviceRecordDate').datepicker({
-                endDate: "+0d"
-            });
-            $('#serviceRecordModal').modal('show');
-        }
-    });
-}
-function showEditServiceRecordModal(serviceRecordId) {
-    $.get(`/Vehicle/GetServiceRecordForEditById?serviceRecordId=${serviceRecordId}`, function (data) {
-        if (data) {
-            $("#serviceRecordModalContent").html(data);
-            //initiate datepicker
-            $('#serviceRecordDate').datepicker({
-                endDate: "+0d"
-            });
-            $('#serviceRecordModal').modal('show');
-        }
-    });
-}
-function hideAddServiceRecordModal() {
-    $('#serviceRecordModal').modal('hide');
-}
-function deleteServiceRecord(serviceRecordId) {
-    $("#workAroundInput").show();
-    Swal.fire({
-        title: "Confirm Deletion?",
-        text: "Deleted Service Records cannot be restored.",
-        showCancelButton: true,
-        confirmButtonText: "Delete",
-        confirmButtonColor: "#dc3545"
-    }).then((result) => {
-        if (result.isConfirmed) {
-            $.post(`/Vehicle/DeleteServiceRecordById?serviceRecordId=${serviceRecordId}`, function (data) {
-                if (data) {
-                    hideAddServiceRecordModal();
-                    successToast("Service Record deleted");
-                    var vehicleId = GetVehicleId().vehicleId;
-                    getVehicleServiceRecords(vehicleId);
-                } else {
-                    errorToast("An error has occurred, please try again later.");
-                }
-            });
-        } else {
-            $("#workAroundInput").hide();
-        }
-    });
-}
-function saveServiceRecordToVehicle(isEdit) {
-    //get values
-    var formValues = getAndValidateServiceRecordValues();
-    //validate
-    if (formValues.hasError) {
-        errorToast("Please check the form data");
-        return;
-    }
-    //save to db.
-    $.post('/Vehicle/SaveServiceRecordToVehicleId', { serviceRecord: formValues }, function (data) {
-        if (data) {
-            successToast(isEdit ? "Service Record Updated" : "Service Record Added.");
-            hideAddServiceRecordModal();
-            getVehicleServiceRecords(formValues.vehicleId);
-        } else {
-            errorToast("An error has occurred, please try again later.");
-        }
-    })
-}
-function uploadServiceRecordFilesAsync() {
-    let formData = new FormData();
-    var files = $("#serviceRecordFiles")[0].files;
-    for (var x = 0; x < files.length; x++) {
-        formData.append("file", files[x]);
-    }
-    $.ajax({
-        url: "/Files/HandleMultipleFileUpload",
-        data: formData,
-        cache: false,
-        processData: false,
-        contentType: false,
-        type: 'POST',
-        success: function (response) {
-            if (response.length > 0) {
-                uploadedFiles.push.apply(uploadedFiles, response);
-            }
-        }
-    });
-}
-function getAndValidateServiceRecordValues() {
-    var serviceDate = $("#serviceRecordDate").val();
-    var serviceMileage = $("#serviceRecordMileage").val();
-    var serviceDescription = $("#serviceRecordDescription").val();
-    var serviceCost = $("#serviceRecordCost").val();
-    var serviceNotes = $("#serviceRecordNotes").val();
-    var vehicleId = GetVehicleId().vehicleId;
-    var serviceRecordId = getServiceRecordModelData().id;
-    //validation
-    var hasError = false;
-    if (serviceDate.trim() == '') { //eliminates whitespace.
-        hasError = true;
-        $("#serviceRecordDate").addClass("is-invalid");
-    } else {
-        $("#serviceRecordDate").removeClass("is-invalid");
-    }
-    if (serviceMileage.trim() == '' || parseInt(serviceMileage) < 0) {
-        hasError = true;
-        $("#serviceRecordMileage").addClass("is-invalid");
-    } else {
-        $("#serviceRecordMileage").removeClass("is-invalid");
-    }
-    if (serviceDescription.trim() == '') {
-        hasError = true;
-        $("#serviceRecordDescription").addClass("is-invalid");
-    } else {
-        $("#serviceRecordDescription").removeClass("is-invalid");
-    }
-    if (serviceCost.trim() == '') {
-        hasError = true;
-        $("#serviceRecordCost").addClass("is-invalid");
-    } else {
-        $("#serviceRecordCost").removeClass("is-invalid");
-    }
-    return {
-        id: serviceRecordId,
-        hasError: hasError,
-        vehicleId: vehicleId,
-        date: serviceDate,
-        mileage: serviceMileage,
-        description: serviceDescription,
-        cost: serviceCost,
-        notes: serviceNotes,
-        files: uploadedFiles
-    }
-}
-function deleteServiceRecordFile(fileLocation, event) {
-    event.parentElement.remove();
-    uploadedFiles = uploadedFiles.filter(x => x.location != fileLocation);
 }