Add new code on change card reader to Iris MyKad reader

public/css/loader.css

@@ -0,0 +1,121 @@
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+      background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
+  
+    background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 150ms infinite linear;
+    -moz-animation: spinner 150ms infinite linear;
+    -ms-animation: spinner 150ms infinite linear;
+    -o-animation: spinner 150ms infinite linear;
+    animation: spinner 150ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }

public/js/iris-mykad-websocket-client-api.js

@@ -0,0 +1,258 @@
+WebSocketManager = {	
+	url:"",	
+	init: function(url) {
+		WebSocketManager.url = url;
+	},	
+	open: function(callback, slot) {	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"OPEN","Slot":"'+ slot +'"}'); 
+		};    
+		wsocket.onmessage = function (evt) {
+					var obj = JSON.parse(evt.data);
+					wsocket.close();
+					callback(obj);
+		};			
+		
+	},	
+	listReader: function(callback) {	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"LIST_READER"}'); 
+		};    
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);					
+			wsocket.close();
+			callback(data, obj.RespCode);
+		};			
+		
+	},	
+	close: function(callback) {
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"CLOSE"}');
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);
+			wsocket.close();
+			callback(obj);
+		};
+	},	
+	verifyFPTemplate: function(callback, ThumbCode, Bas64FPLeft, Bas64FPRight) {	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"VERIFY_FP_TEMPLATE","ThumbCode":"'+ ThumbCode +'","Bas64FPLeft":"'+ Bas64FPLeft +'","Bas64FPRight":"'+ Bas64FPRight +'"}'); 
+		};    
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);
+			wsocket.close();
+			callback(obj.RespCode, obj.RespMessage);	
+		};			
+		
+	},
+	readMyKad: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"READ_MYKAD"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},
+	readAllText: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"READ_ALL_TEXT"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);		
+		};		
+	},
+	readPhoto: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"READ_PHOTO"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},
+	readBio: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"READ_BIO"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},
+	readMyKid: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"READ_MYKID"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioEnrol: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_ENROL"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			//var data = JSON.parse(obj.RespMessage);	
+			wsocket.close();
+			callback(obj);
+		};		
+	},	
+	getThumbImage: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"GET_MYKAD_THUMB_IMAGE"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	getThumbBin1: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"GET_THUMB_BIN1"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	getThumbBin2: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"GET_THUMB_BIN2"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioEnrolBin1: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_ENROL_BIN1"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			//var data = JSON.parse(obj.RespMessage);
+			wsocket.close();
+			callback(obj);
+		};		
+	},	
+	FPBioEnrolBin2: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_ENROL_BIN2"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			//var data = JSON.parse(obj.RespMessage);
+			wsocket.close();
+			callback(obj);
+		};		
+	},	
+	FPBioVerify: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_VERIFY"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioVerifyBin: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_VERIFY_BIN"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioVerifyLeft: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_VERIFY_LEFT"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioVerifyBinLeft: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_VERIFY_BIN_LEFT"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioVerifyRight: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_VERIFY_RIGHT"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	},	
+	FPBioVerifyBinRight: function (callback) {   	
+		wsocket = new WebSocket(WebSocketManager.url);
+		wsocket.onopen = function () {
+			wsocket.send('{"Cmd":"FP_BIO_VERIFY_BIN_RIGHT"}'); 
+		};		
+		wsocket.onmessage = function (evt) {
+			var obj = JSON.parse(evt.data);		
+			var data = JSON.parse(obj.RespMessage);		
+			wsocket.close();
+			callback(data, obj.RespCode, obj.RespSW12AndApiName);
+		};		
+	}	
+}

public/js/mykad-reader-customer.js

