From 36ff3714ede9e395d63b55d6d2033ef574b14938 Mon Sep 17 00:00:00 2001
From: muamars <official.muammar@gmail.com>
Date: Sat, 28 Mar 2026 17:35:28 +0700
Subject: [PATCH] update: fixing preview non tps

---
 .../driver/js/detail-penjemputan-non-tps.js   | 122 ++++++++++++++----
 1 file changed, 95 insertions(+), 27 deletions(-)

diff --git a/wwwroot/driver/js/detail-penjemputan-non-tps.js b/wwwroot/driver/js/detail-penjemputan-non-tps.js
index c50ef6b..0ff151c 100644
--- a/wwwroot/driver/js/detail-penjemputan-non-tps.js
+++ b/wwwroot/driver/js/detail-penjemputan-non-tps.js
@@ -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();