101 lines
4.1 KiB
JavaScript
101 lines
4.1 KiB
JavaScript
|
|
|
|
$(document).ready(function () {
|
|
loadYoutubeCard();
|
|
});
|
|
|
|
function loadYoutubeCard() {
|
|
$.ajax({
|
|
url: "/Api/youtubeList",
|
|
type: "post",
|
|
data: null,
|
|
success: function (data, textStatus, jqXHR) {
|
|
if (data.ret == "yes") {
|
|
var obj = data.youtubeList;
|
|
$('#card_group').append(youtubeCardHtml(obj));
|
|
|
|
|
|
|
|
|
|
} else {
|
|
alert(data.message);
|
|
|
|
if (data.err_code == "99999") {
|
|
location.href = "/Root/Login";
|
|
}
|
|
}
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
alert('網路或伺服器發生錯誤，請稍後重試!');
|
|
}
|
|
});
|
|
}
|
|
|
|
function youtubeCardHtml(objItem) {
|
|
var html = "";
|
|
html += "<!-- grid column -->";
|
|
html += "<div class=\"col-xl-6\">";
|
|
html += " <!-- .card -->";
|
|
html += " <div class=\"card card-fluid\">";
|
|
html += " <!-- .card-header -->";
|
|
html += " <div class=\"card-header border-0\">";
|
|
html += " <!-- .d-flex -->";
|
|
html += " <div class=\"d-flex align-items-center\">";
|
|
html += " <span class=\"mr-auto\">Youtube 頻道排行</span> <!-- .card-header-control -->";
|
|
html += " <div class=\"card-header-control\">";
|
|
html += " </div><!-- /.card-header-control -->";
|
|
html += " </div><!-- /.d-flex -->";
|
|
html += " </div><!-- /.card-header -->";
|
|
html += " <!-- .table-responsive -->";
|
|
html += " <div class=\"table-responsive\">";
|
|
html += " <!-- .table -->";
|
|
html += " <table class=\"table\">";
|
|
html += " <!-- thead -->";
|
|
html += " <thead>";
|
|
html += " <tr>";
|
|
html += " <th style=\"min-width:259px\"> 頻道名稱 </th>";
|
|
html += " <th> 帳號 </th>";
|
|
html += " <th class=\"text-right\"> 訂閱數 </th>";
|
|
html += " <th class=\"text-right\"> 平均觀看數(近5) </th>";
|
|
html += " <th> </th>";
|
|
html += " </tr>";
|
|
html += " </thead><!-- /thead -->";
|
|
html += " <!-- tbody -->";
|
|
html += " <tbody>";
|
|
html += " <!-- tr -->";
|
|
|
|
$.each(objItem, function (index, item) {
|
|
html += youtubeSubHtml(item);
|
|
});
|
|
|
|
html += " </tbody><!-- /tbody -->";
|
|
html += " </table><!-- /.table -->";
|
|
html += " </div><!-- /.table-responsive -->";
|
|
html += " <!-- .card-footer -->";
|
|
html += " <div class=\"card-footer\">";
|
|
html += " </div><!-- /.card-footer -->";
|
|
html += " </div><!-- /.card -->";
|
|
html += "</div><!-- /grid column -->";
|
|
|
|
return html;
|
|
}
|
|
|
|
function youtubeSubHtml(item) {
|
|
var html = "";
|
|
|
|
html += " <!-- tr -->";
|
|
html += " <tr>";
|
|
html += " <td class=\"align-middle text-truncate\">";
|
|
html += " <a href=\"javascript: void(0);\" class=\"user-avatar user-avatar-lg\"><img src=\"" + item.youtube_photo + "\"> </a> ";
|
|
html += " <a href=\"https://www.youtube.com/" + item.youtube_account + "\" target=\"_blank\">" + item.youtube_name + "</a>";
|
|
html += " </td>";
|
|
html += " <td class=\"align-middle\"> " + item.youtube_account + " </td>";
|
|
html += " <td class=\"align-middle text-right\"> " + AppendComma(item.youtube_subscriberCount) + " </td>";
|
|
html += " <td class=\"align-middle text-right\"> " + AppendComma(item.youtube_avgViewCount) + " </td>";
|
|
html += " <td class=\"align-middle\">";
|
|
html += " <button class=\"btn btn-sm btn-icon btn-secondary\" data-uid=\"" + item.youtube_uid + "\" onclick=\"youtubeBtnClick(this);\"> <i class=\"fa fa-ellipsis-h\"></i></button>";
|
|
html += " </td>";
|
|
html += " </tr><!-- /tr -->";
|
|
|
|
return html;
|
|
} |