diff --git a/resources/views/surveyor/components/foto.blade.php b/resources/views/surveyor/components/foto.blade.php index 7c87ee9..50705e9 100644 --- a/resources/views/surveyor/components/foto.blade.php +++ b/resources/views/surveyor/components/foto.blade.php @@ -211,7 +211,7 @@ @@ -446,7 +446,7 @@
+ onchange="previewImage(this, 'foto_basement_preview')" capture="camera">
diff --git a/resources/views/surveyor/js/fotojs.blade.php b/resources/views/surveyor/js/fotojs.blade.php index e916aa0..a5a4a58 100644 --- a/resources/views/surveyor/js/fotojs.blade.php +++ b/resources/views/surveyor/js/fotojs.blade.php @@ -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'); + + });