perbaikan preview foto numpuk di form inspeksi
This commit is contained in:
majid
@@ -211,7 +211,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger btn-sm delete-btn"
|
||||
onclick="deletePhoto('{{ $index }}')">
|
||||
id="btnDelete">
|
||||
<i class="ki-filled ki-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -446,7 +446,7 @@
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<input id="inputBasement" type="file" name="foto_basement"
|
||||
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"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
@@ -497,7 +497,9 @@
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<input id="inputLingkungan_{{ $key }}" type="file"
|
||||
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"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
@@ -520,8 +522,12 @@
|
||||
</label>
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<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[]"
|
||||
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"
|
||||
data-modal-toggle="#cameraModal">
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
@@ -559,9 +565,12 @@
|
||||
|
||||
<div class="input-group w-full flex gap-2">
|
||||
<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"
|
||||
data-modal-toggle="#cameraModal">
|
||||
data-modal-toggle="#cameraModal"
|
||||
>
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -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