forward_station_server_fss/api/v1/Users/userDetails.php

<button class="btn btn-primary" onclick="document.getElementById('addUserForm').style.display = 'block';document.getElementById('editUserForm').style.display = 'none';document.getElementById('deleteUserForm').style.display = 'none';"> New User </button>
<table id="supplier" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th>Name</th>
      <th>E-mail</th>
      <th>Role</th>
      <th>Pump List</th>
    </tr>
  </thead>

    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th>Name</th>
            <th>E-mail</th>
            <th>Role</th>
            <th>Pump List</th>
        </tr>
    </tfoot>
</table>
<?php include "editUser.php" ?>
<?php include "deleteUser.php" ?>
<script type="text/javascript">
$(document).ready(function() {
    var table = $('#supplier').DataTable( {
        "buttons": true,
        "ajax": "api/v1/Users/users.txt",
        "columns": [
            {
                "className":      'delete',
                "orderable":      false,
                "data":           null,
                "defaultContent": 'Delete'
            },
            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": 'Edit'
            },
            { "data": "Name"},
            { "data": "Email" },
            { "data": "Role" },
            { "data": "Pump_List" },
        ],
        "order": [[1, 'asc']],
        select: true
    } );

    // Add event listener for opening and closing details
    $('#supplier tbody').on('click', 'td.delete', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var username = table.row( this ).data()['Name'];
        var role = table.row( this ).data()['Role'];
        // document.getElementById('deleteid').value = id;

        document.getElementById('deleteUserForm').style.display = 'block';
        document.getElementById('editUserForm').style.display = 'none';
        //document.getElementById('addUserForm').style.display = 'none';
    } );

        // Add event listener for opening and closing details
    $('#supplier tbody').on('click', 'tr td.edit', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        var id = table.row( this ).data()['Id'];
        var username = table.row( this ).data()['Name'];
        var role = table.row( this ).data()['Role'];
        var email = table.row( this ).data()['Email'];
        var password = table.row( this ).data()['Password'];
        var passcode = table.row( this ).data()['Pass_Code'];
        var pumplist = table.row( this ).data()['Pump_List'];


        if (role=='super' || role=='supervisor') {
        document.getElementById('email').disabled = false;
        document.getElementById('password').disabled = false;
        }else{
        document.getElementById('email').disabled = true;
        document.getElementById('password').disabled = true;
        }
        
        document.getElementById('id').value = id;
        document.getElementById('username').value = username;
        document.getElementById('role').value = role;
        document.getElementById('email').value = email;
        document.getElementById('password').value = password;
        document.getElementById('passcode').value = passcode;
        document.getElementById('editUserForm').style.display = 'block';
        //document.getElementById('deleteUserForm').style.display = 'none';
        //document.getElementById('addUserForm').style.display = 'none';   
        var pumpListArray = pumplist.split(',');
        
        for(var i=1 ; i <= 24; i++){
        var pumpListId = "pumplist"+i;
        console.log(pumpListId);
        document.getElementById(pumpListId).checked = false;
        }

pumpListArray.forEach(function(item,index){
     if (item==1)  {document.getElementById("pumplist1").checked = true;}
     if (item==2)  {document.getElementById("pumplist2").checked = true;}
     if (item==3)  {document.getElementById("pumplist3").checked = true;}
     if (item==4)  {document.getElementById("pumplist4").checked = true;}
     if (item==5)  {document.getElementById("pumplist5").checked = true;}
     if (item==6)  {document.getElementById("pumplist6").checked = true;}
     if (item==7)  {document.getElementById("pumplist7").checked = true;}
     if (item==8)  {document.getElementById("pumplist8").checked = true;}
     if (item==9)  {document.getElementById("pumplist9").checked = true;}
     if (item==10) {document.getElementById("pumplist10").checked = true;}
     if (item==11) {document.getElementById("pumplist11").checked = true;}
     if (item==12) {document.getElementById("pumplist12").checked = true;}
     if (item==13) {document.getElementById("pumplist13").checked = true;}
     if (item==14) {document.getElementById("pumplist14").checked = true;}
     if (item==15) {document.getElementById("pumplist15").checked = true;}
     if (item==16) {document.getElementById("pumplist16").checked = true;}
     if (item==17) {document.getElementById("pumplist17").checked = true;}
     if (item==18) {document.getElementById("pumplist18").checked = true;}
     if (item==19) {document.getElementById("pumplist19").checked = true;}
     if (item==20) {document.getElementById("pumplist20").checked = true;}
     if (item==21) {document.getElementById("pumplist21").checked = true;}
     if (item==22) {document.getElementById("pumplist22").checked = true;}
     if (item==23) {document.getElementById("pumplist23").checked = true;}
     if (item==24) {document.getElementById("pumplist24").checked = true;}
});




    } );
    
} );

</script>