1. 程式人生 > >[node 工具 ] 用 Node.js 將 bugzilla 上的 bug 列表導入到 excel 表格在線版本之一( web 端)

[node 工具 ] 用 Node.js 將 bugzilla 上的 bug 列表導入到 excel 表格在線版本之一( web 端)

oct node img please utf save smis charset nim

用 Node.js 將 bugzilla 上的 bug 列表導入到 excel 表格在線版本之一( server 端)

技術分享圖片

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"
> <title>Bug To Excel</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/flat-ui.min.css" rel="stylesheet"> <link href="css/blower-loading.css" rel="stylesheet"> <link href="css/index.css" rel="stylesheet"> </head
> <body> <div class="container"> <div class="row"> <div class="col-xs-1"></div> <div class="col-xs-3" style="text-align:left; margin-top:20px;"> <span id="task_tip" style="visibility:hidden">Running Generating Task: <
span id="running_task"></span><span> </div> <div class="col-xs-8"></div> </div> <div class="row" style="margin-top:30%;" id="login"> <div class="col-xs-3"></div> <div class="col-xs-6" style="text-align:center;" id="account"> <div class="input-group input-group-hg input-group-rounded"> <input type="text" value="" id="input-account" placeholder="URL Of Bug List" class="form-control" data-toggle="tooltip" data-placement="auto top" title="" data-trigger="manual" /> <span class="input-group-btn"> <span type="submit" class="btn"><span class="fui-clip"></span></span> </span> </div> <div style="margin-top: 20px;"> <input type="button" class="btn btn-inverse btn-wide" id="saveAccount" value="Start"> </div> </div> <div class="col-xs-3"></div> </div> <div class="row" id="progress" style="display:none"> <div class="col-xs-2"></div> <div class="col-xs-8"> <div id="loadingContainer"> <div class="loadingbar"> <div class="marker_container"> <div class="marker"></div> <div class="marker"></div> <div class="marker"></div> <div class="marker"></div> </div> <div class="filler_wrapper"> <div class="filler"> <span class="value">0%</span> </div> </div> </div> <div id="download" style="display:none"> <img src="image/download.svg" alt="Download"> <span>Download Excel file</span> </div> </div> </div> <div class="col-xs-2"></div> </div> <div class="row" id="alert-bar" style="margin-top:20px; display:none;"> <div class="col-xs-2"></div> <div class="col-xs-8" id="alert-row"></div> <div class="col-xs-2"></div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/flat-ui.min.js"></script> <script src="js/unique.js"></script> <script src="js/blower-loading.js"></script> <script src="js/index.js"></script> </body> </html>
blower-loading.css 和 blower-loading.js 忘記是從哪裏扒過來的代碼了,反正不是自己寫的。只是小小修改了一下樣式和 js 代碼,讓它能比較好地跑在項目裏。 unique.js 是根據瀏覽器環境生成指紋碼的一個庫
function showAlert(flag, str) {
    $("#alert-body").remove();
    var alert_body = $(‘<div class="alert alert-dismissible" role="alert" id="alert-body"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><span></span></div>‘);
    if (flag == "Warning") {
        alert_body.addClass("alert-warning");
    } else if (flag == "Error") {
        alert_body.addClass("alert-danger");
    }
    alert_body.children("span").html("<strong>" + flag + "!<strong> " + str);
    alert_body.appendTo("#alert-row");
    $("#alert-bar").fadeIn();
    setTimeout(function() {
        $("#alert-bar").fadeOut();
    }, 8000);
}

提醒的函數

var fingerprint = new Fingerprint().get();

獲得指紋碼

setInterval(getTaskNum, 2000);

function getTaskNum() {
    $.get("/taskNum", function(data, status) {
        $("#running_task").text(data.running + "/" + data.max);
        if ($("#task_tip").css("visibility") == "hidden")
            $("#task_tip").css("visibility", "");
    });
}

更新任務數

$("#saveAccount").on("click", function() {
    if ($("#input-account").val() == "") {
        showAccountTip("Input the url of bug list.");
    } else {
        $("#login").animate({ "marginTop": "5%" });
        $("#alert-bar").fadeOut();
        $.ajaxSetup({ "contentType": "application/json" })
        var data = {
            taskURL: $("#input-account").val(),
            fingerprint: fingerprint
        }
        $.post("/start", JSON.stringify(data), function(data, status) {
            if (data.result == "fail") {
                if (data.reason == "running")
                    showAlert("Warning", "It is running a task for you. Just be patient.");
                else if (data.reason == "maxTask")
                    showAlert("Error", "Reach max tasks limition. Just support up to " + data.maxTask + " processes at the same time.");
                return;
            }
            window.blower = new LoadingBlower("#loadingContainer");
            blower.resetProgress();
            setTimeout(function() {
                $("#progress").fadeIn("slow");
                $("#download").slideUp();
            }, 200)
            window.intval = setInterval(getStatus, 2000);
        })
    }
})

開始一個新任務

function getStatus() {
    $.get("/status?fingerprint=" + fingerprint, function(data, status) {
        try {
            blower.setProgress(parseInt(data.done / data.total * 100));
        } catch (err) {}
        if (data.status == "error") {
            clearInterval(intval);
            $("#progress").fadeOut();
            setTimeout(function() {
                if (data.reason == "noBug")
                    showAlert("Error", "Can‘t find any bug from the url you provided.");
                else if (data.reason == "invalid")
                    showAlert("Error", "You may input invalid url. Please check again.");
                else
                    showAlert("Error", "It may occur socket error. Wait other task(s) done and try again.");
            }, 300);
        } else if (data.status == "done") {
            clearInterval(intval);
        }
    });
}

更新進度條

$("#download img").on("click", function() {
    ajax_download("/download?fingerprint=" + fingerprint);
    setTimeout(function() {
        $("#download").slideUp();
    }, 200)
})

function ajax_download(url) {
    $(‘#download_iframe‘).remove();

    $("<iframe id=‘download_iframe‘ style=‘display: none‘ src=‘" + url + "‘></iframe>"
    ).appendTo("body");
}

下載 excel 文件

[node 工具 ] 用 Node.js 將 bugzilla 上的 bug 列表導入到 excel 表格在線版本之一( web 端)