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>
<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>
@ -858,7 +860,9 @@ const DetailPenjemputan = (function () {
<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/*" />
<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>
@ -881,35 +885,57 @@ const DetailPenjemputan = (function () {
const btnAddTimbangan = form.querySelector(".tps-btn-add-timbangan");
fotoKedatanganInput.addEventListener('change', function() {
replaceSelectedPhotos(
tps,
'fotoKedatangan',
this.files,
form.querySelector('.tps-preview-kedatangan')
);
updateWaktuKedatangan(tps.index);
if (!this.files || !this.files[0]) return;
const currentTps = state.tpsData[state.activeTpsIndex];
const file = this.files[0];
const previewWrap = form.querySelector('.tps-preview-kedatangan-wrap');
const previewImg = form.querySelector('.tps-preview-kedatangan-img');
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);
});
fotoPetugasInput.addEventListener('change', function() {
replaceSelectedPhotos(
tps,
'fotoPetugas',
this.files,
form.querySelector('.tps-preview-petugas')
);
if (!this.files || !this.files[0]) return;
const currentTps = state.tpsData[state.activeTpsIndex];
const file = this.files[0];
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);
});
namaPetugasInput.addEventListener('input', function() {
tps.namaPetugas = this.value;
state.tpsData[state.activeTpsIndex].namaPetugas = this.value;
refreshPetugasUploadState(form);
scheduleAutoSave(tps.index);
scheduleAutoSave(state.activeTpsIndex);
});
namaPetugasInput.addEventListener('blur', function() {
tps.namaPetugas = this.value;
scheduleAutoSave(tps.index);
state.tpsData[state.activeTpsIndex].namaPetugas = this.value;
scheduleAutoSave(state.activeTpsIndex);
});
btnAddTimbangan.addEventListener('click', function() {
@ -955,24 +981,46 @@ const DetailPenjemputan = (function () {
const form = elements.tpsContentContainer.querySelector("form");
if (!form) return;
const previewKedatangan = form.querySelector('.tps-preview-kedatangan');
if (previewKedatangan) {
renderPhotoPreviewByState({
files: tps.fotoKedatangan,
uploaded: tps.fotoKedatanganUploaded,
fileNames: tps.fotoKedatanganFileNames,
container: previewKedatangan,
});
const previewWrapKedatangan = form.querySelector('.tps-preview-kedatangan-wrap');
const previewImgKedatangan = form.querySelector('.tps-preview-kedatangan-img');
if (previewWrapKedatangan && previewImgKedatangan) {
let imgSrc = '';
if (Array.isArray(tps.fotoKedatangan) && tps.fotoKedatangan.length > 0) {
const localUrl = getStoredPhotoUrl(tps.fotoKedatangan[0]);
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');
if (previewPetugas) {
renderPhotoPreviewByState({
files: tps.fotoPetugas,
uploaded: tps.fotoPetugasUploaded,
fileNames: tps.fotoPetugasFileNames,
container: previewPetugas,
});
const previewWrapPetugas = form.querySelector('.tps-preview-petugas-wrap');
const previewImgPetugas = form.querySelector('.tps-preview-petugas-img');
if (previewWrapPetugas && previewImgPetugas) {
let imgSrc = '';
if (Array.isArray(tps.fotoPetugas) && tps.fotoPetugas.length > 0) {
const localUrl = getStoredPhotoUrl(tps.fotoPetugas[0]);
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) {
const fotoInput = form.querySelector('.tps-foto-kedatangan');
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);
}
scheduleAutoSave(tps.index);
@ -2095,6 +2149,12 @@ const DetailPenjemputan = (function () {
if (form) {
const fotoInput = form.querySelector('.tps-foto-petugas');
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);
}
scheduleAutoSave(tps.index);