[前台] 系統監控左方選單根據棟別呈現 | api 取得是否顯示棟別串接 | 前端程序navbar 下拉手刻程序建置 | 點選選單項目切換棟別及系統小類程序建置

Frontend/css/site.css

@@ -81,13 +81,6 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
 .vakata-context .vakata-context-hover > a { background-color: #666666; box-shadow: 0 0 2px #2f2f2f; }
 .vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }
 
-.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
-.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
-.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; }
-.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2rem; position: relative; width: 100%; }
-.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
-.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-light); }
-
 .card-header.p-3.ui-draggable-handle:hover { cursor: move; }
 
 .device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }

Frontend/css/yourteam/plugins/yt-navbar/yt-navbar.css

@@ -0,0 +1,51 @@
+.yt-navbar {
+  overflow-y:auto;
+}
+/* width */
+.yt-navbar::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+.yt-navbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+.yt-navbar::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius:5px;
+}
+
+/* Handle on hover */
+.yt-navbar::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
+.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
+.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; }
+.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2.5rem; position: relative; width: 100%; }
+.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
+.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-light); }
+
+.yt-navbar ul li a[data-nb-node-type=parent]::before {
+  content: "▶";
+  position: absolute;
+  left: 19px;
+  transform:rotate(0deg);
+  transition:0.2s
+}
+
+.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open]::before {
+  transform:rotate(90deg);
+}
+
+.yt-navbar ul li a[data-nb-node-type=parent] ~ ul{
+  display:none;
+  opacity: 0;
+  transition: transform 0.3s;
+  transform: translateY(-5%);
+}
+.yt-navbar ul li a[data-nb-node-type=parent][data-nb-node-status=open] ~ ul{
+  transition: transform 0.3s;
+}

Frontend/js/init.js

@@ -3,14 +3,14 @@
 // var baseImgUrl = "https://localhost:44376"; // 本地開發用
 
 // Mitsubishi
-var baseApiUrl = "http://220.132.206.5:8005"; // production 用
+// var baseApiUrl = "http://220.132.206.5:8005"; // production 用
 var baseImgUrl = "http://220.132.206.5:8053"; // production 用
 
 // WSP
 // var baseApiUrl = "http://192.168.0.136:8005"; // production 用
 // var baseImgUrl = "http://192.168.0.136:8053"; // production 用
 
-// var baseApiUrl = "http://localhost:3604";
+var baseApiUrl = "http://localhost:3604";
 //var baseImgUrl = "http://localhost:8848";
 
 var varRegApiUrl = "/reg/api/";  //註冊API路徑

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

@@ -43,6 +43,7 @@ class YourTeamNavbar {
         this.checkIsOpen();
         $(this.element)[0]._ytNavbar = this;
         this.chkTrigger();
+        this.eventLoad();
     }
 
     checkIsOpen = function () {
@@ -103,13 +104,44 @@ class YourTeamNavbar {
         $("[data-toggle=navbar]").each((idx, ele) => {
             let target = $(ele).data("target");
             if ($(this.element)[0] == $(target)[0]) {
-                $(ele).on("click", () => {
+                $(ele).on("click", (e) => {
+                    console.log(ele)
+                    debugger
                     this.toggle();
                 })
             }
         })
     }
 
+    eventLoad = function(){
+        $(this.element).find("[data-nb-node-type=parent]").on("click",this.nbNodeParentOnClick.bind(this))
+    }
+
+    nbNodeParentOnClick(e){
+        if(this.chkNbNodeParentIsOpen(e.target)){
+            $(e.target).data("nb-node-status","close").attr("data-nb-node-status","close");
+            $(e.target).next("ul").css({transform:"translateY(-5%)"});
+            $(e.target).next("ul").animate({
+                opacity:0,
+            },200, () => {
+                $(e.target).next("ul").hide();
+            })
+            
+
+        } else {
+            $(e.target).data("nb-node-status","open").attr("data-nb-node-status","open");
+            $(e.target).next("ul").show();
+            $(e.target).next("ul").animate({
+                opacity:1,
+            },200)
+            $(e.target).next("ul").css({transform:"translateY(0%)"});
+        }
+    }
+
+    chkNbNodeParentIsOpen(ele){
+        return $(ele).is("[data-nb-node-status=open]");
+    }
+
 }
 
 $.fn.YTNavbar = function (method) {

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

@@ -126,6 +126,7 @@ $.fn.YTTab = function (method,...arg) {
     if (method == "set") {
         tabObj.setActItem(this);
         tabObj.updActClass();
+        $(this).trigger("yt:tab:change",{method:"set"});
     } else if (method == "setAndClick") {
         tabObj.setActItem(this);
         $(this).click();