update contact img

This commit is contained in:
r2xrzh9q2z-lab
2026-02-06 14:53:45 +07:00
parent b81a21a669
commit b3bef037c4

View File

@@ -362,6 +362,19 @@
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium">Image Contact</label>
<div class="input-group mb-2">
<input type="text" id="contact_image_input" name="contact_image" class="form-control" placeholder="/uploads/visa/contact-image.jpg" required />
<button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('fileContactImageInput').click()">
<i class="fas fa-upload"></i>
</button>
</div>
<input type="file" id="fileContactImageInput" style="display:none" accept="image/*"/>
<div style="margin-top: 10px;">
<img id="preview_contact_image" src="" alt="Contact Image Preview" style="max-width: 200px; max-height: 150px; object-fit: cover; display: none; border-radius: 4px; border: 1px solid #ddd;">
</div>
</div>
<div class="col-md-12">
<label class="form-label fw-medium">Section Title</label>
<input type="text" name="contact_sectionTitle" class="form-control" placeholder="e.g. Visa & Immigration" required/>
@@ -452,18 +465,20 @@
// Image upload handler
function setupImageUploadHandlers() {
const imageInputs = ["fileFlagInput", "fileDetailMainInput", "fileGalleryInput1", "fileGalleryInput2"];
const imageInputs = ["fileFlagInput", "fileDetailMainInput", "fileGalleryInput1", "fileGalleryInput2", "fileContactImageInput"];
const previewMap = {
fileFlagInput: "preview_icon",
fileDetailMainInput: "preview_main_detail",
fileGalleryInput1: "preview_bannerImageGallery1",
fileGalleryInput2: "preview_bannerImageGallery2"
fileGalleryInput2: "preview_bannerImageGallery2",
fileContactImageInput: "preview_contact_image"
};
const inputMap = {
fileFlagInput: "icon_input",
fileDetailMainInput: "mainImage_detail",
fileGalleryInput1: "bannerImageGallery1",
fileGalleryInput2: "bannerImageGallery2"
fileGalleryInput2: "bannerImageGallery2",
fileContactImageInput: "contact_image_input"
};
imageInputs.forEach((fileId) => {
@@ -758,6 +773,17 @@
const contactInfo = country.detailedView?.contactInfo;
if (contactInfo) {
document.querySelector('input[name="contact_image"]').value = contactInfo.img || "";
// Update contact image preview
if (contactInfo.img) {
const contactPreview = document.getElementById("preview_contact_image");
if (contactPreview) {
contactPreview.src = contactInfo.img;
contactPreview.style.display = "block";
}
}
document.querySelector('input[name="contact_image"]').value = contactInfo.img || "";
document.querySelector('input[name="contact_sectionTitle"]').value = contactInfo.sectionTitle || "";
document.querySelector('input[name="contact_helpText"]').value = contactInfo.helpText || "";
document.querySelector('input[name="contact_phone_label"]').value = contactInfo.phone?.label || "";
@@ -766,6 +792,7 @@
document.querySelector('input[name="contact_email"]').value = contactInfo.email?.value || "";
document.querySelector('input[name="contact_location_label"]').value = contactInfo.location?.label || "";
document.querySelector('input[name="contact_location"]').value = contactInfo.location?.address || "";
}
}
@@ -843,6 +870,7 @@
document.getElementById("preview_main_detail").style.display = "none";
document.getElementById("preview_bannerImageGallery1").style.display = "none";
document.getElementById("preview_bannerImageGallery2").style.display = "none";
document.getElementById("preview_contact_image").style.display = "none";
// Clear related countries previews
for (let i = 0; i < 7; i++) {
@@ -858,12 +886,13 @@
relatedNameInputs.forEach(input => input.value = "");
relatedIconInputs.forEach(input => input.value = "");
const contactFields = ["contact_sectionTitle", "contact_helpText", "contact_phone_label", "contact_phone", "contact_email_label", "contact_email", "contact_location_label", "contact_location"];
const contactFields = ["contact_image", "contact_sectionTitle", "contact_helpText", "contact_phone_label", "contact_phone", "contact_email_label", "contact_email", "contact_location_label", "contact_location"];
contactFields.forEach(fieldName => {
const field = document.querySelector(`input[name="${fieldName}"]`);
if (field) field.value = "";
});
showFormView();
});
@@ -954,6 +983,7 @@
icon: document.getElementById(`related_url_${index}`)?.value || ""
})),
contactInfo: {
img: document.querySelector('input[name="contact_image"]').value,
sectionTitle: document.querySelector('input[name="contact_sectionTitle"]').value,
helpText: document.querySelector('input[name="contact_helpText"]').value,
phone: {
@@ -971,6 +1001,7 @@
}
}
};
console.log('Payload:', payload);
try {
btnSave.disabled = true;