From 3564656bac5d982d7c1c754ced6ca88d4c18e3c4 Mon Sep 17 00:00:00 2001
From: muamars <official.muammar@gmail.com>
Date: Sat, 28 Mar 2026 15:26:22 +0700
Subject: [PATCH] fixing : onchange preview image

---
 wwwroot/driver/js/detail-penjemputan-tps.js | 130 ++++++++++++++------
 1 file changed, 95 insertions(+), 35 deletions(-)

diff --git a/wwwroot/driver/js/detail-penjemputan-tps.js b/wwwroot/driver/js/detail-penjemputan-tps.js
index ce2c4b7..7cbfa0b 100644
--- a/wwwroot/driver/js/detail-penjemputan-tps.js
+++ b/wwwroot/driver/js/detail-penjemputan-tps.js
@@ -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);