Improve MyKad scan speed

Load mykad textual information first, before loading the mykad photo

app/Http/Controllers/CustomersController.php

@@ -47,12 +47,8 @@ class CustomersController extends Controller
         $auth_user = Auth::user();
         $api_url = config('api.url');
         $cawangan_info = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url') . '/api/cawangan/'. $auth_user['cawangan'])->json();
+
         $customer_info = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url') . '/api/customers/'. Session::get('noic'))->json();
-        // if($customers_info){
-        //     $customer_info = $customers_info[0];
-        // }else{
-        //     $customer_info = $customers_info;
-        // }
 
         $komoditi = Komoditi::first();
         $min_komoditi = $komoditi['min_komoditi'];
@@ -205,6 +201,8 @@ class CustomersController extends Controller
         ]);
 
         Session::put('customer_info', $customer_info);
+        Session::put('noic', $request->noic);
+
         event(new PelangganNotify('lulus',$auth_user['cawangan']));
         return redirect()->route('customer_info')->with( ['customer_info' => $customer_info] );
     }

public/js/mykad-reader-customer.js

@@ -2,6 +2,7 @@
 
 let button_read_mykad = document.getElementById("button_read_mykad");
 let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.btn-danger");
+let original_photo_loader = document.querySelector("#photo-mykad").src;
 
     let showLoader = () => {
       let pageLoader = document.getElementById('page_loader');
@@ -23,6 +24,7 @@ let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.bt
 
     function callbackDoneGetListCardReader(data, respcode)
 	{
+        console.log('done get list card reader');
         if(respcode === -1){
             console.log({'location': 'callbackDoneGetListCardReader', 'data' : data} );
         }
@@ -31,9 +33,9 @@ let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.bt
         WebSocketManager.open(doneOpenReaderConnection, slots[0]);
 	}
 
-    function doneOpenReaderConnection(data)
+    function doneOpenReaderConnection()
 	{
-		WebSocketManager.readMyKad(callBackAfterReadMykad);
+		WebSocketManager.readAllText(callBackAfterReadMykad);
     }
 
     function callBackAfterReadMykad(data, respcode, sw12AndApiName)
@@ -48,7 +50,7 @@ let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.bt
             .then(response => response[0])
             .then(response => {
                 if (response === 'no-data') {
-                    populateDaftarPelangganModal(data);
+                    populateDaftarPelangganModal(data, handleReadPhoto);
                 } else {
                     let input_search_noic = document.getElementById("noic");
                     let form_search_noic = document.querySelector("form[name='frmsearch']");
@@ -75,7 +77,7 @@ let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.bt
         return fetch(url).then((response) => response.json());
     }
 
-    let populateDaftarPelangganModal = (data) => {
+    let populateDaftarPelangganModal = (data, callbackAfterPopulateDaftarPelanggan) => {
         $('#daftar_pelanggan').modal('show');
         let modal_form = document.querySelector(".modal-body .row.form-group");
 
@@ -145,10 +147,8 @@ let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.bt
         };
 
         let photo_container = document.getElementById("photo-mykad-container");
-        let photo = document.getElementById("photo-mykad");
-        photo.src = 'data:image/jpeg;base64, ' + data.Base64Photo;
 
-        modal_form.querySelector("input[name='name']").value = data.Name;
+        modal_form.querySelector("input[name='name']").value = data.OrgName;
         modal_form.querySelector("input[name='noic']").value = getMyKadNumberWithoutHypens(data.IDNum);
         modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.BirthDate);
         modal_form.querySelector("input[name='negeri_lahir']").value = data.BirthPlace;
@@ -174,14 +174,57 @@ let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.bt
         photo_container.classList.add('d-flex');
 
         $('#daftar_pelanggan').modal('show');
+
+
+        callbackAfterPopulateDaftarPelanggan();
 }
 
 
+function handleReadPhoto()
+{
+	WebSocketManager.init("wss://localhost:5963/mykadwebsocket");
+    WebSocketManager.listReader(callbackDoneGetListCardReader2);
+}
+
+function callbackDoneGetListCardReader2(data, respcode)
+{
+    if(respcode === -1){
+        console.log({'location': 'callbackDoneGetListCardReader', 'data' : data} );
+    }
+
+    let slots = data.toString().split(',');
+    WebSocketManager.open(doneOpenReaderConnection2, slots[0]);
+}
+
+function doneOpenReaderConnection2()
+{
+    WebSocketManager.readPhoto(callbackAfterReadPhoto2);
+}
+
+function callbackAfterReadPhoto2(data, RespCode, RespSW12AndApiName)
+{
+    let photo = document.getElementById("photo-mykad");
+
+    let isDataEmpty = data 
+    && Object.keys(data).length === 0
+    && Object.getPrototypeOf(data) === Object.prototype;
+
+    if(isDataEmpty){
+        photo.src = original_photo_loader;
+        return;
+    }
+
+    photo.src = 'data:image/jpeg;base64, ' + data.Base64Photo;
+}
+
 let hideMykadPhoto = () => {
+
+    WebSocketManager.close(() => console.log('Websocket closed'));
+
     let photo = document.getElementById("photo-mykad");
     let photo_container = document.getElementById("photo-mykad-container");
 
-    photo.src = '';
+    photo.src = original_photo_loader;
 
     photo_container.classList.add('d-none');
     photo_container.classList.remove('d-flex');

resources/views/customers/index.blade.php

@@ -63,7 +63,7 @@
                                 @csrf
                                 <div class="row form-group">
                                     <div class="col-md-12 d-flex justify-content-center pb-3 d-none" id="photo-mykad-container">
-                                        <img src="" alt="" id="photo-mykad">
+                                        <img src="{{ asset('img/spinner-loader.gif') }}" alt="" id="photo-mykad" width="150" height="200" object-fit="cover">
                                     </div>
                                     <div class="col-md-6">
                                         <div class="row form-group">
@@ -452,6 +452,17 @@
     });
 
     function verifycustomer(){
+
+
+        // Construct URLSearchParams object instance from current URL querystring.
+        var queryParams = new URLSearchParams(window.location.search);
+        
+        let updated_icno = document.querySelector('#daftar_pelanggan input[name="noic"]').value
+
+        queryParams.set("noic", updated_icno);
+
+        history.replaceState(null, null, "?"+queryParams.toString());
+
         $("#terima_ic").prop('disabled', true);
         var customername = $('#name').val();
         var customeralamat = $('#alamat').val();
@@ -846,6 +857,7 @@
     var regex = /^[a-zA-Z0-9]+$/g;
 
     function verifynokp(){
+
         var id_type = $('#customerIDType').val();
         var nokp = $('#noic').val();
         if(id_type=='nokp'){
@@ -896,6 +908,7 @@
         //        return false;
         //    }
         }
+
     }
 </script>