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

update: fixing preview non tps

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

122
wwwroot/driver/js/detail-penjemputan-non-tps.js
View File

@ -417,7 +417,9 @@ document.addEventListener('DOMContentLoaded', async 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>
@ -465,7 +467,9 @@ document.addEventListener('DOMContentLoaded', async 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>
@ -490,25 +494,49 @@ document.addEventListener('DOMContentLoaded', async function() {
const form = tpsContentContainer.querySelector("form");
if (!form) return;
const previewKedatangan = form.querySelector('.tps-preview-kedatangan');
if (previewKedatangan) {
if (tps.fotoKedatangan.length > 0) {
renderStoredPhotos(tps.fotoKedatangan, previewKedatangan);
} else if (tps.fotoKedatanganUploaded && tps.fotoKedatanganFileNames.length > 0) {
renderServerImagePreview(tps.fotoKedatanganFileNames, previewKedatangan);
}
}
const previewPetugas = form.querySelector('.tps-preview-petugas');
if (previewPetugas) {
if (tps.fotoPetugas.length > 0) {
renderStoredPhotos(tps.fotoPetugas, previewPetugas);
} else if (tps.fotoPetugasUploaded && tps.fotoPetugasFileNames.length > 0) {
renderServerImagePreview(tps.fotoPetugasFileNames, previewPetugas);
}
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 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');
}
}
}
function renderStoredPhotos(files, container) {
container.innerHTML = "";
container.className = "space-y-2";
@ -552,28 +580,56 @@ document.addEventListener('DOMContentLoaded', async function() {
const btnAddTimbangan = form.querySelector(".tps-btn-add-timbangan");
fotoKedatanganInput.addEventListener('change', function() {
tps.fotoKedatangan = Array.from(this.files);
tps.fotoKedatanganUploaded = false;
if (!this.files || !this.files[0]) return;
const currentTps = tpsData[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();
updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
refreshKedatanganUploadState(form);
});
fotoPetugasInput.addEventListener('change', function() {
tps.fotoPetugas = Array.from(this.files);
tps.fotoPetugasUploaded = false;
updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
if (!this.files || !this.files[0]) return;
const currentTps = tpsData[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;
tpsData[activeTpsIndex].namaPetugas = this.value;
refreshPetugasUploadState(form);
scheduleAutoSave();
scheduleAutoSave();
});
namaPetugasInput.addEventListener('blur', function() {
tps.namaPetugas = this.value;
tpsData[activeTpsIndex].namaPetugas = this.value;
scheduleAutoSave();
});
@ -1571,6 +1627,12 @@ document.addEventListener('DOMContentLoaded', async 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();
@ -1617,6 +1679,12 @@ document.addEventListener('DOMContentLoaded', async 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();