mechanical/static/table.js

data="";
function creatTable(){
    //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
    //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
    //alert("eee");
    var tableData = '<div class="card"><div style="padding:15px;"><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" id="system-table" class="table"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">單位分類</th><th class="border-0">使用者分類</th><th class="border-0">帳號</th><th class="border-0">電子郵件</th><th class="border-0">權限設定</th><th class="border-0">備註</th><th class="border-0">+新增</th></tr></thead><tbody></div>'
  
    //動態增加5個td,並且把data陣列的五個值賦給每個td
    // for(var i=0;i < data.length;i++){
    //     tableData += "<td>" + data[i] + "</td>"
    // }
    for(var i = 0; i < data.length; i++) {
        tableData += "<tr class='bg-transparent'>";
        str = "";
        str2="";
        if(data[i].roleType==1){
            str = "第一層(集團)";
        }
        else if(data[i].roleType==2){
            str = "第二層(公司)";
        }
        else if(data[i].roleType==3){
            str = "第三層(廠區)";
        }
        else{
            str = "第四層(課)";
        }

        if(data[i].isAdmin==1){
            str2 = data[i].role_name;
        }
        else{
            str2 = "檢視者";
        }

        
        tableData += "<td style='vertical-align:middle;'>" + str + "</td>" +
                     "<td style='vertical-align:middle;'>" + str2 + "</td>" +
                     "<td style='vertical-align:middle;'>" + data[i].username + "</td>" +
                     "<td></td>" +           
                     "<td><button style='padding:5px 10px; background:#002e86; color:#fff; border: 1px solid #002E86; border-radius: 10px; font-size:14px;' class='tower-btn my-3' onclick=\"member_auth(\'"+data[i].username+"\');\"><i style='color:#fff;' class='fas fa-cog me-1'></i>設定</button></td>"+
                     "<td></td>" +
                     "<td></td>" ;
        tableData += "</tr>";
    }
  
    tableData+= "</tbody></table></div>";
  
    //現在tableData已經生成好了，把他賦值給上面的tbody
    $("#info_table").html(tableData);
}

// function member_auth(username){
//     $("#info_table").html("");
//     inner = "<p>請設定以下權限:</p><br>";
//     inner += "<table class='table table-borderless' id = \"change\"> <tr> <th>帳號</th><th>管理員</th><th>可用</th></tr>" +
//              " <tr><td >" + username + "</td><td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isAdmin\" >"+ " </td><td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isEnable\" ></td></tr></table>";

//     inner += "<br><button type='button' class='btn btn-primary me-3' onclick=\"put();\">確認 </button>" + "<button type='button' class='btn btn-primary me-3' onclick=\"start();\">取消 </button>"
//     $("#member_auth").html(inner);
//     console.log($("#isAdmin").prop('checked'));

// }
function member_auth(username){
    $("#info_table").html("");
    inner = "\
    <div class='card mt-0'>\
    <h1 style='color:#002e86'>請設定以下權限:</h1>\
    <div style='font-size: 16px;' class='py-3'>\
    <div style='padding:15px'>\
    <table style='font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;' class='table' id = \"change\"><thead style='background:#e4f8ff; color:#4c6caa;'><tr><th>帳號</th><th>管理員</th><th>可用</th></tr></thead>\
    <tr>\
    <td >" + username + "</td>\
    <td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isAdmin\" >"+ " </td>\
    <td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isEnable\" ></td>\
    </tr>\
    </table>\
    </div>\
    <div style='padding:15px;' class='mt-4 pb-3'>\
    <button type='button' style='background:#002e86; color:#fff; border: 1px solid #002E86; border-radius: 10px;' class='btn text-white me-2' onclick=\"put();\">確認 </button>\
    <button type='button' style='background:#002e86; color:#fff; border: 1px solid #002E86; border-radius: 10px;' class='btn text-white' onclick=\"start();\">取消 </button>\
    </div>\
    </div>\
    </div>\
    ";
  
    $("#member_auth").html(inner);
    console.log($("#isAdmin").prop('checked'));
}

function put(){
    var xhr2 = new XMLHttpRequest();
    var url2 = "member/edit/?name=" + document.getElementById("change").rows[1].cells[0].innerHTML;
    if($("#isAdmin").prop('checked')){
        url2 += "&isAdmin=1" ; 
    }
    else{
        url2 += "&isAdmin=0" ; 
    }
    if($("#isEnable").prop('checked')){
        url2 += "&isEnable=1" ; 
    }
    else{
        url2 += "&isEnable=0" ; 
    }
    xhr2.open("GET",url2);
    xhr2.onload = function(){
        obj = JSON.parse(xhr2.responseText);
        alert(obj[0].msg);
        start();
        $("#member_auth").html("");
        
        //insertHTML();
    };
    xhr2.send();
}

//alert("response");
start();
// 之後透過 fetch 取得fastapi後端資料!
function start(){
    var xhr = new XMLHttpRequest();
    var url = "member";
    obj = "";
    xhr.open("GET",url);
    xhr.onload = function(){
        obj = JSON.parse(xhr.responseText);
        data = obj ;
        creatTable();
        
            //insertHTML();
    };
    xhr.send();
    $("#member_auth").html("");
    console.log('Table data 寫入!');
}

// function toggless(){
//     $(this).addClass("tower-active");
//     $(".tower-active").siblings().removeClass('tower-active');
// }



    $('.system-btn').click(function() {
        $(this).addClass("tower-active");
        $(".tower-active").siblings().removeClass('tower-active');
    });