update: fixing rerendering
muamars
parent
dff50b1d21
commit
88aef852e0
|
|
@ -121,15 +121,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<input type="file" class="tps-foto-kedatangan block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" accept="image/*" multiple />
|
||||
<div class="tps-preview-kedatangan space-y-2"></div>
|
||||
|
||||
${tps.fotoKedatangan.length > 0 && !tps.fotoKedatanganUploaded ? `
|
||||
<button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
|
||||
Upload ${tps.fotoKedatangan.length} Foto Kedatangan
|
||||
</button>
|
||||
` : tps.fotoKedatanganUploaded ? `
|
||||
<div class="text-center text-xs text-green-600 font-bold py-2">
|
||||
✓ Foto kedatangan sudah diupload
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
|
|
@ -258,14 +250,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
tps.fotoKedatanganUploaded = false;
|
||||
updateWaktuKedatangan();
|
||||
updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
|
||||
renderTpsForm();
|
||||
refreshKedatanganUploadState(form);
|
||||
});
|
||||
|
||||
fotoPetugasInput.addEventListener('change', function() {
|
||||
tps.fotoPetugas = Array.from(this.files);
|
||||
tps.fotoPetugasUploaded = false;
|
||||
updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
|
||||
renderTpsForm();
|
||||
refreshPetugasUploadState(form);
|
||||
});
|
||||
|
||||
namaPetugasInput.addEventListener('input', function() {
|
||||
|
|
@ -660,7 +652,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
if (isUploaded) {
|
||||
return `
|
||||
<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto timbangan sudah diupload</div>
|
||||
<p class="text-[11px] text-gray-500 text-center">Kalau mau revisi, pilih file baru di atas. Status upload akan direset otomatis.</p>
|
||||
<p class="text-[11px] text-gray-500 text-center">Jika ingin revisi, pilih file baru diatas. Status upload akan tereset otomatis.</p>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -677,6 +669,31 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
`;
|
||||
}
|
||||
|
||||
function getKedatanganUploadStateMarkup(tps) {
|
||||
if (tps.fotoKedatanganUploaded) {
|
||||
return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto kedatangan sudah diupload</div>';
|
||||
}
|
||||
if (!tps.fotoKedatangan.length) {
|
||||
return '';
|
||||
}
|
||||
return `<button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">Upload ${tps.fotoKedatangan.length} Foto Kedatangan</button>`;
|
||||
}
|
||||
|
||||
function refreshKedatanganUploadState(form) {
|
||||
const stateContainer = form.querySelector('.kedatangan-upload-state');
|
||||
if (!stateContainer) return;
|
||||
|
||||
const tps = tpsData[activeTpsIndex];
|
||||
stateContainer.innerHTML = getKedatanganUploadStateMarkup(tps);
|
||||
|
||||
const btnUploadKedatangan = stateContainer.querySelector('.tps-btn-upload-kedatangan');
|
||||
if (btnUploadKedatangan) {
|
||||
btnUploadKedatangan.addEventListener('click', uploadFotoKedatangan);
|
||||
}
|
||||
|
||||
refreshSubmitButtonState(form);
|
||||
}
|
||||
|
||||
function getPetugasUploadStateMarkup(tps) {
|
||||
if (tps.fotoPetugasUploaded) {
|
||||
return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto petugas sudah diupload</div>';
|
||||
|
|
@ -968,7 +985,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
const ocrInfo = item.querySelector('.input-ocr-info')?.textContent || 'OCR: belum diproses.';
|
||||
|
||||
tps.timbangan.push({
|
||||
file: fileInput.files[0] || null,
|
||||
file: fileInput.files[0] || previousTimbangan[index]?.file || null,
|
||||
berat: [weight],
|
||||
jenisSampah: [jenisSampah],
|
||||
lokasiAngkut: [],
|
||||
|
|
@ -1050,7 +1067,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
alert(`Upload ${tps.fotoKedatangan.length} foto kedatangan\n(Implementasi upload ke server)`);
|
||||
tps.fotoKedatanganUploaded = true;
|
||||
renderTpsForm();
|
||||
const form = tpsContentContainer.querySelector('form');
|
||||
if (form) refreshKedatanganUploadState(form);
|
||||
}
|
||||
|
||||
function uploadFotoPetugas() {
|
||||
|
|
@ -1065,7 +1083,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
alert(`Upload ${tps.fotoPetugas.length} foto petugas untuk ${tps.name}\n(Implementasi upload ke server)`);
|
||||
tps.fotoPetugasUploaded = true;
|
||||
renderTpsForm();
|
||||
const form = tpsContentContainer.querySelector('form');
|
||||
if (form) refreshPetugasUploadState(form);
|
||||
}
|
||||
|
||||
function submitTpsData() {
|
||||
|
|
|
|||
|
|
@ -250,15 +250,7 @@ const DetailPenjemputan = (function() {
|
|||
<input type="file" class="tps-foto-kedatangan block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" accept="image/*" multiple />
|
||||
<div class="tps-preview-kedatangan space-y-2"></div>
|
||||
|
||||
${tps.fotoKedatangan.length > 0 && !tps.fotoKedatanganUploaded ? `
|
||||
<button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
|
||||
Upload ${tps.fotoKedatangan.length} Foto Kedatangan
|
||||
</button>
|
||||
` : tps.fotoKedatanganUploaded ? `
|
||||
<div class="text-center text-xs text-green-600 font-bold py-2">
|
||||
✓ Foto kedatangan sudah diupload
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
|
|
@ -338,14 +330,14 @@ const DetailPenjemputan = (function() {
|
|||
tps.fotoKedatanganUploaded = false;
|
||||
updateWaktuKedatangan();
|
||||
updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
|
||||
renderTpsForm();
|
||||
refreshKedatanganUploadState(form);
|
||||
});
|
||||
|
||||
fotoPetugasInput.addEventListener('change', function() {
|
||||
tps.fotoPetugas = Array.from(this.files);
|
||||
tps.fotoPetugasUploaded = false;
|
||||
updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
|
||||
renderTpsForm();
|
||||
refreshPetugasUploadState(form);
|
||||
});
|
||||
|
||||
namaPetugasInput.addEventListener('input', function() {
|
||||
|
|
@ -685,7 +677,7 @@ const DetailPenjemputan = (function() {
|
|||
if (isUploaded) {
|
||||
return `
|
||||
<div class="text-center text-xs text-green-600 font-bold py-2 upload-success-message">✓ Foto timbangan sudah diupload</div>
|
||||
<p class="text-[11px] text-gray-500 text-center">Kalau mau revisi, pilih file baru di atas. Status upload akan direset otomatis.</p>
|
||||
<p class="text-[11px] text-gray-500 text-center">Jika ingin revisi, pilih file baru diatas. Status upload akan tereset otomatis.</p>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -702,6 +694,31 @@ const DetailPenjemputan = (function() {
|
|||
`;
|
||||
}
|
||||
|
||||
function getKedatanganUploadStateMarkup(tps) {
|
||||
if (tps.fotoKedatanganUploaded) {
|
||||
return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto kedatangan sudah diupload</div>';
|
||||
}
|
||||
if (!tps.fotoKedatangan.length) {
|
||||
return '';
|
||||
}
|
||||
return `<button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">Upload ${tps.fotoKedatangan.length} Foto Kedatangan</button>`;
|
||||
}
|
||||
|
||||
function refreshKedatanganUploadState(form) {
|
||||
const stateContainer = form.querySelector('.kedatangan-upload-state');
|
||||
if (!stateContainer) return;
|
||||
|
||||
const tps = state.tpsData[state.activeTpsIndex];
|
||||
stateContainer.innerHTML = getKedatanganUploadStateMarkup(tps);
|
||||
|
||||
const btnUploadKedatangan = stateContainer.querySelector('.tps-btn-upload-kedatangan');
|
||||
if (btnUploadKedatangan) {
|
||||
btnUploadKedatangan.addEventListener('click', uploadFotoKedatangan);
|
||||
}
|
||||
|
||||
refreshSubmitButtonState(form);
|
||||
}
|
||||
|
||||
function getPetugasUploadStateMarkup(tps) {
|
||||
if (tps.fotoPetugasUploaded) {
|
||||
return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto petugas sudah diupload</div>';
|
||||
|
|
@ -1211,7 +1228,8 @@ async function applyWatermark(file, photoNumber) {
|
|||
alert(`Upload ${tps.fotoKedatangan.length} foto kedatangan untuk ${tps.name}\n(Implementasi upload ke server)`);
|
||||
|
||||
tps.fotoKedatanganUploaded = true;
|
||||
renderTpsForm();
|
||||
const form = elements.tpsContentContainer.querySelector('form');
|
||||
if (form) refreshKedatanganUploadState(form);
|
||||
}
|
||||
|
||||
function uploadFotoPetugas() {
|
||||
|
|
@ -1228,7 +1246,8 @@ async function applyWatermark(file, photoNumber) {
|
|||
alert(`Upload ${tps.fotoPetugas.length} foto petugas untuk ${tps.name}\n(Implementasi upload ke server)`);
|
||||
|
||||
tps.fotoPetugasUploaded = true;
|
||||
renderTpsForm();
|
||||
const form = elements.tpsContentContainer.querySelector('form');
|
||||
if (form) refreshPetugasUploadState(form);
|
||||
}
|
||||
|
||||
function buildSubmitFormData(tps) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue