[Frontend] yt-tab debug | yt-tooltip option 增加group ，group中只有一個tooltip顯示 | ajax succesFunction 前先判斷是否有授權token | datatable.js 註解不需要程序 | dropdown select item 簡易封裝(具有下拉選單功能) | 全域 onEvent 優化 | toastr 套件更新及引用

Frontend/_sysMonAll.html

@@ -5,8 +5,8 @@
 </style>
 
 <div class="row">
-    <div class="col-sm-12 col-xl-5">
+    <div class="col-sm-12 col-xl-5" id="floDevList">
-        <div class="d-flex justify-content-start mb-6">
+        <!--<div class="d-flex justify-content-start mb-6">
             <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
             <div id="floor19" class="mr-5 cur-poi">
                 <span class="status status-success d-inline-block">
@@ -32,7 +32,7 @@
                     <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
                 </span> 21F 電錶02
             </div>
-        </div>
+        </div>-->
 
     </div>
     <div class="col-sm-12 col-xl-7">
@@ -51,9 +51,41 @@
 <script>
 
     $(function () {
-        initPopover();
+        getFloDevList();
     })
 
+    function getFloDevList() {
+        let url = baseApiUrl + "/api/Device/GetDeviceList";
+        let sendData = {
+            main_system_tag: pageAct.sysMainTag,
+            building_tag: pageAct.buiTag,
+            floor_tag: pageAct.floTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                let strHtml = ``;
+                $.each(res.data, (index, floObj) => {
+                    strHtml += "<div class='d-flex justify-content-start mb-6'>"
+                    strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`
+
+                    $.each(floObj.device_list, (index2, devObj) => {
+                        strHtml += `<div name="devItem" data-id="${devObj.device_guid}" class="mr-5 cur-poi">
+                                        <span class="status status-success d-inline-block">
+                                            <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
+                                        </span> ${devObj.full_name}
+                                    </div>`;
+                    })
+                    strHtml += "</div>"
+                })
+                $("#floDevList").append(strHtml);
+                initPopover();
+            }
+        }, null, "POST").send();
+    }
+
     function drawStateTabBlo() {
         let strHtml = `<table class="table table-bordered table-striped text-center m-0">
                             <tbody>
@@ -174,7 +206,7 @@
     }
 
     function initPopover() {
-        $("#floor19").YTTooltip({
+        $("[name=devItem]").YTTooltip({
             html: `<div class="card m-1 border device-wrap">
                                     <div class="card-header p-2 px-3">
                                         <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
@@ -202,6 +234,7 @@
 
                                     </div>
                                 </div>`,
+            group:"device",
             onShow: function () {
                 var tab = new YT.Tab({ tabName: "cardTab" })
                 loadOpeRecTable();

Frontend/_systemMonitor.html

@@ -6,10 +6,8 @@
 <div class="container-fluid">
     <div class="row bg-dark">
         <h1 class="p-2 mx-5 mb-0">電錶系統</h1>
-        <div class="btn-group my-2">
+        <div class="btn-group my-2" id="floList">
-            <button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="all">總覽</button>
+            
-            <button name="floBtn" data-id="19" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="19">19 F</button>
-            <button name="floBtn" data-id="21" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="21">21 F</button>
         </div>
 
     </div>
@@ -19,20 +17,45 @@
 </main>
 
 <script>
-   
+    var floList = [];
-    $("#js-page-content").load("_sysMonAll.html",loadCallback);
 
     $(function () {
+        getFloList();
+    })
 
-        onEvent("click", "[name=floBtn]", function () {
+    onEvent("yt:tab:change", "[name=floBtn]", function () {
+        pageAct.floTag = $(this).data("id");
         if ($(this).data("id") == "all") {
+            pageAct.floTag = null;
             $("#js-page-content").load("_sysMonAll.html", loadCallback);
         } else {
             $("#js-page-content").load("_sysMonFloor.html", loadCallback);
         }
     })
+
+    onEvent("change", "#buiList", function (e, actEle) {
+        getFloList();
     })
 
 
+    function getFloList() {
+        let url = baseApiUrl + "/api/Device/GetFloor";
+        let sendData = { building_tag: pageAct.buiTag };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="all">總覽</button>`;
+                $.each(res.data, (index, floObj) => {
+                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
+                })
+                $("#floList").html(strHtml);
+                floList = res.data;
+                
+                var ytTab = new YT.Tab({ tabName: "floor" })
+            }
+        }, null, "POST").send();
+    }
     
 </script>

Frontend/index.html

@@ -25,6 +25,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
     <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
     <link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
+    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
     <!-- Place favicon.ico in the root directory -->
     <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
@@ -1114,19 +1115,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     </div>
 
                     <div class="dropdown">
-                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop" data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
-                            總公司
+                            
                         </a>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                        <div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
-                            <a class="dropdown-item" href="#">分公司一</a>
+                           
-                            <a class="dropdown-item" href="#">分公司二</a>
-                            <a class="dropdown-item" href="#">分公司三</a>
                         </div>
                     </div>
 
                     <div class="ml-auto d-flex">
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" name="dasBoaBtn" class="text-center">
+                            <a href="javascript:;" name="topFunBtn" data-page="dashboard" class="text-center">
                                 <i class="fal fa-home fa-2x"></i><br>首頁
                             </a>
                             <!--<div class="dropdown-menu">
@@ -1139,12 +1138,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <i class="fal fa-tv fa-2x"></i><br>系統監控
                             </a>
-                            <div class="dropdown-menu" id="sysMonBtnList">
+                            <div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
-                                <button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
+                                <!--<button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
                                 <button class="dropdown-item" type="button" name="sysMonBtn">照明系統</button>
                                 <button class="dropdown-item" type="button" name="sysMonBtn">電梯系統</button>
                                 <button class="dropdown-item" type="button" name="sysMonBtn">環境感測</button>
-                                <button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>-->
                             </div>
                         </div>
                         <div class="btn-group mx-4">
@@ -2055,18 +2054,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="lib/statistics/flot/flot.bundle.js"></script>
     <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
     <script src="lib/datagrid/datatables/datatables.bundle.js"></script>
+    <script src="lib/notifications/toastr/toastr.min.js"></script>
     <script src="js/yourteam/yourteam.ajax.class.js"></script>
     <script src="js/yourteam/yourteam.jquery.datatables.js"></script>
     <script src="js/yourteam/yourteam.utility.class.js"></script>
     <script src="js/yourteam/plugins/yt-tooltip/yt-tooltip.js"></script>
     <script src="js/yourteam/plugins/yt-tab/yt-tab.js"></script>
+    <script src="js/toast.js"></script>
     <script src="js/style.js"></script>
-    <script src="js/main.js"></script>
+    <script src="js/site.js"></script>
     <script src="js/init.js"></script>
     <script>
-        let user = localStorage.getItem("JWT-Authorization");
+        var jwt = localStorage.getItem("JWT-Authorization");
+        var pageAct = {};  //記錄全頁面已選擇項目
         
-        if (user) {
+        if (jwt) {
             $("#app").load("_dashboard.html", loadCallback);
         } else {
             location.href = "login.html";
@@ -2074,15 +2076,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         $(function () {
             getSysMonBtnList();
+            getBuiList();
+            /*setBuiAct();*/
         })
         
-        onEvent("click", "button[name^=sysMonBtn]", function () {
+
-            $("#app").load("_systemMonitor.html", loadCallback);
+        onEvent("click", "[name=topFunBtn]", function () {
-        })
+            let page = $(this).data("page");
-        onEvent("click", "button[name=dasBoaBtn]", function () {
+
-            $("#app").load("_dashboard.html", loadCallback);
+            if (page != "systemMonitor") {
+                $("#sysMonBtnList .dropdown-item").removeClass("active");
+                pageAct.sysMainTag = null;
+            }
+
+            $("#app").load(`_${page}.html`, loadCallback);
         })
         
+        onEvent("active:change", "#sysMonBtnList", function (e, actEle) {
+            if (actEle) {
+                pageAct.sysMainTag = $(actEle).prop("id").split("mainSysBtn")[1];
+            }
+            $(this).trigger("change");
+        })
+
+        onEvent("active:change", "#buiList", function (e, actEle) {
+            if (actEle) {
+                pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
+            }
+            $(this).trigger("change");
+        })
         function loadCallback() {
             initTabsByEle();
             resetYTTooltip();
@@ -2090,12 +2112,34 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         function getSysMonBtnList() {
             let url = baseApiUrl + "/api/Device/GetMainSub";
-            ytAjax = new YourTeam.Ajax(url, null, function (data) {
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
-                console.log(data)
+                if (!res || res.code != "0000" || !res.data) {
-                /*sysMonBtnList*/
-            },null,"POST").send();
                     
+                } else {
+                    let strHtml = ``;
+                    $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
+                        strHtml += `<button id="mainSysBtn${mainSysObj.main_system_tag}" class="dropdown-item" type="button" data-page="systemMonitor" name="topFunBtn">${mainSysObj.full_name}</button>`;
+                    })
+                    $("#sysMonBtnList").append(strHtml);
                 }
+            }, null, "POST").send();
+        }
+
+        function getBuiList() {
+            let url = baseApiUrl + "/api/Device/GetBuild";
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+
+                } else {
+                    let strHtml = ``;
+                    $.each(res.data, (index, buiObj) => {
+                        strHtml += `<a id="buiBtn${buiObj.building_tag}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
+                    })
+                    $("#buiList").append(strHtml).droSetItem();  //droSetItem 預設第一筆 active
+                }
+            }, null, "POST").send();
+        }
+
     </script>
 </body>
 <!-- END Body -->

Frontend/js/site.js

@@ -1 +1,35 @@
-
+$(function () {
+    $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
+        setDropdownItem(value)
+    })
+
+})
+
+
+$.fn.droSetItem = function () {
+    setDropdownItem(this);
+    return this;
+}
+
+
+function setDropdownItem(menuEle) {
+    if ($(menuEle).find(".dropdown-item.active").length == 0) {
+        $(menuEle).find(".dropdown-item").first().addClass("active");
+    }
+
+    let actText = $(menuEle).find(".dropdown-item.active").first().text();
+    let actEleId = $(menuEle).prop("id");
+    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
+    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
+}
+
+onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
+    $(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
+    $(this).addClass("active");
+    setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
+})
+
+function defDev(obj) {
+    let defSrc = 'img/defdev.png';
+    obj.src = defSrc;
+}

Frontend/js/style.js

@@ -1339,7 +1339,8 @@ async function download(url, filename) {
 }
 
 function onEvent(type, selector, callback) {
-    $("body").on(type, selector, callback)
+    $("body").off(type, selector);
+    $("body").on(type, selector, callback);
 }
 
 /**

Frontend/js/yourteam/plugins/yt-tab/yt-tab.js

@@ -32,9 +32,14 @@ class YourTeamTab {
     }
 
     init = function () {
+        if (_ytTabInited.indexOf(this.tabName) != -1) {
+            _ytTabInited.splice($.inArray(this.tabName, _ytTabInited), 1);
+            $(`[data-tabname=${this.tabName}][data-target]`).off("click").unbind("click");
+        }
         this.event();
         $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
-        $(`[data-tabname=${this.tabName}][data-target]`).first().click();
+        $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click","fromInit");
+        _ytTabInited.push(this.tabName);
     }
 
     event = function () {
@@ -43,11 +48,13 @@ class YourTeamTab {
         // example : 
         // <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
         // <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
-        $("body").on("click", `[data-tabname=${this.tabName}][data-target]`, function () {
+        $(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e, arg) {
+            console.log(e)
             let target = $(this).data("target");
             let obj = this;
             $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active")
             $(obj).addClass("active")
+            $(obj).trigger("yt:tab:change")
             let tabName = $(target).data("tabname");
             if (tabName) {
                 if ($(target).data("tabrole") == "child") {

Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js

@@ -30,6 +30,7 @@ $.fn.YTTooltip = function (option) {
             toggle: option.toggle || "click",
             hideTooltipEvent: hideTooltipEvent,
             onShow: option.onShow || null,
+            group: option.group || null,
         };
 
         if (obj.toggle == "hover") {
@@ -42,7 +43,6 @@ $.fn.YTTooltip = function (option) {
             //顯示 tooltip 程序 及 存入已顯示紀錄arr
             if (!tooId || obj.isShowArr.indexOf(tooId) == -1) {
                 let ranId = Math.floor((Math.random() * (9999999 - 1000000)) + 1000000);
-                obj.isShowArr.push(ranId);
                 let clone = $(obj.html);
                 //body 元素 高寬
                 let bodyWidth = $("body")[0].offsetWidth;
@@ -54,8 +54,20 @@ $.fn.YTTooltip = function (option) {
                 let height = $(this)[0].offsetHeight;
 
                 $(this).data("yttooltipid", ranId);
-                $(clone).attr("id", "yt_tooltip_" + ranId)
+                $(clone).attr("id", "yt_tooltip_" + ranId);
+                if (obj.group) {
+                    $(clone).data("group", obj.group).attr("data-group", obj.group);
+                }
+                //同一 group tooltip 先隱藏 (只顯示一個)
+                if (obj.group) {
+                    $(`body [id^=yt_tooltip_][data-group=${obj.group}]`).each((index, groTooEle) => {
+                        let eleId = $(groTooEle).prop("id").split("yt_tooltip_")[1];
+                        obj.hideTooltipEvent(eleId);
+                    })
+                }
                 $("body").append(clone);
+                //push 已顯示紀錄
+                obj.isShowArr.push(ranId);
                 obj.tooltipDiv = clone;
                 //顯示 tooltip
                 $(clone).css({ "display": display, "position": "absolute" });
@@ -108,13 +120,14 @@ $.fn.YTTooltip = function (option) {
 
 
         function hideTooltipEvent(tooId) {
-            $("#yt_tooltip_" + tooId).hide();
-            setTimeout(function () {
-                if ($("#yt_tooltip_" + tooId).css("display") == "none") {
-                    obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
             $("#yt_tooltip_" + tooId).remove();
-                }
+            obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
-            }, 100)
+            //setTimeout(function () {
+            //    if ($("#yt_tooltip_" + tooId).css("display") == "none") {
+            //        obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
+            //        $("#yt_tooltip_" + tooId).remove();
+            //    }
+            //}, 100)
         }
 
 

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

@@ -27,6 +27,7 @@ class Ajax {
         this.type = type;
         this.dataType = dataType;
         this.sendData = sendData;
+        this.extSuccessFunction = successFunction;
         /*if (successFunction) this.successFunction = successFunction;*/
         if (errorFunction) this.errorFunction = errorFunction;
         return this;
@@ -128,9 +129,9 @@ class Ajax {
         if (sendData) {
             this.sendData = sendData;
         }
-        //if (successFunction) {
+        if (successFunction) {
-        //    this.successFunction = successFunction;
+            this.successFunction = successFunction;
-        //}
+        }
         if (errorFunction) {
             this.errorFunction = errorFunction;
         }
@@ -148,11 +149,11 @@ class Ajax {
                 //processData: false,
 
                 beforeSend: this.beforeSendFunction,
-                success:(data) => this.successFunction(data,successFunction),
+                success: (data) => this.successFunction(data, this.extSuccessFunction),
                 error: this.errorFunction,
                 complete: this.completeFunction,
                 statusCode: {
-                    201: (data) => this.successFunction(data,successFunction),
+                    201: (data) => this.successFunction(data, this.extSuccessFunction),
                 }
             });
         }

Frontend/js/yourteam/yourteam.jquery.datatables.js

@@ -93,17 +93,17 @@ function fnInitJqDataTablesNoData(tag, dataSet = null, columns = null, columnDef
     let time = 0;
     table = $(tag).DataTable(oTable);
     table.on('processing', function (e, settings, processing) {
-        //過100ms的讀取才秀出loading
+        ////過100ms的讀取才秀出loading
-        setTimeout(function () {
+        //setTimeout(function () {
-            time == 1 ? loadingSetting("show", "dtProcessing") : "";
+        //    time == 1 ? loadingSetting("show", "dtProcessing") : "";
-        }, 100);
+        //}, 100);
 
-        if (processing && time == 0) {  //第一次讀取processing = true
+        //if (processing && time == 0) {  //第一次讀取processing = true
-            time = 1;
+        //    time = 1;
-        } else if (!processing && time == 1 ) {   //結束讀取後processing = false
+        //} else if (!processing && time == 1 ) {   //結束讀取後processing = false
-            loadingSetting("hide", "dtProcessing");
+        //    loadingSetting("hide", "dtProcessing");
-            time = 0;
+        //    time = 0;
-        }
+        //}
     })
     table.on('responsive-display', function (e, datatable, row, showHide, update ) {
         table.columns.adjust();
@@ -222,16 +222,16 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
         table = $(tag).DataTable(oTable);
         table.on('processing', function (e, settings, processing) {
             //過100ms的讀取才秀出loading
-            setTimeout(function () {
+            //setTimeout(function () {
-                time == 1 ? loadingSetting("show", "dtProcessing") : "";
+            //    time == 1 ? loadingSetting("show", "dtProcessing") : "";
-            }, 100);
+            //}, 100);
 
-            if (processing && time != 1) {  //第一次讀取processing = true
+            //if (processing && time != 1) {  //第一次讀取processing = true
-                time = 1;
+            //    time = 1;
-            } else if (!processing && time == 1) {  //結束讀取後processing = false
+            //} else if (!processing && time == 1) {  //結束讀取後processing = false
-                loadingSetting("hide", "dtProcessing");
+            //    loadingSetting("hide", "dtProcessing");
-                time = 0;
+            //    time = 0;
-            }
+            //}
         })
     }
     catch (e) {
@@ -369,16 +369,16 @@ function fnInitJqDataTablesServerSideAjax(apiUrl, tag, sendData, columns, column
         console.log($.fn.DataTable.ext.pager)
         table.on('processing', function (e, settings, processing) {
             //過100ms的讀取才秀出loading
-            setTimeout(function () {
+            //setTimeout(function () {
-                time == 1 ? loadingSetting("show", "pageload") : "";
+            //    time == 1 ? loadingSetting("show", "pageload") : "";
-            }, 100);
+            //}, 100);
 
-            if (processing && time == 0) {  //第一次讀取processing = true
+            //if (processing && time == 0) {  //第一次讀取processing = true
-                time = 1;
+            //    time = 1;
-            } else if (!processing && time == 1 && tableStatus != 2){   //結束讀取後processing = false
+            //} else if (!processing && time == 1 && tableStatus != 2){   //結束讀取後processing = false
-                loadingSetting("hide", "pageload");
+            //    loadingSetting("hide", "pageload");
-                time = 0;
+            //    time = 0;
-            }
+            //}
         })
 
         table.on('xhr', function (e, settings, json, xhr) {
@@ -608,15 +608,15 @@ function serverSideExecLimit() {
 
                 //tableStatus = 2 | 已觸發執行，不可接受執行(超出執行條件)  
                 if (tableStatus == 2) {
-                    showAlert("danger", "執行次數過多！")
+                    //showAlert("danger", "執行次數過多！")
-                    loadingSetting("show","dtServerSide");    //出現loading
+                    //loadingSetting("show","dtServerSide");    //出現loading
-                    setTimeout(function () {
+                    //setTimeout(function () {
-                        loadingSetting("hide", "dtServerSide");
+                    //    loadingSetting("hide", "dtServerSide");
-                        pageEventNum = searchEventNum = orderEventNum = 0   //執行次數復歸
+                    //    pageEventNum = searchEventNum = orderEventNum = 0   //執行次數復歸
-                        timeNum = 0  //秒數歸零
+                    //    timeNum = 0  //秒數歸零
-                        tableStatus = 0   //狀態復歸
+                    //    tableStatus = 0   //狀態復歸
-                        clearInterval(calEventTime)   //計數關閉
+                    //    clearInterval(calEventTime)   //計數關閉
-                    }, 5000)
+                    //}, 5000)
                 }
             }
         }

Frontend/lib/notifications/toastr/toastr.js

@@ -1,476 +0,0 @@
-/*
- * Toastr
- * Copyright 2012-2015
- * Authors: John Papa, Hans Fjällemark, and Tim Ferrell.
- * All Rights Reserved.
- * Use, reproduction, distribution, and modification of this code is subject to the terms and
- * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
- *
- * ARIA Support: Greta Krafsig
- *
- * Project: https://github.com/CodeSeven/toastr
- */
-/* global define */
-(function (define) {
-    define(['jquery'], function ($) {
-        return (function () {
-            var $container;
-            var listener;
-            var toastId = 0;
-            var toastType = {
-                error: 'error',
-                info: 'info',
-                success: 'success',
-                warning: 'warning'
-            };
-
-            var toastr = {
-                clear: clear,
-                remove: remove,
-                error: error,
-                getContainer: getContainer,
-                info: info,
-                options: {},
-                subscribe: subscribe,
-                success: success,
-                version: '2.1.4',
-                warning: warning
-            };
-
-            var previousToast;
-
-            return toastr;
-
-            ////////////////
-
-            function error(message, title, optionsOverride) {
-                return notify({
-                    type: toastType.error,
-                    iconClass: getOptions().iconClasses.error,
-                    message: message,
-                    optionsOverride: optionsOverride,
-                    title: title
-                });
-            }
-
-            function getContainer(options, create) {
-                if (!options) { options = getOptions(); }
-                $container = $('#' + options.containerId);
-                if ($container.length) {
-                    return $container;
-                }
-                if (create) {
-                    $container = createContainer(options);
-                }
-                return $container;
-            }
-
-            function info(message, title, optionsOverride) {
-                return notify({
-                    type: toastType.info,
-                    iconClass: getOptions().iconClasses.info,
-                    message: message,
-                    optionsOverride: optionsOverride,
-                    title: title
-                });
-            }
-
-            function subscribe(callback) {
-                listener = callback;
-            }
-
-            function success(message, title, optionsOverride) {
-                return notify({
-                    type: toastType.success,
-                    iconClass: getOptions().iconClasses.success,
-                    message: message,
-                    optionsOverride: optionsOverride,
-                    title: title
-                });
-            }
-
-            function warning(message, title, optionsOverride) {
-                return notify({
-                    type: toastType.warning,
-                    iconClass: getOptions().iconClasses.warning,
-                    message: message,
-                    optionsOverride: optionsOverride,
-                    title: title
-                });
-            }
-
-            function clear($toastElement, clearOptions) {
-                var options = getOptions();
-                if (!$container) { getContainer(options); }
-                if (!clearToast($toastElement, options, clearOptions)) {
-                    clearContainer(options);
-                }
-            }
-
-            function remove($toastElement) {
-                var options = getOptions();
-                if (!$container) { getContainer(options); }
-                if ($toastElement && $(':focus', $toastElement).length === 0) {
-                    removeToast($toastElement);
-                    return;
-                }
-                if ($container.children().length) {
-                    $container.remove();
-                }
-            }
-
-            // internal functions
-
-            function clearContainer (options) {
-                var toastsToClear = $container.children();
-                for (var i = toastsToClear.length - 1; i >= 0; i--) {
-                    clearToast($(toastsToClear[i]), options);
-                }
-            }
-
-            function clearToast ($toastElement, options, clearOptions) {
-                var force = clearOptions && clearOptions.force ? clearOptions.force : false;
-                if ($toastElement && (force || $(':focus', $toastElement).length === 0)) {
-                    $toastElement[options.hideMethod]({
-                        duration: options.hideDuration,
-                        easing: options.hideEasing,
-                        complete: function () { removeToast($toastElement); }
-                    });
-                    return true;
-                }
-                return false;
-            }
-
-            function createContainer(options) {
-                $container = $('<div/>')
-                    .attr('id', options.containerId)
-                    .addClass(options.positionClass);
-
-                $container.appendTo($(options.target));
-                return $container;
-            }
-
-            function getDefaults() {
-                return {
-                    tapToDismiss: true,
-                    toastClass: 'toast',
-                    containerId: 'toast-container',
-                    debug: false,
-
-                    showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
-                    showDuration: 300,
-                    showEasing: 'swing', //swing and linear are built into jQuery
-                    onShown: undefined,
-                    hideMethod: 'fadeOut',
-                    hideDuration: 1000,
-                    hideEasing: 'swing',
-                    onHidden: undefined,
-                    closeMethod: false,
-                    closeDuration: false,
-                    closeEasing: false,
-                    closeOnHover: true,
-
-                    extendedTimeOut: 1000,
-                    iconClasses: {
-                        error: 'toast-error',
-                        info: 'toast-info',
-                        success: 'toast-success',
-                        warning: 'toast-warning'
-                    },
-                    iconClass: 'toast-info',
-                    positionClass: 'toast-top-right',
-                    timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
-                    titleClass: 'toast-title',
-                    messageClass: 'toast-message',
-                    escapeHtml: false,
-                    target: 'body',
-                    closeHtml: '<button type="button">&times;</button>',
-                    closeClass: 'toast-close-button',
-                    newestOnTop: true,
-                    preventDuplicates: false,
-                    progressBar: false,
-                    progressClass: 'toast-progress',
-                    rtl: false
-                };
-            }
-
-            function publish(args) {
-                if (!listener) { return; }
-                listener(args);
-            }
-
-            function notify(map) {
-                var options = getOptions();
-                var iconClass = map.iconClass || options.iconClass;
-
-                if (typeof (map.optionsOverride) !== 'undefined') {
-                    options = $.extend(options, map.optionsOverride);
-                    iconClass = map.optionsOverride.iconClass || iconClass;
-                }
-
-                if (shouldExit(options, map)) { return; }
-
-                toastId++;
-
-                $container = getContainer(options, true);
-
-                var intervalId = null;
-                var $toastElement = $('<div/>');
-                var $titleElement = $('<div/>');
-                var $messageElement = $('<div/>');
-                var $progressElement = $('<div/>');
-                var $closeElement = $(options.closeHtml);
-                var progressBar = {
-                    intervalId: null,
-                    hideEta: null,
-                    maxHideTime: null
-                };
-                var response = {
-                    toastId: toastId,
-                    state: 'visible',
-                    startTime: new Date(),
-                    options: options,
-                    map: map
-                };
-
-                personalizeToast();
-
-                displayToast();
-
-                handleEvents();
-
-                publish(response);
-
-                if (options.debug && console) {
-                    console.log(response);
-                }
-
-                return $toastElement;
-
-                function escapeHtml(source) {
-                    if (source == null) {
-                        source = '';
-                    }
-
-                    return source
-                        .replace(/&/g, '&amp;')
-                        .replace(/"/g, '&quot;')
-                        .replace(/'/g, '&#39;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;');
-                }
-
-                function personalizeToast() {
-                    setIcon();
-                    setTitle();
-                    setMessage();
-                    setCloseButton();
-                    setProgressBar();
-                    setRTL();
-                    setSequence();
-                    setAria();
-                }
-
-                function setAria() {
-                    var ariaValue = '';
-                    switch (map.iconClass) {
-                        case 'toast-success':
-                        case 'toast-info':
-                            ariaValue =  'polite';
-                            break;
-                        default:
-                            ariaValue = 'assertive';
-                    }
-                    $toastElement.attr('aria-live', ariaValue);
-                }
-
-                function handleEvents() {
-                    if (options.closeOnHover) {
-                        $toastElement.hover(stickAround, delayedHideToast);
-                    }
-
-                    if (!options.onclick && options.tapToDismiss) {
-                        $toastElement.click(hideToast);
-                    }
-
-                    if (options.closeButton && $closeElement) {
-                        $closeElement.click(function (event) {
-                            if (event.stopPropagation) {
-                                event.stopPropagation();
-                            } else if (event.cancelBubble !== undefined && event.cancelBubble !== true) {
-                                event.cancelBubble = true;
-                            }
-
-                            if (options.onCloseClick) {
-                                options.onCloseClick(event);
-                            }
-
-                            hideToast(true);
-                        });
-                    }
-
-                    if (options.onclick) {
-                        $toastElement.click(function (event) {
-                            options.onclick(event);
-                            hideToast();
-                        });
-                    }
-                }
-
-                function displayToast() {
-                    $toastElement.hide();
-
-                    $toastElement[options.showMethod](
-                        {duration: options.showDuration, easing: options.showEasing, complete: options.onShown}
-                    );
-
-                    if (options.timeOut > 0) {
-                        intervalId = setTimeout(hideToast, options.timeOut);
-                        progressBar.maxHideTime = parseFloat(options.timeOut);
-                        progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
-                        if (options.progressBar) {
-                            progressBar.intervalId = setInterval(updateProgress, 10);
-                        }
-                    }
-                }
-
-                function setIcon() {
-                    if (map.iconClass) {
-                        $toastElement.addClass(options.toastClass).addClass(iconClass);
-                    }
-                }
-
-                function setSequence() {
-                    if (options.newestOnTop) {
-                        $container.prepend($toastElement);
-                    } else {
-                        $container.append($toastElement);
-                    }
-                }
-
-                function setTitle() {
-                    if (map.title) {
-                        var suffix = map.title;
-                        if (options.escapeHtml) {
-                            suffix = escapeHtml(map.title);
-                        }
-                        $titleElement.append(suffix).addClass(options.titleClass);
-                        $toastElement.append($titleElement);
-                    }
-                }
-
-                function setMessage() {
-                    if (map.message) {
-                        var suffix = map.message;
-                        if (options.escapeHtml) {
-                            suffix = escapeHtml(map.message);
-                        }
-                        $messageElement.append(suffix).addClass(options.messageClass);
-                        $toastElement.append($messageElement);
-                    }
-                }
-
-                function setCloseButton() {
-                    if (options.closeButton) {
-                        $closeElement.addClass(options.closeClass).attr('role', 'button');
-                        $toastElement.prepend($closeElement);
-                    }
-                }
-
-                function setProgressBar() {
-                    if (options.progressBar) {
-                        $progressElement.addClass(options.progressClass);
-                        $toastElement.prepend($progressElement);
-                    }
-                }
-
-                function setRTL() {
-                    if (options.rtl) {
-                        $toastElement.addClass('rtl');
-                    }
-                }
-
-                function shouldExit(options, map) {
-                    if (options.preventDuplicates) {
-                        if (map.message === previousToast) {
-                            return true;
-                        } else {
-                            previousToast = map.message;
-                        }
-                    }
-                    return false;
-                }
-
-                function hideToast(override) {
-                    var method = override && options.closeMethod !== false ? options.closeMethod : options.hideMethod;
-                    var duration = override && options.closeDuration !== false ?
-                        options.closeDuration : options.hideDuration;
-                    var easing = override && options.closeEasing !== false ? options.closeEasing : options.hideEasing;
-                    if ($(':focus', $toastElement).length && !override) {
-                        return;
-                    }
-                    clearTimeout(progressBar.intervalId);
-                    return $toastElement[method]({
-                        duration: duration,
-                        easing: easing,
-                        complete: function () {
-                            removeToast($toastElement);
-                            clearTimeout(intervalId);
-                            if (options.onHidden && response.state !== 'hidden') {
-                                options.onHidden();
-                            }
-                            response.state = 'hidden';
-                            response.endTime = new Date();
-                            publish(response);
-                        }
-                    });
-                }
-
-                function delayedHideToast() {
-                    if (options.timeOut > 0 || options.extendedTimeOut > 0) {
-                        intervalId = setTimeout(hideToast, options.extendedTimeOut);
-                        progressBar.maxHideTime = parseFloat(options.extendedTimeOut);
-                        progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
-                    }
-                }
-
-                function stickAround() {
-                    clearTimeout(intervalId);
-                    progressBar.hideEta = 0;
-                    $toastElement.stop(true, true)[options.showMethod](
-                        {duration: options.showDuration, easing: options.showEasing}
-                    );
-                }
-
-                function updateProgress() {
-                    var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
-                    $progressElement.width(percentage + '%');
-                }
-            }
-
-            function getOptions() {
-                return $.extend({}, getDefaults(), toastr.options);
-            }
-
-            function removeToast($toastElement) {
-                if (!$container) { $container = getContainer(); }
-                if ($toastElement.is(':visible')) {
-                    return;
-                }
-                $toastElement.remove();
-                $toastElement = null;
-                if ($container.children().length === 0) {
-                    $container.remove();
-                    previousToast = undefined;
-                }
-            }
-
-        })();
-    });
-}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
-    if (typeof module !== 'undefined' && module.exports) { //Node
-        module.exports = factory(require('jquery'));
-    } else {
-        window.toastr = factory(window.jQuery);
-    }
-}));

Frontend/login.html

@@ -15,6 +15,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
     <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
     <link rel="stylesheet" media="screen, print" href="lib/page-login-alt.css">
+    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
 
     <!-- Font Awesome -->
     <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
@@ -76,7 +77,7 @@
     <script src="lib/jquery-validation/dist/additional-methods.min.js"></script>
     <script src="lib/jquery-validation/dist/localization/messages_zh_TW.js"></script>
     <script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>
-    <script src="lib/notifications/toastr/toastr.js"></script>
+    <script src="lib/notifications/toastr/toastr.min.js"></script>
     <script src="js/toast.js"></script>
     <script src="js/init.js"></script>
 </body>
@@ -180,15 +181,11 @@
                     
                     //rel = JSON.stringify(rel);
                     if (rel.code != "0000") {
-                        if (rel.code == "9999") {
+                        toast_error(rel.msg || "系統內部發生錯誤，請聯絡系統管理員");
-                            toast_error(rel.msg);
-                        }
-                        else {
-                            toast_ok(rel.msg);
-                        }
                         return;
                     }
                     else {
+                        toast_ok(rel.msg);
                         localStorage.setItem('JWT-Authorization', rel.data.token);
                         location.href = "index.html";
                         return;

FrontendWebApi/ApiControllers/DeviceManageController.cs

@@ -132,7 +132,7 @@ namespace FrontendWebApi.ApiControllers
 
             try
             {
-                var sqlString = $@"select floor_tag, full_name from floor where deleted = 0 and building_tag = @building_tag";
+                var sqlString = $@"select full_name as floor_tag from floor where deleted = 0 and building_tag = @building_tag";
                 var param = new { @building_tag = fd.building_tag };
                 var fl = await backendRepository.GetAllAsync<FloorList>(sqlString, param);
 
@@ -175,17 +175,17 @@ namespace FrontendWebApi.ApiControllers
 
             try
             {
-                var sqlString = $@"select floor_tag, full_name, InitMapName as map_name, floor_map_name + '.svg' as floor_map_name from floor where deleted = 0 and building_tag = @building_tag and full_name = ifnull(@floor_tag, full_name)";
+                var sqlString = $@"select full_name, InitMapName as map_name, floor_map_name + '.svg' as floor_map_name from floor where deleted = 0 and building_tag = @building_tag and full_name = ifnull(@floor_tag, full_name)";
                 var param = new { @building_tag = fd.building_tag, @floor_tag = fd.floor_tag };
                 var fl = await backendRepository.GetAllAsync<FloorList>(sqlString, param);
 
                 foreach (var f in fl)
                 {
                     List<DeviceLists> dl = new List<DeviceLists>();
-                    sqlString = $@"select d.device_guid, d.device_last_name, d.status, d.device_coordinate, dm.device_master_icon
+                    sqlString = $@"select d.device_guid, d.full_name, d.status, d.device_coordinate, dm.device_master_icon
                                    from device d
-                                   left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag and dm.deleted = 0
+                                   left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag
-                                   where deleted = 0 and device_system_tag = @main_system_tag and device_building_tag = @building_tag and device_floor_tag = ifnull(@floor_tag, device_floor_tag)";
+                                   where d.deleted = 0 and d.device_system_tag = @main_system_tag and d.device_building_tag = @building_tag and d.device_floor_tag = ifnull(@floor_tag, d.device_floor_tag)";
                     var dlParam = new { @main_system_tag = fd.main_system_tag, @building_tag = fd.building_tag, @floor_tag = fd.floor_tag };
                     dl = await backendRepository.GetAllAsync<DeviceLists>(sqlString, dlParam);
                     f.device_list = dl;