updates

Controllers/ApiController.cs

@@ -59,6 +59,42 @@ namespace Journeys_WantHome.Controllers
             this._httpContextAccessor = httpContextAccessor;
         }
 
+        [Route("youtubeData")]
+        public ActionResult YoutubeData(IFormCollection obj) {
+            youtubeDataResult ret = new youtubeDataResult();
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                ret.ret = "no";
+                ret.err_code = "99999";
+                ret.message = "非登入狀態!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            string youtube_uid = obj["youtube_uid"].ToString();
+
+            if (youtube_uid == "") {
+                ret.ret = "no";
+                ret.err_code = "00001";
+                ret.message = "無 youtube_uid !";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            youtube objData = conn.QueryFirstOrDefault<youtube>("select * from youtube where youtube_revoke = 'N' and youtube_uid = @youtube_uid", new { youtube_uid = youtube_uid });
+
+            if (objData == null) {
+                ret.ret = "no";
+                ret.err_code = "00002";
+                ret.message = "無此 youtube_uid 資料!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            ret.data = new youtubeDetailClass(objData);
+            ret.ret = "yes";
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
+
         [Route("youtubeList")]
         public ActionResult YoutubeList(IFormCollection obj) {
             youtubeListResult ret = new youtubeListResult();
@@ -1927,7 +1963,13 @@ namespace Journeys_WantHome.Controllers
         
     }
 
-
+    public class youtubeDataResult
+    {
+        public string ret { get; set; } = "no";
+        public string err_code { get; set; } = "0000";
+        public string message { get; set; } = "";
+        public youtubeDetailClass data = new youtubeDetailClass();
+    }
     public class youtubeListResult
     {
         public string ret { get; set; } = "no";

Models/youtubeDetailClass.cs

@@ -10,7 +10,7 @@ public class youtubeDetailClass : youtube
     DbConn dbConn = new DbConn();
     SqlConnection conn = new SqlConnection(GlobalClass.appsettings("ConnectionStrings:SQLConnectionString"));
 
-    List<youtubeDetail> youtubeDetails = new List<youtubeDetail>();
+    public List<youtubeDetail> youtubeDetails = new List<youtubeDetail>();
     private youtube _youtube;
 
     public youtubeDetailClass()

Views/Home/Dashboard.cshtml

@@ -48,3 +48,36 @@
         </div><!-- /grid row -->
     </div><!-- /.page-section -->
 </div><!-- /.page-inner -->
+
+<!-- .modal -->
+<form id="clientYoutubeForm" name="clientYoutubeForm">
+    <div class="modal fade" id="YoutubeModal" tabindex="-1" role="dialog" aria-labelledby="YoutubeModalLabel"  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="youtube_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 -->

wwwroot/assets/javascript/custom/dashboard.js

@@ -99,3 +99,126 @@ function youtubeSubHtml(item) {
 
     return html;
 }
+
+
+function youtubeBtnClick(obj) {
+    var dataUid = obj.getAttribute('data-uid');
+
+
+    var trList = $("#youtube_layout").find(".masonry-item");
+    $.each(trList, function (index, item) {
+        $(item).remove();
+    });
+
+    var formData = {
+        youtube_uid: dataUid
+    }
+
+    $.ajax({
+        url: "/Api/youtubeData",
+        type: "post",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+            if (data.ret == "yes") {
+                var obj = data.data;
+
+                var html = "";
+
+                $.each(obj.youtubeDetails, function (index, item) {
+                    html += youtubeModalHtml(item);
+                });
+
+                $('#youtube_layout').append(html);
+
+                $('#YoutubeModal').modal('toggle');
+
+
+            } else {
+                alert(data.message);
+
+                if (data.err_code == "99999") {
+                    location.href = "/Root/Login";
+                }
+            }
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert('網路或伺服器發生錯誤，請稍後重試!');
+        }
+    });
+}
+
+function youtubeModalHtml(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 += "               <h6 class=\"card-subtitle text-muted\"> " + formatDate(publishdate, 'yyyy-MM-dd HH:mm:ss') + " </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.youtubeDetail_viewCount) + " </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.youtubeDetail_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.youtubeDetail_commentCount) + " </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 formatDate(inputDate, format) {
+    if (!inputDate) return '';
+
+    const padZero = (value) => (value < 10 ? `0${value}` : `${value}`);
+    const parts = {
+        yyyy: inputDate.getFullYear(),
+        MM: padZero(inputDate.getMonth() + 1),
+        dd: padZero(inputDate.getDate()),
+        HH: padZero(inputDate.getHours()),
+        hh: padZero(inputDate.getHours() > 12 ? inputDate.getHours() - 12 : inputDate.getHours()),
+        mm: padZero(inputDate.getMinutes()),
+        ss: padZero(inputDate.getSeconds()),
+        tt: inputDate.getHours() < 12 ? 'AM' : 'PM'
+    };
+
+    return format.replace(/yyyy|MM|dd|HH|hh|mm|ss|tt/g, (match) => parts[match]);
+}