amar
/
eSPJ
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing : onchange preview image

main
muamars 2026-03-28 15:26:22 +07:00
parent db0708f9a4
commit 3564656bac
1 changed files with 95 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
wwwroot/driver/js/detail-penjemputan-tps.js
View File

@ -802,7 +802,9 @@ const DetailPenjemputan = (function () {
<label class="block text-xs font-semibold text-gray-600">Upload Foto Kedatangan</label> <label class="block text-xs font-semibold text-gray-600">Upload Foto Kedatangan</label>
<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/*" /> <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/*" />
<div class="tps-preview-kedatangan space-y-2"></div> <div class="hidden tps-preview-kedatangan-wrap relative rounded-xl overflow-hidden border border-gray-200 bg-black">
<img class="tps-preview-kedatangan-img w-full h-44 object-contain" alt="Preview foto kedatangan" />
</div>
<div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div> <div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
@ -858,7 +860,9 @@ const DetailPenjemputan = (function () {
<label class="block text-xs font-semibold text-gray-600">Upload Foto Petugas</label> <label class="block text-xs font-semibold text-gray-600">Upload Foto Petugas</label>
<input type="file" class="tps-foto-petugas 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/*" /> <input type="file" class="tps-foto-petugas 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/*" />
<div class="tps-preview-petugas space-y-2"></div> <div class="hidden tps-preview-petugas-wrap relative rounded-xl overflow-hidden border border-gray-200 bg-black">
<img class="tps-preview-petugas-img w-full h-44 object-contain" alt="Preview foto petugas" />
</div>
<div class="petugas-upload-state">${getPetugasUploadStateMarkup(tps)}</div> <div class="petugas-upload-state">${getPetugasUploadStateMarkup(tps)}</div>
@ -881,35 +885,57 @@ const DetailPenjemputan = (function () {
const btnAddTimbangan = form.querySelector(".tps-btn-add-timbangan"); const btnAddTimbangan = form.querySelector(".tps-btn-add-timbangan");
fotoKedatanganInput.addEventListener('change', function() { fotoKedatanganInput.addEventListener('change', function() {
replaceSelectedPhotos( if (!this.files || !this.files[0]) return;
tps, const currentTps = state.tpsData[state.activeTpsIndex];
'fotoKedatangan', const file = this.files[0];
this.files,
form.querySelector('.tps-preview-kedatangan') const previewWrap = form.querySelector('.tps-preview-kedatangan-wrap');
); const previewImg = form.querySelector('.tps-preview-kedatangan-img');
updateWaktuKedatangan(tps.index); if (previewWrap && previewImg) {
const localUrl = URL.createObjectURL(file);
previewImg.src = localUrl;
previewWrap.classList.remove('hidden');
previewImg.onload = () => URL.revokeObjectURL(localUrl);
}
currentTps.fotoKedatangan = [file];
currentTps.fotoKedatanganFileNames = [];
currentTps.fotoKedatanganUploaded = false;
updateWaktuKedatangan(currentTps.index);
refreshKedatanganUploadState(form); refreshKedatanganUploadState(form);
}); });
fotoPetugasInput.addEventListener('change', function() { fotoPetugasInput.addEventListener('change', function() {
replaceSelectedPhotos( if (!this.files || !this.files[0]) return;
tps, const currentTps = state.tpsData[state.activeTpsIndex];
'fotoPetugas', const file = this.files[0];
this.files,
form.querySelector('.tps-preview-petugas') const previewWrap = form.querySelector('.tps-preview-petugas-wrap');
); const previewImg = form.querySelector('.tps-preview-petugas-img');
if (previewWrap && previewImg) {
const localUrl = URL.createObjectURL(file);
previewImg.src = localUrl;
previewWrap.classList.remove('hidden');
previewImg.onload = () => URL.revokeObjectURL(localUrl);
}
currentTps.fotoPetugas = [file];
currentTps.fotoPetugasFileNames = [];
currentTps.fotoPetugasUploaded = false;
refreshPetugasUploadState(form); refreshPetugasUploadState(form);
}); });
namaPetugasInput.addEventListener('input', function() { namaPetugasInput.addEventListener('input', function() {
tps.namaPetugas = this.value; state.tpsData[state.activeTpsIndex].namaPetugas = this.value;
refreshPetugasUploadState(form); refreshPetugasUploadState(form);
scheduleAutoSave(tps.index); scheduleAutoSave(state.activeTpsIndex);
}); });
namaPetugasInput.addEventListener('blur', function() { namaPetugasInput.addEventListener('blur', function() {
tps.namaPetugas = this.value; state.tpsData[state.activeTpsIndex].namaPetugas = this.value;
scheduleAutoSave(tps.index); scheduleAutoSave(state.activeTpsIndex);
}); });
btnAddTimbangan.addEventListener('click', function() { btnAddTimbangan.addEventListener('click', function() {
@ -955,24 +981,46 @@ const DetailPenjemputan = (function () {
const form = elements.tpsContentContainer.querySelector("form"); const form = elements.tpsContentContainer.querySelector("form");
if (!form) return; if (!form) return;
const previewKedatangan = form.querySelector('.tps-preview-kedatangan'); const previewWrapKedatangan = form.querySelector('.tps-preview-kedatangan-wrap');
if (previewKedatangan) { const previewImgKedatangan = form.querySelector('.tps-preview-kedatangan-img');
renderPhotoPreviewByState({ if (previewWrapKedatangan && previewImgKedatangan) {
files: tps.fotoKedatangan, let imgSrc = '';
uploaded: tps.fotoKedatanganUploaded, if (Array.isArray(tps.fotoKedatangan) && tps.fotoKedatangan.length > 0) {
fileNames: tps.fotoKedatanganFileNames, const localUrl = getStoredPhotoUrl(tps.fotoKedatangan[0]);
container: previewKedatangan, if (localUrl) {
}); imgSrc = localUrl;
if (isBrowserFile(resolveStoredPhoto(tps.fotoKedatangan[0]))) {
previewImgKedatangan.onload = () => URL.revokeObjectURL(localUrl);
}
}
} else if (tps.fotoKedatanganUploaded && Array.isArray(tps.fotoKedatanganFileNames) && tps.fotoKedatanganFileNames.length > 0) {
imgSrc = tps.fotoKedatanganFileNames[0];
}
if (imgSrc) {
previewImgKedatangan.src = imgSrc;
previewWrapKedatangan.classList.remove('hidden');
}
} }
const previewPetugas = form.querySelector('.tps-preview-petugas'); const previewWrapPetugas = form.querySelector('.tps-preview-petugas-wrap');
if (previewPetugas) { const previewImgPetugas = form.querySelector('.tps-preview-petugas-img');
renderPhotoPreviewByState({ if (previewWrapPetugas && previewImgPetugas) {
files: tps.fotoPetugas, let imgSrc = '';
uploaded: tps.fotoPetugasUploaded, if (Array.isArray(tps.fotoPetugas) && tps.fotoPetugas.length > 0) {
fileNames: tps.fotoPetugasFileNames, const localUrl = getStoredPhotoUrl(tps.fotoPetugas[0]);
container: previewPetugas, if (localUrl) {
}); imgSrc = localUrl;
if (isBrowserFile(resolveStoredPhoto(tps.fotoPetugas[0]))) {
previewImgPetugas.onload = () => URL.revokeObjectURL(localUrl);
}
}
} else if (tps.fotoPetugasUploaded && Array.isArray(tps.fotoPetugasFileNames) && tps.fotoPetugasFileNames.length > 0) {
imgSrc = tps.fotoPetugasFileNames[0];
}
if (imgSrc) {
previewImgPetugas.src = imgSrc;
previewWrapPetugas.classList.remove('hidden');
}
} }
} }
@ -2040,6 +2088,12 @@ const DetailPenjemputan = (function () {
if (form) { if (form) {
const fotoInput = form.querySelector('.tps-foto-kedatangan'); const fotoInput = form.querySelector('.tps-foto-kedatangan');
if (fotoInput) fotoInput.value = ''; if (fotoInput) fotoInput.value = '';
const previewWrap = form.querySelector('.tps-preview-kedatangan-wrap');
const previewImg = form.querySelector('.tps-preview-kedatangan-img');
if (previewWrap && previewImg && tps.fotoKedatanganFileNames.length > 0) {
previewImg.src = tps.fotoKedatanganFileNames[0];
previewWrap.classList.remove('hidden');
}
refreshKedatanganUploadState(form); refreshKedatanganUploadState(form);
} }
scheduleAutoSave(tps.index); scheduleAutoSave(tps.index);
@ -2095,6 +2149,12 @@ const DetailPenjemputan = (function () {
if (form) { if (form) {
const fotoInput = form.querySelector('.tps-foto-petugas'); const fotoInput = form.querySelector('.tps-foto-petugas');
if (fotoInput) fotoInput.value = ''; if (fotoInput) fotoInput.value = '';
const previewWrap = form.querySelector('.tps-preview-petugas-wrap');
const previewImg = form.querySelector('.tps-preview-petugas-img');
if (previewWrap && previewImg && tps.fotoPetugasFileNames.length > 0) {
previewImg.src = tps.fotoPetugasFileNames[0];
previewWrap.classList.remove('hidden');
}
refreshPetugasUploadState(form); refreshPetugasUploadState(form);
} }
scheduleAutoSave(tps.index); scheduleAutoSave(tps.index);