finished 1

Journeys_WantHome.csproj

@@ -43,6 +43,7 @@
     <Folder Include="wwwroot\images\avatar\" />
     <Folder Include="wwwroot\images\cut\" />
     <Folder Include="wwwroot\files\" />
+    <Folder Include="wwwroot\images\instagram\" />
   </ItemGroup>
 
   <ItemGroup>

Models/DbTableClass.cs

@@ -8,6 +8,130 @@ using Newtonsoft.Json.Linq;
 
 public class DbTableClass
 {
+    [Table("instagramKolView")]
+    public class instagramKolView
+    {
+        [JsonIgnore]
+        [Key]
+        public int instagram_sn { get; set; }
+        public string instagram_uid { get; set; }
+        public string kol_uid { get; set; }
+        public string kolMedia_uid { get; set; }
+        public string instagram_name { get; set; }
+        public string instagram_pic { get; set; }
+        public string instagram_revoke { get; set; }
+        public int instagram_fansNum { get; set; }
+        public int instagram_followNum { get; set; }
+        public double instagram_postActive { get; set; }
+        public double instagram_reelsActive { get; set; }
+        public DateTime instagram_updatedate { get; set; }
+        public string kolMedia_url { get; set; }
+        public string kol_photo { get; set; }
+
+    }
+
+
+
+    [Table("instagramDetail")]
+    public class instagramDetail
+    {
+        [JsonIgnore]
+        [Key]
+        public int instagramDetail_sn { get; set; }
+        public string instagram_uid { get; set; } = "";
+        public string instagramDetail_type { get; set; } = "";
+        public string instagramDetail_title { get; set; } = "";
+        public string instagramDetail_photo { get; set; } = "";
+        public string instagramDetail_shortcode { get; set; } = "";
+        public string instagramDetail_date { get; set; } = "";
+        public int instagramDetail_viewNum { get; set; } = 0;
+        public int instagramDetail_likeNum { get; set; } = 0;
+        public int instagramDetail_commentNum { get; set; } = 0;
+        public string instagramDetail_ispinned { get; set; } = "N";
+        public DateTime instagramDetail_createdate { get; set; } = DateTime.Now;
+    }
+
+
+
+    [Table("instagram")]
+    public class instagram
+    {
+        [JsonIgnore]
+        [Key]
+        public int instagram_sn { get; set; }
+        public string instagram_uid { get; set; } = "";
+        public string kol_uid { get; set; } = "";
+        public string kolMedia_uid { get; set; } = "";
+        public string instagram_name { get; set; } = "";
+        public string instagram_pic { get; set; } = "";
+        public string instagram_revoke { get; set; } = "N";
+        public int instagram_fansNum { get; set; } = 0;
+        public int instagram_followNum { get; set; } = 0;
+        public double instagram_postActive { get; set; } = 0.0;
+        public double instagram_reelsActive { get; set; } = 0.0;
+        public DateTime instagram_updatedate { get; set; } = DateTime.Now;
+    }
+
+
+    [Table("facebookKolView")]
+    public class facebookKolView
+    {
+        [JsonIgnore]
+        [Key]
+        public int facebook_sn { get; set; }
+        public string facebook_uid { get; set; } = "";
+        public string kol_uid { get; set; } = "";
+        public string kolMedia_uid { get; set; } = "";
+        public string facebook_name { get; set; } = "";
+        public string facebook_revoke { get; set; } = "N";
+        public int facebook_fansNum { get; set; } = 0;
+        public int facebook_5_likesNum { get; set; } = 0;
+        public int facebook_5_msgNum { get; set; } = 0;
+        public int facebook_5_shareNum { get; set; } = 0;
+        public double facebook_active { get; set; } = 0.0;
+        public DateTime facebook_updatedate { get; set; } = DateTime.Now;
+        public string kol_name { get; set; } = "";
+        public string kol_photo { get; set; } = "";
+        public string kolMedia_url { get; set; } = "";
+    }
+
+
+
+    [Table("facebookDetail")]
+    public class facebookDetail
+    {
+        [JsonIgnore]
+        [Key]
+        public int facebookDetail_sn { get; set; }
+        public string facebook_uid { get; set; } = "";
+        public string facebookDetail_publishedAt { get; set; } = "";
+        public int facebookDetail_likeCount { get; set; } = 0;
+        public int facebookDetail_msgCount { get; set; } = 0;
+        public int facebookDetail_shareCount { get; set; } = 0;
+        public DateTime facebookDetail_createdate { get; set; } =DateTime.Now;
+    }
+
+    [Table("facebook")]
+    public class facebook
+    {
+        [JsonIgnore]
+        [Key]
+        public int facebook_sn { get; set; }
+        public string facebook_uid { get; set; } = "";
+        public string kol_uid { get; set; } = "";
+        public string kolMedia_uid { get; set; } = "";
+        public string facebook_name { get; set; } = "";
+        public string facebook_revoke { get; set; } = "N";
+        public int facebook_fansNum { get; set; } = 0;
+        public int facebook_5_likesNum { get; set; } = 0;
+        public int facebook_5_msgNum { get; set; } = 0;
+        public int facebook_5_shareNum { get; set; } = 0;
+        public double facebook_active { get; set; } = 0.0;
+        public DateTime facebook_updatedate { get; set; } = DateTime.Now;
+    }
+
+
+
     [Table("youtubeDetail")]
     public class youtubeDetail
     {

Models/youtubeUpdateClass.cs

@@ -29,7 +29,7 @@ public class youtubeUpdateClass : IHostedService, IDisposable
     {
         _timer = new Timer(DoWork, null,
             TimeSpan.Zero,
-            TimeSpan.FromSeconds(5 * 60));
+            TimeSpan.FromSeconds(15 * 60));
         return Task.CompletedTask;
     }
 

Views/Home/Dashboard.cshtml

@@ -46,6 +46,9 @@
         <!-- grid row -->
         <div class="row" id="card_group">
         </div><!-- /grid row -->
+        <!-- grid row -->
+        <div class="row" id="card_group2">
+        </div><!-- /grid row -->
     </div><!-- /.page-section -->
 </div><!-- /.page-inner -->
 
@@ -80,4 +83,64 @@
             </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div>
-</form><!-- /.modal -->
+</form><!-- /.modal -->
+<!-- .modal -->
+<form id="clientFacebookForm" name="clientFacebookForm">
+    <div class="modal fade" id="FacebookModal" tabindex="-1" role="dialog" aria-labelledby="FacebookModalLabel" data-backdrop="static" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">最近五則貼文資料</span> <input id="optionItem_name" type="text" class="form-control form-control-lg" value="" placeholder="最近五則貼文資料" readonly="readonly" required="">
+                    </h6>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+                    </button>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <!-- .masonry-layout -->
+                    <div class="row" id="facebook_layout">
+                    </div><!-- /.masonry-layout -->
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->
+<!-- .modal -->
+<form id="clientInstagramPostForm" name="clientInstagramPostForm">
+    <div class="modal fade" id="InstagramPostModal" tabindex="-1" role="dialog" aria-labelledby="InstagramPostModalLabel" data-backdrop="static" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="optionItemModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">最近6則資料</span> <input id="optionItem_name" type="text" class="form-control form-control-lg" value="" placeholder="最近6則資料" readonly="readonly" required="">
+                    </h6>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+                    </button>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <!-- .masonry-layout -->
+                    <div class="row" id="instagramPost_layout">
+                    </div><!-- /.masonry-layout -->
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->

Views/Home/KolList.cshtml

@@ -338,7 +338,7 @@
                     <!-- .form-group -->
                     <div class="form-group">
                         <div class="form-label-group">
-                            <input type="text" id="kolMedia_fansNum" class="form-control" value="0" placeholder="粉絲數" maxlength="20" required=""> <label for="kolMedia_fansNum">粉絲數</label>
+                            <input type="text" id="kolMedia_fansNum" class="form-control" value="0" placeholder="追蹤訂閱數" maxlength="20" required=""> <label for="kolMedia_fansNum">粉絲數</label>
                         </div>
                     </div><!-- /.form-group -->
 

Views/Home/ProjectList.cshtml

@@ -106,13 +106,13 @@
                                             <div class="form-group">
                                                 <label class="d-block">狀況</label>
                                                 <div class="custom-control custom-control-inline custom-radio">
-                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd1" value="Y"> <label class="custom-control-label" for="rd1">執行</label>
+                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd11" value="Y"> <label class="custom-control-label" for="rd11">執行</label>
                                                 </div>
                                                 <div class="custom-control custom-control-inline custom-radio">
-                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd2" value="N"> <label class="custom-control-label" for="rd2">未執行</label>
+                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd21" value="N"> <label class="custom-control-label" for="rd21">未執行</label>
                                                 </div>
                                                 <div class="custom-control custom-control-inline custom-radio">
-                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd3" value="A" checked=""> <label class="custom-control-label" for="rd3">全部</label>
+                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd31" value="A" checked=""> <label class="custom-control-label" for="rd31">全部</label>
                                                 </div>
                                             </div>
                                         </div>

wwwroot/assets/javascript/custom/dashboard.js

@@ -2,8 +2,217 @@
 
 $(document).ready(function () {
     loadYoutubeCard();
+    loadFacebookCard();
+    loadInstagramCard();
 });
 
+function loadInstagramCard() {
+    $.ajax({
+        url: "/Api/instagramList",
+        type: "post",
+        data: null,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.list;
+                $('#card_group2').append(instagramCardHtml(obj));
+
+
+
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
+function instagramCardHtml(objItem) {
+    var html = "";
+    html += "<!-- grid column -->";
+    html += "<div class=\"col-xl-12\">";
+    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\">Instagram 排行</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 class=\"text-right\"> 粉絲數 </th>";
+    html += "                       <th class=\"text-right\"> 貼文互動數(近6) </th>";
+    html += "                       <th class=\"text-right\"> Reels預估觀看數 </th>";
+    html += "                       <th> 更新日期 </th>";
+    html += "                       <th>  </th>";
+    html += "                   </tr>";
+    html += "               </thead><!-- /thead -->";
+    html += "               <!-- tbody -->";
+    html += "               <tbody>";
+    html += "               <!-- tr -->";
+
+    $.each(objItem, function (index, item) {
+        html += instagramSubHtml(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 instagramSubHtml(item) {
+    var html = "";
+
+    var decimal = item.instagram_postActive;
+    var postPercent = (decimal * 100).toFixed(2) + "%";
+
+    var avgView = item.instagram_reelsActive.toFixed(0);
+
+    var publishdate = new Date(item.instagram_updatedate);
+
+    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=\"/images/instagram/" + item.instagram_pic + "\"> </a>&nbsp;";
+    html += "                       <a href=\"" + item.kolMedia_url + "\" target=\"_blank\">" + item.instagram_name + "</a>";
+    html += "                   </td>";
+    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(item.instagram_fansNum) + " </td>";
+    html += "                   <td class=\"align-middle text-right\"> " + postPercent + " </td>";
+    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(avgView) + " </td>";
+    html += "                   <td class=\"align-middle\"> " + formatDate(publishdate, 'yyyy/MM/dd HH:mm:ss') + " </td>";
+    html += "                   <td class=\"align-middle\">";
+    html += "                       <button class=\"btn btn-sm btn-secondary\" data-method=\"post\" data-uid=\"" + item.instagram_uid + "\" onclick=\"instagramBtnClick(this);\">貼文</button>";
+    html += "                       <button class=\"btn btn-sm btn-secondary\" data-method=\"reels\" data-uid=\"" + item.instagram_uid + "\" onclick=\"instagramBtnClick(this);\">Reels</button>";
+    html += "                   </td>";
+    html += "               </tr><!-- /tr -->";
+
+    return html;
+}
+
+function loadFacebookCard() {
+    $.ajax({
+        url: "/Api/facebookList",
+        type: "post",
+        data: null,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.list;
+                $('#card_group').append(facebookCardHtml(obj));
+
+
+
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
+function facebookCardHtml(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\">Facebook 排行</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 class=\"text-right\"> 追蹤者數 </th>";
+    html += "                       <th class=\"text-right\"> 互動數(近5) </th>";
+    html += "                       <th> 資料更新日期 </th>";
+    html += "                       <th>  </th>";
+    html += "                   </tr>";
+    html += "               </thead><!-- /thead -->";
+    html += "               <!-- tbody -->";
+    html += "               <tbody>";
+    html += "               <!-- tr -->";
+
+    $.each(objItem, function (index, item) {
+        html += facebookSubHtml(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 facebookSubHtml(item) {
+    var html = "";
+
+    var decimal = item.facebook_active;
+    var percent = (decimal * 100).toFixed(2) + "%";
+    var publishdate = new Date(item.facebook_updatedate);
+
+    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.kol_photo + "\"> </a>&nbsp;";
+    html += "                       <a href=\"" + item.kolMedia_url + "\" target=\"_blank\">" + item.facebook_name + "</a>";
+    html += "                   </td>";
+    html += "                   <td class=\"align-middle text-right\"> " + AppendComma(item.facebook_fansNum) + " </td>";
+    html += "                   <td class=\"align-middle text-right\"> " + percent + " </td>";
+    html += "                   <td class=\"align-middle\"> " + formatDate(publishdate, 'yyyy/MM/dd HH:mm:ss') + " </td>";
+    html += "                   <td class=\"align-middle\">";
+    html += "                       <button class=\"btn btn-sm btn-icon btn-secondary\"  data-uid=\"" + item.facebook_uid + "\" onclick=\"facebookBtnClick(this);\"> <i class=\"fa fa-ellipsis-h\"></i></button>";
+    html += "                   </td>";
+    html += "               </tr><!-- /tr -->";
+
+    return html;
+}
+
+
 function loadYoutubeCard() {
     $.ajax({
         url: "/Api/youtubeList",
@@ -54,9 +263,10 @@ function youtubeCardHtml(objItem) {
     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 += "                       <th>  </th>";
     html += "                   </tr>";
     html += "               </thead><!-- /thead -->";
@@ -89,9 +299,10 @@ function youtubeSubHtml(item) {
     html += "                       <a href=\"javascript: void(0);\" class=\"user-avatar user-avatar-lg\"><img src=\"" + item.youtube_photo + "\"> </a>&nbsp;";
     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\"> " + (new Date(item.youtube_updateTime)).format("yyyy/MM/dd hh:mm:ss") + " </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>";
@@ -100,6 +311,312 @@ function youtubeSubHtml(item) {
     return html;
 }
 
+function instagramBtnClick(obj) {
+    var dataUid = obj.getAttribute('data-uid');
+    var dataType = obj.getAttribute('data-method');
+
+    if (dataType == 'post') {
+        var trList = $("#instagramPost_layout").find(".masonry-item");
+        $.each(trList, function (index, item) {
+            $(item).remove();
+        });
+
+        var formData = {
+            instagram_uid: dataUid,
+            method: 'post'
+        }
+
+        $.ajax({
+            url: "/Api/instagramData",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    var obj = data.list;
+
+                    var html = "";
+
+                    $.each(obj, function (index, item) {
+                        html += instagramPostModalHtml(item);
+                    });
+
+                    $('#instagramPost_layout').append(html);
+
+                    $('#InstagramPostModal').modal('toggle');
+
+
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "99999") {
+                        location.href = "/Root/Login";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+    }
+
+    if (dataType == 'reels') {
+        var trList = $("#instagramPost_layout").find(".masonry-item");
+        $.each(trList, function (index, item) {
+            $(item).remove();
+        });
+
+        var formData = {
+            instagram_uid: dataUid,
+            method: 'reels'
+        }
+
+        $.ajax({
+            url: "/Api/instagramData",
+            type: "reels",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    var obj = data.list;
+
+                    var html = "";
+
+                    $.each(obj, function (index, item) {
+                        html += instagramReelsModalHtml(item);
+                    });
+
+                    $('#instagramPost_layout').append(html);
+
+                    $('#InstagramPostModal').modal('toggle');
+
+
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "99999") {
+                        location.href = "/Root/Login";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+    }
+}
+
+function instagramReelsModalHtml(obj) {
+
+
+
+    var html = "";
+    html += "<!-- .masonry-item -->";
+    html += "<div class=\"masonry-item col-lg-12\">";
+    html += "   <!-- .card -->";
+    html += "   <div class=\"card card-fluid\">";
+    html += "   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">";
+    html += "   <img src=\"/images/instagram/" + obj.instagramDetail_photo + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
+    html += "   </a>";
+    html += "   <div class=\"card-body pt-2\">";
+    html += "       <!-- grid row -->";
+    html += "       <div class=\"row align-items-center mb-3\">";
+    html += "           <!-- .col -->";
+    html += "           <div class=\"col\">";
+    html += "               <h5 class=\"card-title\">";
+    html += "                   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">" + obj.instagramDetail_title + "</a>";
+    html += "               </h5>";
+    html += "               <h6 class=\"card-subtitle text-muted\"> " + obj.instagramDetail_date + " </h6>";
+    html += "           </div><!-- /.col -->";
+    html += "           <!-- grid column -->";
+    html += "       </div><!-- /grid row -->";
+    html += "   <!-- grid row -->";
+    html += "   <div class=\"row text-center\">";
+
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_viewNum) + " </h6>";
+    html += "           <p class=\"metric-label\"> 觀看數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_commentNum) + " </h6>";
+    html += "           <p class=\"metric-label\"> 留言數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   </div><!-- /grid row -->";
+    html += "   </div><!-- /.card-body -->";
+    html += "   </div><!-- /.card -->";
+    html += "</div><!-- /.masonry-item -->";
+
+    return html;
+}
+
+function instagramPostModalHtml(obj) {
+
+    
+
+    var html = "";
+    html += "<!-- .masonry-item -->";
+    html += "<div class=\"masonry-item col-lg-12\">";
+    html += "   <!-- .card -->";
+    html += "   <div class=\"card card-fluid\">";
+    html += "   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">";
+    html += "   <img src=\"/images/instagram/" + obj.instagramDetail_photo + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
+    html += "   </a>";
+    html += "   <div class=\"card-body pt-2\">";
+    html += "       <!-- grid row -->";
+    html += "       <div class=\"row align-items-center mb-3\">";
+    html += "           <!-- .col -->";
+    html += "           <div class=\"col\">";
+    html += "               <h5 class=\"card-title\">";
+    html += "                   <a href=\"https://www.instagram.com/p/" + obj.instagramDetail_shortcode + "\" target=\"_blank\">" + obj.instagramDetail_title + "</a>";
+    html += "               </h5>";
+    html += "               <h6 class=\"card-subtitle text-muted\"> " + obj.instagramDetail_date + " </h6>";
+    html += "           </div><!-- /.col -->";
+    html += "           <!-- grid column -->";
+    html += "       </div><!-- /grid row -->";
+    html += "   <!-- grid row -->";
+    html += "   <div class=\"row text-center\">";
+    
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_likeNum) + " </h6>";
+    html += "           <p class=\"metric-label\"> 喜歡數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.instagramDetail_commentNum) + " </h6>";
+    html += "           <p class=\"metric-label\"> 留言數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   </div><!-- /grid row -->";
+    html += "   </div><!-- /.card-body -->";
+    html += "   </div><!-- /.card -->";
+    html += "</div><!-- /.masonry-item -->";
+
+    return html;
+}
+function facebookBtnClick(obj) {
+    var dataUid = obj.getAttribute('data-uid');
+
+
+    var trList = $("#facebook_layout").find(".masonry-item");
+    $.each(trList, function (index, item) {
+        $(item).remove();
+    });
+
+    var formData = {
+        facebook_uid: dataUid
+    }
+
+    $.ajax({
+        url: "/Api/facebookData",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.list;
+
+                var html = "";
+
+                $.each(obj, function (index, item) {
+                    html += facebookModalHtml(item);
+                });
+
+                $('#facebook_layout').append(html);
+
+                $('#FacebookModal').modal('toggle');
+
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
+function facebookModalHtml(obj) {
+
+    //var publishdate = new Date(obj.youtubeDetail_publishedAt);
+
+    var html = "";
+    html += "<!-- .masonry-item -->";
+    html += "<div class=\"masonry-item col-lg-12\">";
+    html += "   <!-- .card -->";
+    html += "   <div class=\"card card-fluid\">";
+    //html += "   <a href=\"https://www.youtube.com/watch?v=" + obj.youtubeDetail_videoId + "\" target=\"_blank\">";
+    //html += "   <img src=\"" + obj.youtubeDetail_thumbnails + "\"  class=\"card-img-top img-fluid\"> <!-- .card-body -->";
+    //html += "   </a>";
+    html += "   <div class=\"card-body pt-2\">";
+    html += "       <!-- grid row -->";
+    html += "       <div class=\"row align-items-center mb-3\">";
+    html += "           <!-- .col -->";
+    html += "           <div class=\"col\">";
+    // html += "               <h5 class=\"card-title\">";
+    //html += "                   <a href=\"https://www.youtube.com/watch?v=" + obj.youtubeDetail_videoId + "\" target=\"_blank\">" + obj.youtubeDetail_title + "</a>";
+    //html += "               </h5>";
+    //html += "               <h5 class=\"card-subtitle text-muted\"> " + obj.+ " </h6>";
+    html += "           </div><!-- /.col -->";
+    html += "           <!-- grid column -->";
+    html += "       </div><!-- /grid row -->";
+    html += "   <!-- grid row -->";
+    html += "   <div class=\"row text-center\">";
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h8 class=\"metric-value\"> " + obj.facebookDetail_publishedAt + " </h8>";
+    html += "           <p class=\"metric-label\"> 貼文發布時間 </p>";
+    
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.facebookDetail_likeCount) + " </h6>";
+    html += "           <p class=\"metric-label\"> 按讚數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.facebookDetail_msgCount) + " </h6>";
+    html += "           <p class=\"metric-label\"> 留言數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   <!-- grid column -->";
+    html += "   <div class=\"col\">";
+    html += "       <!-- .metric -->";
+    html += "       <div class=\"metric\">";
+    html += "           <h6 class=\"metric-value\"> " + AppendComma(obj.facebookDetail_shareCount) + " </h6>";
+    html += "           <p class=\"metric-label\"> 分享數 </p>";
+    html += "       </div><!-- /.metric -->";
+    html += "   </div><!-- /grid column -->";
+    html += "   </div><!-- /grid row -->";
+    html += "   </div><!-- /.card-body -->";
+    html += "   </div><!-- /.card -->";
+    html += "</div><!-- /.masonry-item -->";
+
+    return html;
+}
 
 function youtubeBtnClick(obj) {
     var dataUid = obj.getAttribute('data-uid');