| DIR: /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/ |
| Current File : /home/aissorg/public_html/fonts/qzfcvsedcv/werwcwsfs/officer-list.js.tar |
home/aissorg/public_html/admin/js/officer-list.js 0000644 00000034337 15116256112 0016107 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 = `
<strong>${type === 'success' ? 'Success!' : 'Error!'}</strong> ${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
alertContainer.appendChild(alertDiv);
setTimeout(() => { alertDiv.remove(); }, 5000);
}
// Fetch about content from the server
function fetchAboutContent() {
fetch(BASE_PHP_URL + 'officer-list-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');
});
}
function renderAboutContent(aboutContent) {
tableBody.innerHTML = '';
aboutContent.forEach(about => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${about.id}</td>
<td>${about.name || 'No Title'}</td>
<td>${about.designation || 'No Description'}</td>
<td>
${about.image
? `<img src="assets/img/about/${about.image}" alt="About" width="100">`
: 'No Image'}
</td>
<td class="d-flex align-items-center">
<a class="btn-action-icon me-2 edit-btn" href="javascript:void(0);" data-id="${about.id}" data-bs-toggle="modal" data-bs-target="#edit">
<i class="fe fe-edit"></i>
</a>
<a class="btn-action-icon me-2 delete-btn" href="javascript:void(0);" data-id="${about.id}">
<i class="fe fe-trash"></i>
</a>
</td>
`;
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);
// Map frontend fields to backend fields
formData.set('name', formData.get('title'));
formData.set('designation', $('#add-about-description').summernote('code'));
formData.delete('title'); // Remove unused field
formData.delete('description'); // Remove unused field
fetch(BASE_PHP_URL + 'officer-list-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');
} 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 + `officer-list-crud.php?action=read&id=${id}`)
.then(response => response.json())
.then(data => {
if (data.success) {
const about = data.data;
// Populate form fields
document.getElementById('edit-about-id').value = about.id;
document.getElementById('edit-about-title').value = about.name || ''; // Map 'name' to 'title'
// Initialize Summernote editors with existing content
$('#edit-about-description').summernote('code', about.designation || ''); // Map 'designation' to 'description'
$('#edit-about-description2').summernote('code', about.description2 || '');
// Display Single Image
const imageContainer = document.getElementById('edit-about-single-image-preview');
imageContainer.innerHTML = about.image
? `<img src="assets/img/about/${about.image}" alt="About" width="100">`
: 'No Image';
// Display Multiple Images with Delete Option
const multipleImagesContainer = document.getElementById('edit-about-multiple-images-preview');
multipleImagesContainer.innerHTML = '';
// Ensure 'images' is an array before iterating
const images = about.images || [];
if (images.length > 0) {
images.forEach(image => {
multipleImagesContainer.innerHTML += `
<div class="image-wrapper d-inline-block position-relative me-2">
<img src="assets/img/about/${image}" alt="About" width="100">
<span class="delete-image position-absolute top-0 end-0 bg-danger text-white px-1"
data-image="${image}" style="cursor:pointer;">X</span>
</div>
`;
});
// Attach event listeners for delete buttons
document.querySelectorAll('.delete-image').forEach(deleteBtn => {
deleteBtn.addEventListener('click', handleImageDelete);
});
} else {
multipleImagesContainer.innerHTML = 'No Images';
}
// Show the modal
$('#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 + `officer-list-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 + `officer-list-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 + 'officer-list-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();
}); |