kaunter/public/js/mykad-reader-customer.js

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');
      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)
	{
        console.log('done get list card reader');
        if(respcode === -1){
            console.log({'location': 'callbackDoneGetListCardReader', 'data' : data} );
        }

		let slots = data.toString().split(',');
        WebSocketManager.open(doneOpenReaderConnection, slots[0]);
	}

    function doneOpenReaderConnection()
	{
		WebSocketManager.readAllText(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, handleReadPhoto);
                } 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, callbackAfterPopulateDaftarPelanggan) => {
        $('#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");

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


        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 = original_photo_loader;

    photo_container.classList.add('d-none');
    photo_container.classList.remove('d-flex');
};

button_read_mykad.addEventListener("click", handleMyKadReader);
button_close_modal.addEventListener("click", hideMykadPhoto);