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

update: fixing multiple

main
muamars 2026-03-26 10:29:59 +07:00
parent 61094188f6
commit db0708f9a4
2 changed files with 69 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -416,7 +416,7 @@ document.addEventListener('DOMContentLoaded', async function() {
</div>
<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/*" multiple />
<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="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
@ -464,7 +464,7 @@ document.addEventListener('DOMContentLoaded', async function() {
</div>
<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/*" multiple />
<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="petugas-upload-state">${getPetugasUploadStateMarkup(tps)}</div>

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

@ -748,7 +748,7 @@ const DetailPenjemputan = (function () {
const submitState = getSubmitState(tps);
const actionMarkup = tps.submitted
? `<div class="flex items-center justify-center gap-2 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="font-medium text-green-700">
@ -801,7 +801,7 @@ const DetailPenjemputan = (function () {
</div>
<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/*" multiple />
<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="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
@ -857,7 +857,7 @@ const DetailPenjemputan = (function () {
</div>
<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/*" multiple />
<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="petugas-upload-state">${getPetugasUploadStateMarkup(tps)}</div>
@ -881,17 +881,23 @@ const DetailPenjemputan = (function () {
const btnAddTimbangan = form.querySelector(".tps-btn-add-timbangan");
fotoKedatanganInput.addEventListener('change', function() {
tps.fotoKedatangan = Array.from(this.files);
tps.fotoKedatanganUploaded = false;
replaceSelectedPhotos(
tps,
'fotoKedatangan',
this.files,
form.querySelector('.tps-preview-kedatangan')
);
updateWaktuKedatangan(tps.index);
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'));
replaceSelectedPhotos(
tps,
'fotoPetugas',
this.files,
form.querySelector('.tps-preview-petugas')
);
refreshPetugasUploadState(form);
});
@ -951,21 +957,56 @@ const DetailPenjemputan = (function () {
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);
}
renderPhotoPreviewByState({
files: tps.fotoKedatangan,
uploaded: tps.fotoKedatanganUploaded,
fileNames: tps.fotoKedatanganFileNames,
container: 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);
renderPhotoPreviewByState({
files: tps.fotoPetugas,
uploaded: tps.fotoPetugasUploaded,
fileNames: tps.fotoPetugasFileNames,
container: previewPetugas,
});
}
}
function renderPhotoPreviewByState({ files, uploaded, fileNames, container }) {
if (!container) return;
container.innerHTML = '';
if (Array.isArray(files) && files.length > 0) {
renderStoredPhotos(files, container);
return;
}
if (uploaded && Array.isArray(fileNames) && fileNames.length > 0) {
renderServerImagePreview(fileNames, container);
}
}
function replaceSelectedPhotos(tps, fieldName, files, previewContainer) {
const fileNamesField = `${fieldName}FileNames`;
const uploadedField = `${fieldName}Uploaded`;
tps[fieldName] = Array.from(files || []);
tps[fileNamesField] = [];
tps[uploadedField] = false;
renderPhotoPreviewByState({
files: tps[fieldName],
uploaded: tps[uploadedField],
fileNames: tps[fileNamesField],
container: previewContainer,
});
saveState();
}
function renderStoredPhotos(files, container) {