@@ -0,0 +1,191 @@
+
+
+let button_read_mykad = document.getElementById("button_read_mykad");
+let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.btn-danger");
+
+    let showLoader = () => {
+      let pageLoader = document.getElementById('page_loader');
+      pageLoader.removeAttribute('class');
+      pageLoader.classList.add('loading');
+    };
+
+    let hideLoader = () => {
+      let pageLoader = document.getElementById('page_loader');
+      pageLoader.removeAttribute('class');
+    };
+
+    function handleMyKadReader()
+    {
+        showLoader();
+		WebSocketManager.init("wss://localhost:5963/mykadwebsocket");
+        WebSocketManager.listReader(callbackDoneGetListCardReader);
+    }
+
+    function callbackDoneGetListCardReader(data, respcode)
+	{
+        if(respcode === -1){
+            console.log({'location': 'callbackDoneGetListCardReader', 'data' : data} );
+        }
+
+		let slots = data.toString().split(',');
+        WebSocketManager.open(doneOpenReaderConnection, slots[0]);
+	}
+
+    function doneOpenReaderConnection(data)
+	{
+		WebSocketManager.readMyKad(callBackAfterReadMykad);
+    }
+
+    function callBackAfterReadMykad(data, respcode, sw12AndApiName)
+	{
+        if(respcode !== 0){
+            hideLoader();
+            Swal.fire({icon: 'error', title: sw12AndApiName,});
+            return;
+        }
+
+        checkIfMyKadExists(data.IDNum)
+            .then(response => response[0])
+            .then(response => {
+                if (response === 'no-data') {
+                    populateDaftarPelangganModal(data);
+                } else {
+                    let input_search_noic = document.getElementById("noic");
+                    let form_search_noic = document.querySelector("form[name='frmsearch']");
+
+                    let getMyKadNumberWithoutHypens = myKadNumber => myKadNumber.replace(/-/g, '');
+                    input_search_noic.value = getMyKadNumberWithoutHypens(data.IDNum);
+                    form_search_noic.submit();
+                }
+            })
+            .catch(error => {
+                Swal.fire({
+                    icon: 'error',
+                    title: error,
+                });
+            });
+
+        hideLoader();
+	}
+
+    function checkIfMyKadExists(myKadNumber){
+        let myKadNumberWithoutHyphens = myKadNumber.replace(/-/g, '');
+
+        const url = wakil_caricustomer_endpoint + '/?icno=' + myKadNumberWithoutHyphens;
+        return fetch(url).then((response) => response.json());
+    }
+
+    let populateDaftarPelangganModal = (data) => {
+        $('#daftar_pelanggan').modal('show');
+        let modal_form = document.querySelector(".modal-body .row.form-group");
+
+        const religions = [
+            ['01', 'Islam'],
+            ['02', 'Hindu'],
+            ['03', 'Buddha'],
+            ['04', 'Kristian'],
+            ['05', 'Lain-lain'],
+        ];
+
+        const races = [
+            ['M', 'Melayu'],
+            ['C', 'Cina'],
+            ['I', 'India'],
+            ['L', 'Lain-lain'],
+        ];
+
+        let getCodeFromValue = (needle, haystack) => {
+            let title_cased_text = needle.split(' ')
+                .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase())
+                .join(' ');
+
+            return haystack.filter(x => x[1] == title_cased_text)[0][0];
+        };
+
+        let getMyKadNumberWithoutHypens = (IDNum) => {
+            return IDNum.replace(/-/g, '');
+        }
+
+        let getFormattedDateOfBirth = (date_of_birth) => {
+
+            let date_of_birth_hyphenated = date_of_birth.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
+
+            const [year, month, day] = date_of_birth_hyphenated.split('-');
+            return day + '/' + month + '/' + year;
+        };
+
+        let getAgeFromDateOfBirth = (date_of_birth) => {
+
+            let date_of_birth_hyphenated = date_of_birth.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3");
+
+            const [birth_year, birth_month, birth_day] = date_of_birth_hyphenated.split('-');
+
+            let formatBirthMonth = (birth_month) => {
+                let newbirthMonth = birth_month < 9 ? birth_month[1] : birth_month;
+                return newbirthMonth;
+            };
+
+            const count_leap_year = countLeapYears(birth_year, formatBirthMonth(birth_month), birth_day) - 1;
+
+            const start = new Date(date_of_birth_hyphenated),
+                end = new Date(),
+                diff = new Date(end - start),
+                days = ((diff / 1000 / 60 / 60 / 24) - count_leap_year) / 365;
+
+            return parseInt(days);
+        };
+
+        let getBumiputeraStatus = (race) => {
+
+            const non_bumiputera_ethnicity = ['INDIA', 'CINA'];
+
+            let isBumiputera = !non_bumiputera_ethnicity.includes(race);
+
+            return isBumiputera;
+        };
+
+        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='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;
+        modal_form.querySelector("input[name='jantina']").value = data.Gender == 'LELAKI' ? 'Lelaki' : 'Perempuan';
+        modal_form.querySelector("input[name='warganegara']").checked = data.Citizenship === 'WARGANEGARA' ? true : false;
+        modal_form.querySelector("input[name='bumiputera']").checked = getBumiputeraStatus(data.Race);
+        modal_form.querySelector("select[name='agama']").value = getCodeFromValue(data.Religion, religions);
+        modal_form.querySelector("textarea[name='alamat']").value = [data.Address1, data.Address2, data.Address3].join(", ");
+
+        let getPostCode = (postCodeCity) => postCodeCity.replace(/\D/g, ''); 
+        modal_form.querySelector("input[name='poskod']").value = getPostCode(data.PostcodeCity);
+
+        let getCityName = (postCodeCity) => postCodeCity.replace(/\d/g, ''); 
+        modal_form.querySelector("input[name='daerah']").value = getCityName(data.PostcodeCity);
+
+        modal_form.querySelector("input[name='negeri']").value = data.State;
+        modal_form.querySelector("input[name='age']").value = getAgeFromDateOfBirth(data.BirthDate);
+        modal_form.querySelector("select[name='bangsa']").value = getCodeFromValue(data.Race, races);
+
+        calculatePassportAge();
+
+        photo_container.classList.remove('d-none');
+        photo_container.classList.add('d-flex');
+
+        $('#daftar_pelanggan').modal('show');
+}
+
+
+let hideMykadPhoto = () => {
+    let photo = document.getElementById("photo-mykad");
+    let photo_container = document.getElementById("photo-mykad-container");
+
+    photo.src = '';
+
+    photo_container.classList.add('d-none');
+    photo_container.classList.remove('d-flex');
+};
+
+button_read_mykad.addEventListener("click", handleMyKadReader);
+button_close_modal.addEventListener("click", hideMykadPhoto);

