[Frontend][全域功能] YT-Popalert引用 | Loading 程序建置 | 電梯訂閱 Loading 程序套上 | Login Not Auth 跳回 Niagara 登入畫面

Frontend/_sysElevator.html

@@ -981,7 +981,7 @@
             subDeviceSetEleManNotSerFloor(master);
         });
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
-
+        
             let devNumArr = data.map(x => { return { devNum: x.device_number_full, priority: allDevList.filter(y => y.device_number == x.device_number_full)[0]?.priority } }).DistinctBy("devNum");
             devNumArr = devNumArr.oSort("priority");
             $.each(devNumArr, (idx, devObj) => {
@@ -1032,6 +1032,7 @@
             })
 
             reloadEleManTable(setEleManTabDataFromBaja());
+            $(loadEle).Loading("close");
         })
     }
 

Frontend/css/site.css

@@ -103,6 +103,7 @@ input.toggle:checked {
 .loading-bg {
     background: #0000009c;
     background-repeat: no-repeat;
+    opacity:0;
     width: 100%;
     height: 100vh;
     position: fixed;

Frontend/css/yourteam/plugins/yt-alert/ytpop-alert.css

@@ -0,0 +1,26 @@
+.alert[id^=success-alert] {
+    background-color: #3AB14D;
+}
+
+.alert[id^=danger-alert] {
+    background-color: #dc3545;
+}
+
+.alert[id^=tip-alert] {
+    background-color: #498ae5;
+}
+
+.yt-alert {
+    display: none;
+    position: fixed;
+    z-index: 3000;
+    bottom: 2%;
+    right: 2%;
+     width: 300px;
+    background-color: #dc3545;
+    color: white;
+    border-radius:5px;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+}

Frontend/index.html

@@ -33,10 +33,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
     <!-- Font Awesome -->
     <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
     <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
     <link rel="stylesheet" href="css/site.css" />
     <link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
+    <link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
     <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
 </head>
 <!-- BEGIN Body -->
@@ -1496,7 +1498,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" name ="topFunBtn" class="no-arrow text-center"
+                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center"
                                data-page="operation">
                                 <i class="fal fa-server fa-2x"></i><br>運維管理
                             </a>
@@ -2528,7 +2530,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
     <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
 
-    
+
 
     <!--Bajascript-->
     <script src="js/bajascript/bscriptReq.js"></script>
@@ -2537,6 +2539,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
     <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
     <script src="js/forge/forgemodel.js"></script>
+    <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
 
 
     <script type='text/javascript'>
@@ -2549,22 +2552,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="js/bajascript/require.config.js"></script>
     <script src="js/FileSaver.js"></script>
 
-    
+
 
     <script>
-        
+
         /*$('#js-page-content').smartPanel();*/
         var jwt = localStorage.getItem("JWT-Authorization");
         var pageAct = {};  //記錄全頁面已選擇項目
 
-        if (!jwt) {
-            location.href = "prelogin";
-        }
-
         if (location.href.indexOf("ord") != -1) {
             location.href = "/file/index.html"
         }
-        pageLoading(true)
+
+        // 執行初步 Loading
+        var loadEle = pageLoading();
         $(function () {
             // 二次引用 jquery.js
             // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
@@ -2613,9 +2614,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
          * */
         function loadedJsPack() {
             loadEvent();
-
+            if (!jwt) {
-            myBaja = new MyBaja();
+                myBaja = new MyBaja();
-            myBaja.setMyUserAccount(Login);
+                myBaja.setMyUserAccount(Login);
+            } else {
+                isValidLogin();
+            }
+            $(loadEle).Loading("close");
         }
 
         /**
@@ -2704,6 +2709,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         // page loaded callback
         function loadCallback() {
+            
             initTabsByEle();
             resetYTTooltip();
         }
@@ -2711,7 +2717,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         // 事件先行讀取
         function loadEvent() {
             onEvent("click", "[name=topFunBtn]", function () {
-                _ytTabInited = []
+                let needLoad = ["sysElevator"];
+                _ytTabInited = [];
                 let page = $(this).data("page");
 
                 if (page != "systemMonitor") {
@@ -2719,12 +2726,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     pageAct.sysMainTag = null;
                 }
                 $.each(tolSubList, (idx, sub) => {
-                    console.log("sub",sub,idx)
+                    console.log("sub", sub, idx)
                     sub.unsubscribeAll();
                     sub.detach();
                 })
                 
                 $("#app").load(`_${page}.html`, loadCallback);
+
+                // 需要 Loading 的頁面
+                if (needLoad.indexOf(page) != -1) {
+                    $(loadEle).Loading("start", "資料讀取中...");
+                }
             })
 
             onEvent("active:change", "#sysMonBtnList", function (e, actEle) {
@@ -2746,17 +2758,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         }
 
-        function pageLoading(isShow = true) {
+        /**
-            if (isShow) {
+        * 頁面 Loading 建立
-                if ($("body .loading-bg").length == 0) {
+        * */
-                    let background = $(`<div class="loading-bg"></div>`)
+        function pageLoading(text = null) {
-                    $("body").append(background);
+            let background = $(`<div class="loading-bg"></div>`);
-                } else {
+            let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
-                    $("body .loading-bg").show();
+            $(background)[0]._aleObj = aleObj;
-                }
+            $("body").css("overflow", "hidden");
-            } else {
+            $("body .page-content-wrapper").append(background);
-                $("body .loading-bg").hide();
+            $(background).animate({ opacity: 1 }, 300);
-            }
+            return background;
         }
 
         // 登入驗證
@@ -2781,6 +2793,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 success: function (rel) {
                     if (rel.code != "0000") {
                         toast_error(rel.msg || "系統內部發生錯誤，請聯絡系統管理員");
+                        location.href = "/login";
                         return;
                     }
                     else {
@@ -2802,7 +2815,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         // Card - 基本資料 Table
         function drawInfoTabBlo(devGuid) {
-            
+
             let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
             let tbody = tabEle.append("<tbody>");
             let columnNames = ["設備編號", "設備名稱"];
@@ -2836,7 +2849,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         function drawErrRecTabBlo() {
             let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                            </table>`
+                                </table>`
             return strHtml;
         }
 
@@ -2844,7 +2857,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         function drawOpeRecTabBlo() {
             let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                            </table>`
+                                </table>`
             return strHtml;
         }
 
@@ -2857,37 +2870,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 $(ele).YTTooltip({
                     html: `<div class="card m-1 border device-wrap">
 
-                                <div class="card-header p-3">
+                                    <div class="card-header p-3">
-
-                                    <div class="position-absolute w-50" style="word-break: break-all;">
-                                        <label class="m-0 mt-2">${devName}</label>
-                                    </div>
-                                    <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
-                                        <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
-                                        <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
-                                        <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
-                                        <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
-                                        <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
-                                    </div>
-                                </div>
-                                <div class="card-body p-2 tab-content">
-
-                                    <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
-                                        ${drawStateTabBlo(devNum)}
-                                    </div>
-                                    <div id="info" data-tabname="cardTab" data-tabrole="child">
-                                        ${drawInfoTabBlo(devGuid)}
-                                    </div>
-                                    <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                        ${drawErrRecTabBlo()}
-                                    </div>
-                                    <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                        ${drawOpeRecTabBlo()}
-                                    </div>
-
 
+                                        <div class="position-absolute w-50" style="word-break: break-all;">
+                                            <label class="m-0 mt-2">${devName}</label>
                                         </div>
-                                    </div>`,
+                                        <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                            <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                            <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
+                                            <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
+                                            <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
+                                            <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body p-2 tab-content">
+
+                                        <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawStateTabBlo(devNum)}
+                                        </div>
+                                        <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawInfoTabBlo(devGuid)}
+                                        </div>
+                                        <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawErrRecTabBlo()}
+                                        </div>
+                                        <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawOpeRecTabBlo()}
+                                        </div>
+
+
+                                            </div>
+                                        </div>`,
                     group: "device",
                     onShow: function (tooltipEle, oriEle) {
                         var tab = new YT.Tab({ tabName: "cardTab" })
@@ -2903,7 +2916,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         // Card - 運維紀錄 Table
         function loadOpeRecTable(devGuid) {
-            
+
             let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
             let tag = "#opeRecTable";
 
@@ -3022,9 +3035,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             })
         }
 
-            //==============================================================================
+        //==============================================================================
-            //                       ↑  系統監控 - 共用 Function ↑
+        //                       ↑  系統監控 - 共用 Function ↑
-            //==============================================================================
+        //==============================================================================
     </script>
 
 </body>

Frontend/js/site.js

@@ -19,9 +19,66 @@ $.fn.outerHtml = function () {
     return $(this).prop("outerHTML");
 }
 
+/**
+ * fn 定義 | Loading 操作
+ * @param {any} type - close / start / exceed , exceed => 繼續執行並可切換文字
+ * @param {any} text - 右下角 Alert 文字
+ */
+$.fn.Loading = function (type = "close",text) {
+    let ele = this;
+    let aleObj = $(this)[0]._aleObj;
+
+    function closeLoading() {
+        $("body").css("overflow", "auto");
+        $(aleObj.ele).YTAlert().hide();
+        $(ele).animate({ opacity: 0 }, 300, () => {
+            $(ele).hide();
+        })
+    }
+    function showLoading() {
+        $("body").css("overflow", "hidden");
+        let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+        $(ele)[0]._aleObj = aleObj;
+        $(ele).show();
+        $(ele).animate({ opacity: 1 }, 300); 
+        
+        $(aleObj.ele).YTAlert().text(text);
+    }
+    if (type == "close") {
+        closeLoading();
+    } else if (type == "exceed") {
+        $(aleObj.ele).YTAlert().text(text);
+    } else if (type == "start") {
+        showLoading();
+    }
+    
+    return $(this);
+}
+
+$.fn.YTAlert = function () {
+    let th = { element: this };
+    th.hide = function (delay = 0) {
+        let obj = this;
+        setTimeout(function () {
+            $(obj.element).fadeOut(300);
+            alertIdArray.splice($.inArray($(obj.element).prop("id"), alertIdArray), 1);
+            setTimeout(function () {
+                $(obj.element).remove();
+            }, 1000);
+        }, delay);
+    }
+
+    th.text = function (text) {
+        let obj = this;
+        let id = $(obj.element).prop("id").split("tip-alert-")[1];
+        $(`#alert-text-${id}`).text(text);
+    }
+    return th;
+}
+
 /**
  * 設置 bootstrap dropdown 為下拉選單 
- * @param {any} menuEle .dropdown-menu element
+ * @param {any} menuEle - .dropdown-menu element
  */
 function setDropdownItem(menuEle) {
     if ($(menuEle).find(".dropdown-item.active").length == 0) {
@@ -52,6 +109,11 @@ function defDev(obj) {
     obj.src = defSrc;
 }
 
+/**
+ * jquery datatable - ajax send data reset
+ * @param {any} table
+ * @param {any} sendData
+ */
 function dtAjaxResetSendData(table,sendData) {
     table.context[0].ajax.data = function (d) {
         d = sendData;
@@ -59,6 +121,7 @@ function dtAjaxResetSendData(table,sendData) {
     }
 }
 
+
 /**
  * element 建造 
  * @param {any} text
@@ -108,6 +171,9 @@ function creOption(text = null, value = null, data = {}, attr = {}, cls = [], na
     return creEle("option", text, id, name, cls, data, attr);
 }
 
+/**
+ * 根據該棟建築底下的'所有'電梯執行緒物件
+ * */
 class ElevatorHandler {
     constructor(ele, option = {}) {
         this.ele = ele;
@@ -124,9 +190,11 @@ class ElevatorHandler {
         this.init();
     }
 
+    // 所有電梯初始化
     init = function () {
         this.setTabWra();
         this.setTabFloor();
+        // 若已有每個設備的所在樓層，則預設到該樓層位置
         if (Object.keys(this.curElevFloor).length != 0) { 
             $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
                 this.setElevFloor(elevKey,this.curElevFloor[elevKey]);
@@ -158,16 +226,16 @@ class ElevatorHandler {
      
         for (let e = 1; e <= _elevators.length + 2; e++) {
             let th = creEle("th");
-            th.css({ "width": `${_w}px`, "height": `${_h}px` });
+            th.css({ "width": `${_w}px`, "height": `${_h}px` ,"position":"relative"});
             if (e != 1 && e != _elevators.length + 2) {
                 let elevId = _elevators[e - 2]?.id;
                 // 電梯方框
                 let span = creEle("span", null, "elevator-item-" + (elevId), null, ["elevator-item"]);
                 let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
                 let spanDown = creEle("span", null, null, null, ["elevator-item-todown"]);
-                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
+                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`,"left":"1.5px", "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
-                spanUp.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
+                spanUp.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "left": "1.5px", "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`})
-                spanDown.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,"top":`${1.5 + (_h-3) / 2}px`})
+                spanDown.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "left": "1.5px", "transition":`transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,"top":`${1.5 + (_h-3) / 2}px`})
                 th.append(spanUp);
                 th.append(span);
                 th.append(spanDown);
@@ -221,26 +289,18 @@ class ElevatorHandler {
 
     }
 
+    // 設置某個電梯到某個樓層
     setElevFloor = function (elevId, floId) {
         let curFloId = this.curElevFloor[elevId];
         let curSort = this.floors.filter(x => x.id == curFloId).map(x => x.sort)[0];
         let tarSort = this.floors.filter(x => x.id == floId).map(x => x.sort)[0];
         let gapFloor = tarSort - curSort;
         let cssEle = [$(`#elevator-item-${elevId}`)[0], $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0], $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0]]
-        clearTimeout(this.setTimeout); 
-        console.log("123",this.movStatus)
         if (this.movStatus[elevId] != 0) { 
             $(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0, 0, 0.62, 1) 0s`);
         }
-        //if (gapFloor < 0) {
+        clearTimeout(this.setTimeout);
-        //    this.movStatus[elevId] = 2;
-        //} else if (gapFloor > 0) {
-        //    this.movStatus[elevId] = 1;
-        //} else {
-        //    this.movStatus[elevId] = 0;
-        //}
         this.setTimeout = setTimeout(() => {
-            /*this.movStatus[elevId] = 0;*/
             $(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`);
             this.setEleUpDownStyle(elevId);
         }, (1 / this.speed * Math.abs(gapFloor)) * 1000)
@@ -250,10 +310,12 @@ class ElevatorHandler {
         $(cssEle).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
     }
 
+    // 設定現在電梯狀態 (往上/往下/停止)
     setEleMovStatus = function (elevId,status) {
         this.movStatus[elevId] = status;
     }
 
+    // 電梯方框 往上或往下閃爍
     setEleUpDownStyle = function (elevId) {
         if (this.movStatus[elevId] == 1) {
             $(`#elevator-item-${elevId}`).next("span.elevator-item-todown").removeClass("light-flash-c-bd")
@@ -269,10 +331,12 @@ class ElevatorHandler {
         }
     }
 
+    // 設定現在某個電梯所在樓層
     setCurElevFloor = function (elevId,floId) {
         this.curElevFloor[elevId] = floId;
     }
 
+    // 重新繪製
     redraw = function () {
         $(this.ele).empty();
         this.setTabFloor();

Frontend/js/yourteam/plugins/yt-alert/ytpop-alert.js

@@ -0,0 +1,120 @@
+
+alertIdArray = [];
+window.YT = typeof YT == "undefined" ? {} : YT;
+window.YT.Alert = { Success: null, Error: null, Tip: null };
+
+
+YT.Alert.Success = function (text) {
+    let ranId = Math.floor(Math.random() * 100000);
+    $("body").append(`<div id='success-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
+                        <span class="material-icons fs-3">check_circle</span><strong>${text}</strong></div>`)
+
+    //紀錄上一筆出現的alert
+    alertIdArray.push("success-alert-" + ranId)
+    alertIdArray.length > 2 ? alertIdArray.shift() : ""
+    $("#success-alert-" + ranId).fadeIn(300);
+    //判斷上一筆是否還存在頁面中
+    if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
+        //存在的話下一個alert出現在前一個alert上面
+        let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
+        $("#" + alertIdArray[1]).css("bottom", newAlertWidth);
+    }
+    $("#success-alert-" + ranId).click(function () {
+        $("#success-alert-" + ranId).fadeOut(300);
+    })
+
+    setTimeout(function () { $("#success-alert-" + ranId).fadeOut(300); }, 6000);
+    setTimeout(function () {
+        $("#success-alert-" + ranId).remove();
+        alertIdArray.splice($.inArray("#success-alert-" + ranId, alertIdArray), 1);
+    }, 7000);
+
+}
+
+YT.Alert.Error = function (text) {
+    let ranId = Math.floor(Math.random() * 100000);
+    $("body").append(`<div id='danger-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
+                    <span class="material-icons fs-3">error</span><strong>${text}</strong></div>`)
+
+    alertIdArray.push("danger-alert-" + ranId);
+    alertIdArray.length > 2 ? alertIdArray.shift() : ""
+    $("#danger-alert-" + ranId).fadeIn(300);
+    if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
+        let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
+        $("#" + alertIdArray[1]).css("bottom", newAlertWidth);
+    }
+    $("#danger-alert-" + ranId).click(function () {
+        $("#danger-alert-" + ranId).fadeOut(300);
+    })
+
+    setTimeout(function () {
+        $("#danger-alert-" + ranId).fadeOut(300);
+        alertIdArray.splice($.inArray("#danger-alert-" + ranId, alertIdArray), 1);
+    }, 6000);
+    setTimeout(function () { $("#danger-alert-" + ranId).remove(); }, 7000);
+
+}
+
+YT.Alert.Tip = function (text, type = null, color = null) {
+    let ranId = Math.floor(Math.random() * 100000);
+    $("body").append(`<div id='tip-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
+                    <span class="material-icons fs-3">error</span><strong id="alert-text-${ranId}">${text}</strong></div>`)
+
+    alertIdArray.push("tip-alert-" + ranId);
+    alertIdArray.length > 2 ? alertIdArray.shift() : ""
+    if (color != null) {
+        $("#tip-alert-" + ranId).css("background-color", color);
+    }
+
+    if (type == null) {
+        $("#tip-alert-" + ranId).fadeIn(300);
+        if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
+            let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
+            $("#" + alertIdArray[1]).css("bottom", newAlertWidth);
+        }
+        $("#tip-alert-" + ranId).click(function () {
+            $("#tip-alert-" + ranId).fadeOut(300);
+        })
+        setTimeout(function () {
+            $("#tip-alert-" + ranId).fadeOut(300);
+            alertIdArray.splice($.inArray("#tip-alert-" + ranId, alertIdArray), 1);
+        }, 6000);
+
+        setTimeout(function () { $("#tip-alert-" + ranId).remove(); }, 7000);
+    } else if (type == "show") {
+        $("#tip-alert-" + ranId).fadeIn(300);
+    } else if (type == "hide") {
+        $("#tip-alert-" + ranId).fadeOut(300);
+        alertIdArray.splice($.inArray("#tip-alert-" + ranId, alertIdArray), 1);
+        setTimeout(function () {
+            $("#tip-alert-" + ranId).remove();
+        }, 1000);
+    }
+    return { id: "#tip-alert-" + ranId, ele: $("#tip-alert-" + ranId) };
+
+}
+
+
+//因非使用 Require 引用，$.fn 被二次引用 jquery.js 吃掉，則移至 site.js
+
+//$.fn.YTAlert = function () {
+//    let th = { element: this };
+//    th.hide = function (delay = 0) {
+//        let obj = this;
+//        setTimeout(function () {
+//            $(obj.element).fadeOut(300);
+//            alertIdArray.splice($.inArray($(obj.element).prop("id"), alertIdArray), 1);
+//            setTimeout(function () {
+//                $(obj.element).remove();
+//            }, 1000);
+//        }, delay);
+//    }
+
+//    th.text = function (text) {
+//        let obj = this;
+//        let id = $(obj.element).prop("id").split("tip-alert-")[1];
+//        $(`#alert-text-${id}`).text(text);
+//    }
+//    return th;
+//}
+

Frontend/js/yourteam/yourteam.ajax.class.js

@@ -58,7 +58,8 @@ class Ajax {
     */
     successFunction = function (data,callback) {
         if (data && data.unauthorized == 401) {
-            location.href = "login.html";
+            localStorage.removeItem("JWT-Authorization");
+            location.href = "/login";
         }
         if (callback) {
             callback(data);
@@ -79,6 +80,7 @@ class Ajax {
             window.alert("執行失敗，請聯絡客服人員。");
         } else if (xhr.status == "401") {
             window.alert("登入時間超時，請重新登入！");
+            localStorage.removeItem("JWT-Authorization");
             location.href = "~/Login/Login";
         }
     }