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

2022-12-02 15:46:37 +08:00 · 2022-12-02 15:46:37 +08:00 · 796a217bcb
commit 796a217bcb
parent 0f25b12fa5
7 changed files with 305 additions and 78 deletions
--- a/Frontend/_sysElevator.html
+++ b/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");
        })
    }

--- a/Frontend/css/site.css
+++ b/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;
--- a/Frontend/css/yourteam/plugins/yt-alert/ytpop-alert.css
+++ b/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;
+}
--- a/Frontend/index.html
+++ b/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();
-
-            myBaja = new MyBaja();
-            myBaja.setMyUserAccount(Login);
+            if (!jwt) {
+                myBaja = new MyBaja();
+                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) {
-                if ($("body .loading-bg").length == 0) {
-                    let background = $(`<div class="loading-bg"></div>`)
-                    $("body").append(background);
-                } else {
-                    $("body .loading-bg").show();
-                }
-            } else {
-                $("body .loading-bg").hide();
-            }
+        /**
+        * 頁面 Loading 建立
+        * */
+        function pageLoading(text = null) {
+            let background = $(`<div class="loading-bg"></div>`);
+            let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+            $(background)[0]._aleObj = aleObj;
+            $("body").css("overflow", "hidden");
+            $("body .page-content-wrapper").append(background);
+            $(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="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="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>`,
+                                        <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>
--- a/Frontend/js/site.js
+++ b/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`})
-                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`})
-                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`})
+                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`, "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`, "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) {
-        //    this.movStatus[elevId] = 2;
-        //} else if (gapFloor > 0) {
-        //    this.movStatus[elevId] = 1;
-        //} else {
-        //    this.movStatus[elevId] = 0;
-        //}
+        clearTimeout(this.setTimeout);
        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();
--- a/Frontend/js/yourteam/plugins/yt-alert/ytpop-alert.js
+++ b/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;
+//}
+
--- a/Frontend/js/yourteam/yourteam.ajax.class.js
+++ b/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";
        }
    }