public/js/mykad-reader.js

@@ -1,153 +0,0 @@
-
-let button_read_mykad = document.getElementById("button_read_mykad");
-let button_close_modal = document.querySelector("#daftar_pelanggan button.btn.btn-danger");
-
-let removeCRLFfromString = (response_text) => {
-    return response_text.replace(/[\n\r]+/g, '').replace(/\s{2,10}/g, ' ');
-};
-
-const myKad_reader_error = new Error('Sila sambungkan pembaca MyKad dengan betul');
-
-let getMyKadDetail = () => {
-    return fetch(mykad_reader_endpoint)
-        .then(response => response.text())
-        .then(response => removeCRLFfromString(response))
-        .then(response => JSON.parse(response))
-        .catch(error => {
-            throw myKad_reader_error;
-        });
-};
-
-let checkIfMyKadExist = (myKadNumber) => {
-    const url = wakil_caricustomer_endpoint + '/?icno=' + myKadNumber;
-
-    return fetch(url).then((response) => response.json());
-};
-
-
-let handleMyKadReader = () => {
-
-    let myKadDetail;
-
-    getMyKadDetail()
-        .then(response => myKadDetail = response[0])
-        .then(() => {
-            if (myKadDetail.ReadStatus === 'ERROR') {
-                throw myKad_reader_error;
-            }
-        })
-        .then(() => checkIfMyKadExist(myKadDetail.IdNo))
-        .then(response => response[0])
-        .then(response => {
-            if (response === 'no-data') {
-                populateDaftarPelangganModal(myKadDetail);
-            } else {
-                let input_search_noic = document.getElementById("noic");
-                let form_search_noic = document.querySelector("form[name='frmsearch']");
-                input_search_noic.value = myKadDetail.IdNo;
-                form_search_noic.submit();
-            }
-        })
-        .catch(error => {
-            Swal.fire({
-                icon: 'error',
-                title: error,
-            });
-        });
-
-
-};
-
-let populateDaftarPelangganModal = (data) => {
-    let modal_form = document.querySelector(".modal-body .row.form-group");
-
-    const religions = [
-        ['01', 'Islam'],
-        ['02', 'Hindu'],
-        ['03', 'Buddha'],
-        ['04', 'Kristian'],
-        ['05', 'Lain-lain'],
-    ];
-
-    const ethnicities = [
-        ['M', 'Melayu'],
-        ['C', 'Cina'],
-        ['I', 'India'],
-        ['L', 'Lain-lain'],
-    ];
-
-    let getCodeFromValue = (needle, haystack) => {
-        let title_cased_text = needle.split(' ')
-            .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase())
-            .join(' ');
-
-        return haystack.filter(x => x[1] == title_cased_text)[0][0];
-    };
-
-    let getFormattedDateOfBirth = (date_of_birth) => {
-        const [year, month, day] = date_of_birth.split('-');
-        return day + '/' + month + '/' + year;
-    };
-
-    let getAgeFromDateOfBirth = (date_of_birth) => {
-
-        const [birth_year, birth_month, birth_day] = date_of_birth.split('-');
-        const count_leap_year = countLeapYears(birth_year, birth_month, birth_day) - 1;
-
-        const start = new Date(date_of_birth),
-            end = new Date(),
-            diff = new Date(end - start),
-            days = ((diff / 1000 / 60 / 60 / 24) - count_leap_year) / 365;
-
-        return parseInt(days);
-    };
-
-    let getBumiputeraStatus = (ethnicity) => {
-
-        const non_bumiputera_ethnicity = ['INDIA', 'CINA'];
-
-        let isBumiputera = !non_bumiputera_ethnicity.includes(ethnicity);
-
-        return isBumiputera;
-    };
-
-    let photo_container = document.getElementById("photo-mykad-container");
-    let photo = document.getElementById("photo-mykad");
-    photo.src = 'data:image/png;base64, ' + data.Photo;
-
-    modal_form.querySelector("input[name='name']").value = data.Name;
-    modal_form.querySelector("input[name='noic']").value = data.IdNo;
-    modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.DateOfBirth);
-    modal_form.querySelector("input[name='negeri_lahir']").value = data.State;
-    modal_form.querySelector("input[name='jantina']").value = data.Gender == 'L' ? 'Lelaki' : 'Perempuan';
-    modal_form.querySelector("input[name='warganegara']").checked = data.Citizenship === 'WARGANEGARA' ? true : false;
-    modal_form.querySelector("input[name='bumiputera']").checked = getBumiputeraStatus(data.Ethnicity);
-    modal_form.querySelector("select[name='agama']").value = getCodeFromValue(data.Religion, religions);
-    modal_form.querySelector("textarea[name='alamat']").value = [data.Address1, data.Address2, data.Address3].join(", ");
-    modal_form.querySelector("input[name='poskod']").value = data.Postcode;
-    modal_form.querySelector("input[name='daerah']").value = data.Town;
-    modal_form.querySelector("input[name='negeri']").value = data.State;
-    modal_form.querySelector("input[name='age']").value = getAgeFromDateOfBirth(data.DateOfBirth);
-    modal_form.querySelector("select[name='bangsa']").value = getCodeFromValue(data.Ethnicity, ethnicities);
-
-    calculatePassportAge();
-
-    photo_container.classList.remove('d-none');
-    photo_container.classList.add('d-flex');
-
-    $('#daftar_pelanggan').modal('show');
-};
-
-
-let hideMykadPhoto = () => {
-    let photo = document.getElementById("photo-mykad");
-    let photo_container = document.getElementById("photo-mykad-container");
-
-    photo.src = '';
-
-    photo_container.classList.add('d-none');
-    photo_container.classList.remove('d-flex');
-};
-
-button_read_mykad.addEventListener("click", handleMyKadReader);
-button_close_modal.addEventListener("click", hideMykadPhoto);

