mainNurseView.js

//add data of admin
$(document).on("click","#addButton",function (){
    const overlay = document.getElementById("overlay_add");
    const formContainerAdd = document.getElementById("formContainer_add");

    // show
    overlay.classList.add("active");
    formContainerAdd.classList.add("active");
})

$(document).on("click","#addNurse",function (){
    var data={
        "hospitalId":localStorage.getItem('hospitalId'),
        "name":document.getElementById("addName").value,
        "age":document.getElementById("addAge").value,
        "email":document.getElementById("addEmail").value,
        "phone":document.getElementById("addPhone").value,
        "address":document.getElementById("addAddress").value,
        "type":"hospital",
        "status":1,
        "role":"HOSPITAL"
    }
    console.log(data)
    $.ajax({
        contentType: "application/json",
        url: "/nurse/insert",
        type: "POST",
        data: JSON.stringify(data),
        dataType: "Json",
        success: function (data) {

            if(data.code!=0){
                console.log(data.data)
                location.reload()
            }else {
                alert(data.msg)
            }
        },
    })
})




//create table to add data or update data
$(document).on("click","#edit",function (){

    const row = $(this).closest('tr');
    console.log(row.data('id'))
    let status=0;
    if(row.data('status')=="ACTIVE"){
        status=1
    }
    var data={
        "id":row.data('id'),
        "type":"hospital",
        "hospitalId":row.data('hospitalId'),
        "name":row.data('name'),
        "age":row.data('age'),
        "phone":row.data('phone'),
        "email":row.data('email'),
        "address":row.data('address'),
        "status":status,
    }

    //select By id (Data echo)
    $.ajax({
        contentType: "application/json",
        url: "/nurse/select",
        type: "POST",
        data: JSON.stringify(data),
        dataType: "Json",
        success: function (data) {

            if(data.code!=0){

                console.log(data.data)
                console.log(data.data[0].email)
                //Load form

                //padding data
                document.getElementById("id").value=data.data[0].id
                document.getElementById("hospitalId").value=data.data[0].hospitalId
                document.getElementById("name").value=data.data[0].name
                document.getElementById("age").value=data.data[0].age
                document.getElementById("phone").value=data.data[0].phone
                document.getElementById("email").value=data.data[0].email
                document.getElementById("address").value=data.data[0].address
                document.getElementById("status").value=data.data[0].status

                //Change css
                const overlay = document.getElementById("overlay");
                const formContainer = document.getElementById("formContainer");
                formContainer.classList.toggle("active"); // Toggle display status
                overlay.classList.toggle("active");
            }else {
                alert(data.msg)
            }
        },
    })
})

//submit Updated form data(Implement edit)
function submitForm(){

    var data={
        "type":"hospital",
        "id":document.getElementById("id").value,
        "hospitalId":document.getElementById("hospitalId").value,
        "name":document.getElementById("name").value,
        "age":document.getElementById("age").value,
        "phone":document.getElementById("phone").value,
        "email":document.getElementById("email").value,
        "address":document.getElementById("address").value,
        "status":document.getElementById("status").value,
    }
    console.log(data)
    $.ajax({
        contentType: "application/json",
        url: "/nurse/update",
        type: "PUT",
        data: JSON.stringify(data),
        dataType: "Json",
        success: function (data) {

            if(data.code!=0){

                console.log(data.data)
                location.reload()

            }else {
                alert(data.msg)
            }
        },
    })

}




$(document).on("click","#freeze",function (){
    const row = $(this).closest('tr');
    console.log(row.data('id'))
    var status;
    if(row.data('status')==="ACTIVE"){
        status=0;
    }else {
        status=1
    }
    var data={
        "id":row.data('id'),
        "type":"hospital",
        "hospitalId":row.data('hospitalId'),
        "name":row.data('name'),
        "age":row.data('age'),
        "phone":row.data('phone'),
        "email":row.data('email'),
        "address":row.data('address'),
        "status":status,
    }
    $.ajax({
        contentType: "application/json",
        url: "/nurse/update",
        type: "PUT",
        data: JSON.stringify(data),
        dataType: "Json",
        success: function (data) {
            console.log(data)
            if(data.code==1){
                updateTable(data.data)
                location.reload()
            }else {
                alert(data.msg)
            }
        },

    });
})





$(document).on("click","#delete",function (){
    const clickedLabel = this;
    // remove active class
    const labels = document.querySelectorAll('.tdOption .btn');
    labels.forEach(label => label.classList.remove('active'));

    // add active class
    clickedLabel.classList.add('active');

    const row = $(this).closest('tr');
    // get data in row
    row.data('id');          // get ID
    let ids = new Array();
    ids.push(row.data('id'))
    console.log(ids)
    $.ajax({
        contentType: "application/json",
        url: "/nurse/deleteNurseById",
        type: "DELETE",
        data: JSON.stringify(ids),
        dataType: "Json",
        success: function (data) {
            console.log(data)
            if(data.code==1){
                console.log(data)
                window.location.reload()
            }else {
                alert(data.msg)
            }
        },

    });

})

//reflash page
$(document).on("dblclick","#searchButton",function (){
    location.reload()
})


//use jQuery's load() to load content dynamically,Events cannot be bound in dom mode
$(document).on("click", "#searchButton", function () {
    let status=document.getElementById("searchStatus").value;

    if(status==="active"){
        status=1;
    }
    else if(status==="inactive"){
        status=0;
    }else {
        status=1;
    }

    var data={
        'name':document.getElementById("searchName").value,
        'phone':document.getElementById("searchPhone").value,
        'address':document.getElementById("searchAddress").value,
        'type':"hospital",
        'status':status
    }
    $.ajax({
        contentType: "application/json",
        url: "/nurse/select",
        type: "POST",
        data: JSON.stringify(data),
        dataType: "Json",
        success: function (data) {

            if(data.code!=0){
                updateTable(data.data);
                // location.reload()
            }else {
                alert(data.msg)
            }
        },
    });
});

function updateTable(data) {
    let tbody = $("table tbody"); // choose table's tbody
    tbody.empty(); // clean old data
    console.log(data)
    // create new table
    data.forEach(row => {
        const tr = `
            <tr
            data-id="${row.id}"
            data-hospitalId="${row.hospitalId}"
            data-name="${row.name}"
            data-age="${row.age}"
            data-phone="${row.phone}"
            data-email="${row.email}"
            data-address="${row.address}"
            data-status="${row.status_str}">
                <td>${row.id}</td>
                <td>${row.hospitalId}</td>
                <td>${row.name}</td>
                <td>${row.age}</td>
                <td>${row.phone}</td>
                <td>${row.email}</td>
                <td>${row.address}</td>
                <td>${row.status_str}</td>
                <td class="tdOption">
                <label id="edit" class="btn">Edit</label>
                <label id="delete" class="btn">Delete</label>
                <label id="freeze" class="btn">Freeze</label>
            </td>
            </tr>
        `;
        tbody.append(tr);
    });
}