Improve MyKad scan speed

Load mykad textual information first, before loading the mykad photo

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');