daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perbaikan preview foto numpuk di form inspeksi

Browse Source
This commit is contained in:
majid
2024-12-20 15:30:38 +07:00
parent a9d9173208
commit 639bdfed98
2 changed files with 120 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/views/surveyor/components/foto.blade.php
View File

@@ -211,7 +211,7 @@
</div> </div>
</div> </div>
<button type="button" class="btn btn-danger btn-sm delete-btn" <button type="button" class="btn btn-danger btn-sm delete-btn"
onclick="deletePhoto('{{ $index }}')"> id="btnDelete">
<i class="ki-filled ki-trash"></i> <i class="ki-filled ki-trash"></i>
</button> </button>
</div> </div>
@@ -446,7 +446,7 @@
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input id="inputBasement" type="file" name="foto_basement" <input id="inputBasement" type="file" name="foto_basement"
class="file-input file-input-bordered w-full" accept="image/*" class="file-input file-input-bordered w-full" accept="image/*"
capture="camera"> onchange="previewImage(this, 'foto_basement_preview')" capture="camera">
<button type="button" id="btnCamera" class="btn btn-light" <button type="button" id="btnCamera" class="btn btn-light"
data-modal-toggle="#cameraModal"> data-modal-toggle="#cameraModal">
<i class="ki-outline ki-abstract-33"></i> Camera <i class="ki-outline ki-abstract-33"></i> Camera
@@ -497,7 +497,9 @@
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input id="inputLingkungan_{{ $key }}" type="file" <input id="inputLingkungan_{{ $key }}" type="file"
name="foto_lingkungan[]" class="file-input file-input-bordered w-full" name="foto_lingkungan[]" class="file-input file-input-bordered w-full"
accept="image/*" capture="camera"> accept="image/*" capture="camera"
onchange="previewImage(this, 'foto_lingkungan_preview_{{ $key }}')"
>
<button type="button" id="btnCamera" class="btn btn-light" <button type="button" id="btnCamera" class="btn btn-light"
data-modal-toggle="#cameraModal"> data-modal-toggle="#cameraModal">
<i class="ki-outline ki-abstract-33"></i> Camera <i class="ki-outline ki-abstract-33"></i> Camera
@@ -520,8 +522,12 @@
</label> </label>
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input type="hidden" name="name_lingkungan[]" value="lingkungan"> <input type="hidden" name="name_lingkungan[]" value="lingkungan">
<img id="foto_lingkungan_preview_0"
src="{{ isset($formFoto['lingkungan']) ? asset('storage/' . old('lingkungan', $formFoto['lingkungan'])) : '#' }}"
alt="Gambar Lingkungan" style="width: 30rem;" onerror="this.style.display='none';">
<input id="inputLingkungan_0" type="file" name="foto_lingkungan[]" <input id="inputLingkungan_0" type="file" name="foto_lingkungan[]"
class="file-input file-input-bordered w-full" accept="image/*" capture="camera"> class="file-input file-input-bordered w-full" accept="image/*" capture="camera"
onchange="previewImage(this, 'foto_lingkungan_preview_0')" >
<button type="button" id="btnCamera" class="btn btn-light" <button type="button" id="btnCamera" class="btn btn-light"
data-modal-toggle="#cameraModal"> data-modal-toggle="#cameraModal">
<i class="ki-outline ki-abstract-33"></i> Camera <i class="ki-outline ki-abstract-33"></i> Camera
@@ -559,9 +565,12 @@
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input id="inputPendamping" type="file" name="pendamping" <input id="inputPendamping" type="file" name="pendamping"
class="file-input file-input-bordered w-full" accept="image/*" capture="camera"> class="file-input file-input-bordered w-full" accept="image/*"
onchange="previewImage(this, 'pendamping')"
capture="camera">
<button type="button" id="btnCamera" class="btn btn-light" <button type="button" id="btnCamera" class="btn btn-light"
data-modal-toggle="#cameraModal"> data-modal-toggle="#cameraModal"
>
<i class="ki-outline ki-abstract-33"></i> Camera <i class="ki-outline ki-abstract-33"></i> Camera
</button> </button>
</div> </div>

213
resources/views/surveyor/js/fotojs.blade.php
View File

@@ -71,134 +71,131 @@
function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) { function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) {
const addButton = document.getElementById(buttonId); const addButton = document.getElementById(buttonId);
const inputContainer = document.getElementById(containerId); const inputContainer = document.getElementById(containerId);
if (!addButton || !inputContainer) { if (!addButton || !inputContainer) {
console.error(`Element with ID ${containerId} or ${buttonId} not found.`); console.error(`Element with ID ${containerId} or ${buttonId} not found.`);
return; return;
} }
function updateLabels() { function updateLabels() {
const labels = inputContainer.querySelectorAll('.form-label span'); const labels = inputContainer.querySelectorAll('.form-label span');
labels.forEach((label, index) => { labels.forEach((label, index) => {
label.textContent = `${labelText} ${index + 1}`; label.textContent = `${labelText} ${index + 1}`;
}); });
} }
function handleDeleteButtons() { function handleDeleteButtons() {
const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`); const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`);
deleteBtns.forEach(btn => { deleteBtns.forEach(btn => {
btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none'; btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none';
}); });
} }
function createNewInput() { function createNewInput() {
const newDiv = inputContainer.children[0].cloneNode(true); const newDiv = inputContainer.children[0].cloneNode(true);
// Reset semua input dalam elemen baru // Reset semua input dalam elemen baru
const inputFile = newDiv.querySelector(`.${inputDataClass}`); const inputFile = newDiv.querySelector(`.${inputDataClass}`);
if (inputFile) { const previewContainer = newDiv.querySelector('.preview-container');
inputFile.id = `inputLingkungan-${inputContainer.children.length}`; const imgPreview = previewContainer.querySelector('img');
inputFile.value = ''; // Reset input file
// Tambahkan event listener untuk preview if (inputFile) {
inputFile.addEventListener('change', function() { // Generate unique ID untuk input dan preview
const file = this.files[0]; const uniqueId = `${containerId}-${Date.now()}`;
if (file) { inputFile.id = `input-${uniqueId}`;
const reader = new FileReader(); imgPreview.id = `preview-${uniqueId}`;
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);
}
});
}
// Tambahkan logika reset untuk elemen preview // Reset input file
const imgPreview = newDiv.querySelector('img'); inputFile.value = '';
if (imgPreview) {
imgPreview.src = '';
imgPreview.style.display = 'none';
}
const deleteBtn = newDiv.querySelector(`.${buttonDeleteClass}`); // Tambahkan event listener untuk preview
if (deleteBtn) { inputFile.addEventListener('change', function() {
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() {
const file = this.files[0]; const file = this.files[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function(e) { reader.onload = function(e) {
const img = document.getElementById( imgPreview.src = e.target.result;
`foto_lingkungan_preview_${index}` imgPreview.style.display = 'block';
);
img.src = e.target.result;
img.style.display = 'block';
}; };
reader.readAsDataURL(file); 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(); updateLabels();
handleDeleteButtons(); handleDeleteButtons();
} }
setupInputHandlers('inputContainerRute', 'btnRute', 'Foto Rute Menuju Lokasi', 'file-input', // Event listener untuk tombol tambah
'delete-btn'); addButton.addEventListener('click', createNewInput);
setupInputHandlers('inputContainerLantai', 'btnLantai', 'Foto Lantai', 'file-input', 'delete-btn');
setupInputHandlers('inputContainerLingkungan', 'btnLingkungan', 'Lingkungan', 'file-input', // Inisialisasi preview untuk input yang sudah ada
'delete-btn'); 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> </script>