perbaikan preview foto numpuk di form inspeksi
This commit is contained in:
majid
@@ -71,134 +71,131 @@
|
||||
|
||||
|
||||
function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) {
|
||||
const addButton = document.getElementById(buttonId);
|
||||
const inputContainer = document.getElementById(containerId);
|
||||
const addButton = document.getElementById(buttonId);
|
||||
const inputContainer = document.getElementById(containerId);
|
||||
|
||||
if (!addButton || !inputContainer) {
|
||||
console.error(`Element with ID ${containerId} or ${buttonId} not found.`);
|
||||
return;
|
||||
}
|
||||
if (!addButton || !inputContainer) {
|
||||
console.error(`Element with ID ${containerId} or ${buttonId} not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
function updateLabels() {
|
||||
const labels = inputContainer.querySelectorAll('.form-label span');
|
||||
labels.forEach((label, index) => {
|
||||
label.textContent = `${labelText} ${index + 1}`;
|
||||
});
|
||||
}
|
||||
function updateLabels() {
|
||||
const labels = inputContainer.querySelectorAll('.form-label span');
|
||||
labels.forEach((label, index) => {
|
||||
label.textContent = `${labelText} ${index + 1}`;
|
||||
});
|
||||
}
|
||||
|
||||
function handleDeleteButtons() {
|
||||
const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`);
|
||||
deleteBtns.forEach(btn => {
|
||||
btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
function handleDeleteButtons() {
|
||||
const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`);
|
||||
deleteBtns.forEach(btn => {
|
||||
btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function createNewInput() {
|
||||
const newDiv = inputContainer.children[0].cloneNode(true);
|
||||
function createNewInput() {
|
||||
const newDiv = inputContainer.children[0].cloneNode(true);
|
||||
|
||||
// Reset semua input dalam elemen baru
|
||||
const inputFile = newDiv.querySelector(`.${inputDataClass}`);
|
||||
if (inputFile) {
|
||||
inputFile.id = `inputLingkungan-${inputContainer.children.length}`;
|
||||
inputFile.value = ''; // Reset input file
|
||||
// Reset semua input dalam elemen baru
|
||||
const inputFile = newDiv.querySelector(`.${inputDataClass}`);
|
||||
const previewContainer = newDiv.querySelector('.preview-container');
|
||||
const imgPreview = previewContainer.querySelector('img');
|
||||
|
||||
// Tambahkan event listener untuk preview
|
||||
inputFile.addEventListener('change', function() {
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const img = document.getElementById(
|
||||
`foto_lingkungan_preview_${inputFile.id}`
|
||||
);
|
||||
img.src = e.target.result;
|
||||
img.style.display = 'block';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (inputFile) {
|
||||
// Generate unique ID untuk input dan preview
|
||||
const uniqueId = `${containerId}-${Date.now()}`;
|
||||
inputFile.id = `input-${uniqueId}`;
|
||||
imgPreview.id = `preview-${uniqueId}`;
|
||||
|
||||
// Tambahkan logika reset untuk elemen preview
|
||||
const imgPreview = newDiv.querySelector('img');
|
||||
if (imgPreview) {
|
||||
imgPreview.src = '';
|
||||
imgPreview.style.display = 'none';
|
||||
}
|
||||
// Reset input file
|
||||
inputFile.value = '';
|
||||
|
||||
const deleteBtn = newDiv.querySelector(`.${buttonDeleteClass}`);
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
inputContainer.removeChild(newDiv);
|
||||
handleDeleteButtons();
|
||||
updateLabels();
|
||||
});
|
||||
}
|
||||
|
||||
// Tambahkan container preview jika tidak ada
|
||||
let previewContainer = newDiv.querySelector('.preview-container');
|
||||
if (!previewContainer) {
|
||||
previewContainer = document.createElement('div');
|
||||
previewContainer.className = 'preview-container';
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.id = `foto_lingkungan_preview_${inputFile.id}`;
|
||||
img.src = '';
|
||||
img.className = 'mt-2 h-auto';
|
||||
img.style.display = 'none';
|
||||
img.style.width = '30rem';
|
||||
previewContainer.appendChild(img);
|
||||
|
||||
const inputGroup = newDiv.querySelector('.input-group');
|
||||
inputGroup.appendChild(previewContainer);
|
||||
}
|
||||
|
||||
newDiv.style.marginTop = '10px';
|
||||
inputContainer.appendChild(newDiv);
|
||||
updateLabels();
|
||||
handleDeleteButtons();
|
||||
}
|
||||
|
||||
addButton.addEventListener('click', createNewInput);
|
||||
|
||||
// Terapkan event listener pada elemen yang sudah ada
|
||||
const existingInputs = inputContainer.querySelectorAll(`.${inputDataClass}`);
|
||||
existingInputs.forEach((input, index) => {
|
||||
const deleteBtn = input.closest('.flex').querySelector(`.${buttonDeleteClass}`);
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
if (inputContainer.children.length > 1) {
|
||||
inputContainer.removeChild(this.closest('.flex'));
|
||||
handleDeleteButtons();
|
||||
updateLabels();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
input.addEventListener('change', function() {
|
||||
// Tambahkan event listener untuk preview
|
||||
inputFile.addEventListener('change', function() {
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const img = document.getElementById(
|
||||
`foto_lingkungan_preview_${index}`
|
||||
);
|
||||
img.src = e.target.result;
|
||||
img.style.display = 'block';
|
||||
imgPreview.src = e.target.result;
|
||||
imgPreview.style.display = 'block';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Reset preview
|
||||
imgPreview.src = '';
|
||||
imgPreview.style.display = 'none';
|
||||
|
||||
const deleteBtn = newDiv.querySelector(`.${buttonDeleteClass}`);
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
inputContainer.removeChild(newDiv);
|
||||
handleDeleteButtons();
|
||||
updateLabels();
|
||||
});
|
||||
}
|
||||
|
||||
newDiv.style.marginTop = '10px';
|
||||
inputContainer.appendChild(newDiv);
|
||||
updateLabels();
|
||||
handleDeleteButtons();
|
||||
}
|
||||
|
||||
setupInputHandlers('inputContainerRute', 'btnRute', 'Foto Rute Menuju Lokasi', 'file-input',
|
||||
'delete-btn');
|
||||
setupInputHandlers('inputContainerLantai', 'btnLantai', 'Foto Lantai', 'file-input', 'delete-btn');
|
||||
setupInputHandlers('inputContainerLingkungan', 'btnLingkungan', 'Lingkungan', 'file-input',
|
||||
'delete-btn');
|
||||
// Event listener untuk tombol tambah
|
||||
addButton.addEventListener('click', createNewInput);
|
||||
|
||||
// Inisialisasi preview untuk input yang sudah ada
|
||||
const existingInputs = inputContainer.querySelectorAll(`.${inputDataClass}`);
|
||||
existingInputs.forEach((input, index) => {
|
||||
const previewContainer = input.closest('.flex').querySelector('.preview-container');
|
||||
const imgPreview = previewContainer.querySelector('img');
|
||||
|
||||
input.addEventListener('change', function() {
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
imgPreview.src = e.target.result;
|
||||
imgPreview.style.display = 'block';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Tambahkan event listener untuk tombol hapus
|
||||
document.querySelectorAll('.delete-btn').forEach(deleteBtn => {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
// Temukan container terdekat yang akan dihapus
|
||||
const containerToRemove = this.closest('.flex');
|
||||
const inputContainer = this.closest('#inputContainerRute');
|
||||
|
||||
if (inputContainer.querySelectorAll('.flex').length > 1) {
|
||||
containerToRemove.remove();
|
||||
|
||||
// Update nomor label setelah penghapusan
|
||||
updateLabels(inputContainer);
|
||||
} else {
|
||||
// Jika hanya satu input, reset input tersebut
|
||||
resetInput(containerToRemove);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
updateLabels();
|
||||
handleDeleteButtons();
|
||||
}
|
||||
|
||||
|
||||
setupInputHandlers('inputContainerRute', 'btnRute', 'Foto Rute Menuju Lokasi', 'file-input',
|
||||
'delete-btn');
|
||||
setupInputHandlers('inputContainerLantai', 'btnLantai', 'Foto Lantai', 'file-input',
|
||||
'delete-btn');
|
||||
setupInputHandlers('inputContainerLingkungan', 'btnLingkungan', 'Lingkungan', 'file-input',
|
||||
'delete-btn');
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user