resources/views/customers/index.blade.php

@@ -898,11 +898,15 @@
         }
     }
 </script>
+
+@push('additional_scripts')
 <script>
     // mycard-read endpoint initialization
     let mykad_reader_endpoint = "{{ config('mykad-reader.endpoint') }}";
     let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}"; 
-
 </script>
-<script src="{{ asset('js/mykad-reader.js') }}"></script>
+<script src="{{ asset('js/iris-mykad-websocket-client-api.js') }}"></script>
+<script src="{{ asset('js/mykad-reader-customer.js') }}"></script>
+@endpush
+
 @endsection

resources/views/layouts/app.blade.php

@@ -21,6 +21,7 @@
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     <link href="{{ asset('css/main.css') }}" rel="stylesheet">
+    <link href="{{ asset('css/loader.css') }}" rel="stylesheet">
     <link href="{{ asset('vendor/adminlte/dist/css/adminlte.css') }}" rel="stylesheet">
     <link href="{{ asset('vendor/fontawesome-free/css/all.css') }}" rel="stylesheet">
     <link href="{{ asset('vendor/DataTables/datatables.min.css') }}" rel="stylesheet">
@@ -91,6 +92,7 @@
         }
     @endphp
     <div id="app">
+        <div id="page_loader" class="not-loading"></div>
         <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm" style="height:100px;">
             <div class="container">
                 <a class="navbar-brand" href="#" style="cursor:not-allowed;">
@@ -293,13 +295,16 @@
                 </div>
 
                 @php
+                $gadaiNumber = $gadai == null ? '0' : count($gadaiNumber);
+                $listSerahNumber = $listserah == null ? '0' : count($listserah);
+
                 if($auth_user['role_harian'] == 'teller')
                 {
                     echo '<div class="col-3">
                                 <div class="col-12 pl-5">
                                     <div class="row">
-                                        <h5 class="pr-3">G : <span class="text-success">' . $gadai ?? count($gadai) . '</span></h5>
+                                        <h5 class="pr-3">G : <span class="text-success">' .$gadaiNumber. '</span></h5>
-                                        <h5>T : <span class="text-danger">' . $listserah ?? count($listserah) . '</span></h5>
+                                        <h5>T : <span class="text-danger">' .$listSerahNumber. '</span></h5>
                                     </div>
                                 </div>
                         </div>';
@@ -340,4 +345,6 @@
 
     @yield('footer')
 </body>
+{{-- JS Stack--}}
+@stack('additional_scripts')
 </html>