home/aissorg/public_html/admin/js/home-banner.js 0000644 00000023421 15116240757 0015714 0 ustar 00 document.addEventListener('DOMContentLoaded', function () {
const tableBody = document.querySelector('.table tbody');
const alertContainer = document.getElementById('alert-container'); // Container for alerts
// Function to display default Bootstrap alerts
function showAlert(message, type = 'success') {
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
alertDiv.setAttribute('role', 'alert');
alertDiv.innerHTML = `
${type === 'success' ? 'Success!' : 'Error!'} ${message}
`;
alertContainer.appendChild(alertDiv);
// Automatically remove the alert after 5 seconds
setTimeout(() => {
alertDiv.remove();
}, 5000);
}
// Fetch and display banners
function fetchBanners() {
fetch(BASE_PHP_URL + 'home-banner-crud.php?action=read')
.then(response => response.json())
.then(data => {
if (data.success) {
renderBanners(data.data);
} else {
console.error('Failed to fetch banners:', data.error);
showAlert(data.error, 'danger');
}
})
.catch(error => {
console.error('Error fetching banners:', error);
showAlert('An unexpected error occurred while fetching banners.', 'danger');
});
}
// Render banners in the existing table
function renderBanners(banners) {
tableBody.innerHTML = '';
banners.forEach(banner => {
const row = document.createElement('tr');
row.innerHTML = `
| ${banner.id} |
${banner.title} |
${banner.description} |
|
`;
tableBody.appendChild(row);
});
// Add event listeners for edit and delete buttons
document.querySelectorAll('.edit-btn').forEach(button => {
button.addEventListener('click', handleEdit);
});
document.querySelectorAll('.delete-btn').forEach(button => {
button.addEventListener('click', handleDelete);
});
}
// Handle adding a new banner
document.getElementById('add-banner-form').addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
fetch(BASE_PHP_URL + 'home-banner-crud.php?action=create', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
fetchBanners(); // Refresh the table
this.reset(); // Reset the form
} else {
showAlert(data.error, 'danger');
}
})
.catch(error => {
console.error('Error adding banner:', error);
showAlert('An unexpected error occurred while adding the banner.', 'danger');
});
});
// Handle editing a banner
function handleEdit(e) {
const id = e.currentTarget.dataset.id;
fetch(BASE_PHP_URL + `home-banner-crud.php?action=read&id=${id}`)
.then(response => response.json())
.then(data => {
if (data.success) {
const banner = data.data;
document.getElementById('edit-banner-id').value = banner.id;
document.getElementById('edit-banner-title').value = banner.title;
document.getElementById('edit-banner-description').value = banner.description;
// Display Multiple Image Previews with X marks
const multipleImagesPreviewContainer = document.getElementById('edit-banner-multiple-images-preview');
multipleImagesPreviewContainer.innerHTML = ''; // Clear previous images
if (banner.multiple_images && banner.multiple_images.length > 0) {
banner.multiple_images.forEach(image => {
const imgWrapper = document.createElement('div');
imgWrapper.style.position = 'relative';
imgWrapper.style.display = 'inline-block';
imgWrapper.innerHTML = `
X
`;
multipleImagesPreviewContainer.appendChild(imgWrapper);
// Add click event to delete the image
imgWrapper.querySelector('.delete-image').addEventListener('click', function () {
deleteImageFromBanner(banner.id, image, imgWrapper);
});
});
} else {
multipleImagesPreviewContainer.innerHTML = 'No Images';
}
$('#edit').modal('show');
} else {
console.error('Failed to fetch banner:', data.error);
showAlert(data.error, 'danger');
}
})
.catch(error => {
console.error('Error fetching banner:', error);
showAlert('An unexpected error occurred while fetching the banner.', 'danger');
});
}
// Delete an image from the banner
function deleteImageFromBanner(bannerId, image, imgWrapper) {
if (confirm('Are you sure you want to delete this image?')) {
fetch(BASE_PHP_URL + `home-banner-crud.php?action=delete_image&banner_id=${bannerId}&image=${encodeURIComponent(image)}`, { method: 'GET' })
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert('Image deleted successfully.');
imgWrapper.remove(); // Remove the image preview from the DOM
} else {
showAlert(data.error, 'danger');
}
})
.catch(error => {
console.error('Error deleting image:', error);
showAlert('An unexpected error occurred while deleting the image.', 'danger');
});
}
}
// Handle updating a banner
document.getElementById('edit-banner-form').addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
// Validate the number of images being uploaded
const existingImagesCount = document.querySelectorAll('#edit-banner-multiple-images-preview img').length;
const newImagesCount = formData.getAll('multiple_images[]').length;
if (existingImagesCount + newImagesCount > 10) {
// Show SweetAlert2 for maximum image limit warning
Swal.fire({
icon: 'warning',
title: 'Maximum Image Limit Reached!',
text: 'You can only upload a maximum of 10 images.',
confirmButtonText: 'OK'
});
return;
}
fetch(BASE_PHP_URL + 'home-banner-crud.php?action=update', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
fetchBanners(); // Refresh the table
$('#edit').modal('hide'); // Close the modal
} else {
showAlert(data.error, 'danger');
}
})
.catch(error => {
console.error('Error updating banner:', error);
showAlert('An unexpected error occurred while updating the banner.', 'danger');
});
});
// Handle deleting a banner
function handleDelete(e) {
const id = e.currentTarget.dataset.id;
if (confirm('Are you sure you want to delete this banner?')) {
fetch(BASE_PHP_URL + `home-banner-crud.php?action=delete&id=${id}`, { method: 'GET' })
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
fetchBanners(); // Refresh the table
} else {
showAlert(data.error, 'danger');
}
})
.catch(error => {
console.error('Error deleting banner:', error);
showAlert('An unexpected error occurred while deleting the banner.', 'danger');
});
}
}
// Initial fetch
fetchBanners();
});