diff --git a/03PovertyMapping/lapor.html b/03PovertyMapping/lapor.html index 23c22c0..72b1a3e 100644 --- a/03PovertyMapping/lapor.html +++ b/03PovertyMapping/lapor.html @@ -1321,6 +1321,18 @@ async function submitReport() { const upRes = await PhotoUpload.upload('report', reportId, photoInput.files); console.log('Upload result:', upRes); } + + // Tampilkan pesan sukses dan ubah UI + document.getElementById('formWrap').style.display = 'none'; + document.getElementById('successCard').style.display = 'block'; + document.getElementById('successReportId').textContent = reportId; + + // Kembalikan tombol ke state awal + btn.disabled = false; + btn.innerHTML = ' Kirim Laporan'; + + // Scroll ke atas untuk melihat pesan sukses + window.scrollTo({ top: 0, behavior: 'smooth' }); } else { showToast(data.message || 'Gagal mengirim laporan.', 'error', 5000); btn.disabled = false; @@ -1384,6 +1396,7 @@ function resetForm() { } // Reset photos + globalSelectedFiles = []; const photoInput = document.getElementById('reportPhotos'); if (photoInput) photoInput.value = ''; const strip = document.getElementById('reportPhotoStrip'); @@ -1425,6 +1438,9 @@ function showToast(msg, type = 'success', duration = 3200) { const strip = document.getElementById('reportPhotoStrip'); const errEl = document.getElementById('reportPhotoError'); + // Array global untuk menampung file secara kumulatif + window.globalSelectedFiles = window.globalSelectedFiles || []; + if (!zone || !input) return; function showErr(msg) { @@ -1438,44 +1454,73 @@ function showToast(msg, type = 'success', duration = 3200) { document.getElementById('reportPhotoZone')?.classList.remove('dragover'); } + function updateInputFiles() { + const dt = new DataTransfer(); + window.globalSelectedFiles.forEach(file => dt.items.add(file)); + input.files = dt.files; + } + function handleFiles(fileList) { clearErr(); - // Validasi jumlah file - if (fileList.length > PhotoUpload.MAX_FILES) { - showErr(`Maksimal ${PhotoUpload.MAX_FILES} foto.`); - input.value = ''; + const newArray = Array.from(fileList); + const currentTotal = window.globalSelectedFiles.length + newArray.length; + + // Validasi jumlah file total + if (currentTotal > PhotoUpload.MAX_FILES) { + showErr(`Maksimal ${PhotoUpload.MAX_FILES} foto. Anda sudah memilih ${window.globalSelectedFiles.length} foto.`); + updateInputFiles(); // kembalikan ke sebelumnya return; } // Validasi tiap file - for (let i = 0; i < fileList.length; i++) { - const file = fileList[i]; + for (let i = 0; i < newArray.length; i++) { + const file = newArray[i]; const ext = file.name.split('.').pop().toLowerCase(); if (!['jpg', 'jpeg', 'png'].includes(ext)) { showErr(`File "${file.name}" bukan JPG/PNG.`); - input.value = ''; + updateInputFiles(); return; } if (file.size > 5 * 1024 * 1024) { showErr(`File "${file.name}" melebihi 5 MB.`); - input.value = ''; + updateInputFiles(); return; } } - // Tampilkan preview + // Tambahkan ke array global + window.globalSelectedFiles.push(...newArray); + updateInputFiles(); + + // Tampilkan preview kumulatif strip.innerHTML = ''; - Array.from(fileList).forEach(file => { + window.globalSelectedFiles.forEach((file, index) => { + const wrapper = document.createElement('div'); + wrapper.style.cssText = 'position:relative;display:inline-block;margin:4px;'; + const reader = new FileReader(); reader.onload = function(e) { const img = document.createElement('img'); img.src = e.target.result; img.className = 'photo-thumb'; - img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:8px;border:1.5px solid #e2e6ef;margin:4px;cursor:pointer;'; + img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:8px;border:1.5px solid #e2e6ef;cursor:pointer;'; img.title = file.name; img.onclick = () => PhotoUpload.lightbox(img.src); - strip.appendChild(img); + + const btn = document.createElement('button'); + btn.innerHTML = '×'; + btn.style.cssText = 'position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.6);color:white;border:none;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:1;cursor:pointer;padding:0;'; + btn.onclick = (e) => { + e.stopPropagation(); + window.globalSelectedFiles.splice(index, 1); + updateInputFiles(); + handleFiles([]); // Re-render preview + }; + + wrapper.appendChild(img); + wrapper.appendChild(btn); + strip.appendChild(wrapper); }; reader.readAsDataURL(file); });