home/aissorg/public_html/admin/js/view-founder.js 0000644 00000033672 15116240703 0016133 0 ustar 00 document.addEventListener('DOMContentLoaded', function () {
const tableBody = document.querySelector('.table tbody');
const alertContainer = document.getElementById('alert-container');
$('#edit-about-description').summernote({
height: 200,
tabsize: 2
});
$('#add-about-description').summernote({
height: 200,
tabsize: 2
});
$('#edit-about-description2').summernote({
height: 200,
tabsize: 2
});
$('#add-about-description2').summernote({
height: 200,
tabsize: 2
});
// Function to display 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);
setTimeout(() => { alertDiv.remove(); }, 5000);
}
// Fetch about content from the server
function fetchAboutContent() {
fetch(BASE_PHP_URL + 'view-founder-crud.php?action=read')
.then(response => response.json())
.then(data => {
if (data.success) {
renderAboutContent(data.data);
} else {
showAlert(data.error, 'danger');
}
})
.catch(() => {
showAlert('Error fetching about content.', 'danger');
});
}
// Render about content in the table
function renderAboutContent(aboutContent) {
tableBody.innerHTML = '';
aboutContent.forEach(about => {
const row = document.createElement('tr');
row.innerHTML = `
| ${about.id} |
${about.title} |
${about.description} |
${about.single_image ? ` ` : 'No Image'}
|
|
`;
tableBody.appendChild(row);
});
// Attach 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 form submission for adding a new about entry
document.getElementById('add-about-form').addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
formData.set('description', $('#add-about-description').summernote('code'));
formData.set('description2', $('#add-about-description2').summernote('code'));
fetch(BASE_PHP_URL + 'view-founder-crud.php?action=create', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
fetchAboutContent();
this.reset();
$('#add-about-description').summernote('reset');
$('#add-about-description2').summernote('reset');
} else {
showAlert(data.error, 'danger');
}
})
.catch(() => {
showAlert('Error adding about content.', 'danger');
});
});
// Handle editing an about entry
function handleEdit(e) {
const id = e.currentTarget.dataset.id;
fetch(BASE_PHP_URL + `view-founder-crud.php?action=read&id=${id}`)
.then(response => response.json())
.then(data => {
if (data.success) {
const about = data.data;
document.getElementById('edit-about-id').value = about.id;
document.getElementById('edit-about-title').value = about.title;
document.getElementById('edit-about-description').value = $('#edit-about-description').summernote('code', about.description);
document.getElementById('edit-about-description2').value = $('#edit-about-description2').summernote('code', about.description2);
;
// Display Single Image
const imageContainer = document.getElementById('edit-about-single-image-preview');
imageContainer.innerHTML = about.single_image
? ``
: 'No Image';
// Display Multiple Images with Delete Option
const multipleImagesContainer = document.getElementById('edit-about-multiple-images-preview');
multipleImagesContainer.innerHTML = '';
if (about.images.length > 0) {
about.images.forEach(image => {
multipleImagesContainer.innerHTML += `
X
`;
});
document.querySelectorAll('.delete-image').forEach(deleteBtn => {
deleteBtn.addEventListener('click', handleImageDelete);
});
} else {
multipleImagesContainer.innerHTML = 'No Images';
}
$('#edit').modal('show');
} else {
showAlert(data.error, 'danger');
}
})
.catch(() => {
showAlert('Error fetching about content.', 'danger');
});
}
// Handle deleting an image using the "X" mark
function handleImageDelete(e) {
const imageName = e.target.dataset.image;
if (confirm('Are you sure you want to delete this image?')) {
fetch(BASE_PHP_URL + `view-founder-crud.php?action=delete_image&image=${encodeURIComponent(imageName)}`, {
method: 'GET'
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
e.target.parentElement.remove();
} else {
showAlert(data.error, 'danger');
}
})
.catch(() => {
showAlert('Error deleting image.', 'danger');
});
}
}
// Handle deleting an entire about entry
function handleDelete(e) {
const id = e.currentTarget.dataset.id;
if (confirm('Are you sure you want to delete this about content?')) {
fetch(BASE_PHP_URL + `view-founder-crud.php?action=delete&id=${id}`, { method: 'GET' })
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
fetchAboutContent();
} else {
showAlert(data.error, 'danger');
}
})
.catch(() => {
showAlert('Error deleting about content.', 'danger');
});
}
}
// Handle form submission for updating an about entry
document.getElementById('edit-about-form').addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
formData.set('description', $('#edit-about-description').summernote('code'));
formData.set('description2', $('#edit-about-description2').summernote('code'));
fetch(BASE_PHP_URL + 'view-founder-crud.php?action=update', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert(data.message);
fetchAboutContent();
$('#edit').modal('hide'); // Close the modal after successful update
} else {
showAlert(data.error, 'danger');
}
})
.catch(() => {
showAlert('Error updating about content.', 'danger');
});
});
// Handle preview of multiple images for "Add About" with validation
const addMultipleImageInput = document.getElementById("add-about-multiple-images");
const addMultipleImagePreview = document.getElementById("add-about-multiple-images-preview");
addMultipleImageInput.addEventListener("change", function (event) {
const files = Array.from(event.target.files);
// Check if the user is uploading more than 3 images
if (files.length > 3) {
Swal.fire({
icon: 'error',
title: 'Upload Limit Exceeded',
text: 'You can only upload a maximum of 3 images.',
});
addMultipleImageInput.value = ""; // Clear selection
return;
}
// Clear previous previews before adding new images
addMultipleImagePreview.innerHTML = '';
files.forEach(file => {
if (validateFile(file)) {
const imgContainer = document.createElement("div");
imgContainer.className = "image-wrapper d-inline-block position-relative me-2";
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
img.width = 100;
const deleteBtn = document.createElement("span");
deleteBtn.className = "delete-image position-absolute top-0 end-0 bg-danger text-white px-1";
deleteBtn.style.cursor = "pointer";
deleteBtn.textContent = "X";
deleteBtn.addEventListener("click", () => imgContainer.remove());
imgContainer.appendChild(img);
imgContainer.appendChild(deleteBtn);
addMultipleImagePreview.appendChild(imgContainer);
} else {
alert(`Invalid file: ${file.name}. Please upload images under 4MB.`);
}
});
});
// Validate file size and type
function validateFile(file) {
return file.size <= 4 * 1024 * 1024 && ["image/jpeg", "image/png", "image/gif", "image/webp"].includes(file.type);
}
// Handle preview of multiple images
// Handle preview of multiple images with validation
const multipleImageInput = document.getElementById("edit-about-multiple-images");
const multipleImagePreview = document.getElementById("edit-about-multiple-images-preview");
multipleImageInput.addEventListener("change", function (event) {
// Get existing images count
const existingImagesCount = document.querySelectorAll("#edit-about-multiple-images-preview .image-wrapper").length;
const files = Array.from(event.target.files);
const allowedImagesCount = 3 - existingImagesCount;
if (files.length > allowedImagesCount) {
Swal.fire({
icon: 'error',
title: 'Upload Limit Exceeded',
text: `You can only upload ${allowedImagesCount} more image(s).`,
});
multipleImageInput.value = ""; // Clear selection
return;
}
// Preserve existing images in the preview
// Preserve existing images in the preview
const existingImagesHTML = multipleImagePreview.innerHTML;
// Clear previous previews (only for new images)
multipleImagePreview.innerHTML = existingImagesHTML;
// Add new images to the preview
files.forEach(file => {
if (validateFile(file)) {
const imgContainer = document.createElement("div");
imgContainer.className = "image-wrapper d-inline-block position-relative me-2";
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
img.width = 100;
const deleteBtn = document.createElement("span");
deleteBtn.className = "delete-image position-absolute top-0 end-0 bg-danger text-white px-1";
deleteBtn.style.cursor = "pointer";
deleteBtn.textContent = "X";
deleteBtn.addEventListener("click", () => imgContainer.remove());
imgContainer.appendChild(img);
imgContainer.appendChild(deleteBtn);
multipleImagePreview.appendChild(imgContainer);
} else {
alert(`Invalid file: ${file.name}. Please upload images under 4MB.`);
}
});
});
// Validate file size and type
function validateFile(file) {
return file.size <= 4 * 1024 * 1024 && ["image/jpeg", "image/png", "image/gif", "image/webp"].includes(file.type);
}
// Initial fetch of about content
fetchAboutContent();
});