bug: menu bar bug fixed

Change-Id: I84dd884d6dbcd2831be238629eb5e0ba8ef8d1cc
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

3 files changed, 45 insertions, 84 deletions

diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index e0051383..26e736de 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -19,66 +19,61 @@
       <img src="assets/images/uui-logo130.png" alt="">
     </div>
     <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'">
-      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[0] == true}" (click)="thisActive(0)">
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'home'}">
         <a routerLink="home">
           <span title>
             <i>
-              <img
-                src="{{activeMenuBar[0] == true ? 'assets/images/home-icon-active.png':'assets/images/home-icon.png'}}"
-                alt="home">
+              <img src="{{ url === 'home' ? 'assets/images/home-icon-active.png':'assets/images/home-icon.png'}}" alt="home">
             </i>
             <span> {{"i18nTextDefine_Home" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[1] == true}" (click)="thisActive(1)">
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'management'}">
         <a routerLink="management">
           <span title>
-            <i>
-              <img
-                src="{{activeMenuBar[1] == true ? 'assets/images/customer-icon-active.png':'assets/images/customer-icon.png'}}"
-                alt="home">
+           <i>
+              <img src="{{url === 'management' ? 'assets/images/customer-icon-active.png':'assets/images/customer-icon.png'}}" alt="home">
             </i>
             <span> {{"i18nTextDefine_Customer" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[2]== true}" (click)="thisActive(2)">
-        <a href="#" onclick="window.open('http://172.30.1.80:5601/app/kibana#/dashboards')">
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'fcaps'}">
+        <a routerLink="fcaps">
           <span title>
             <i>
-              <img
-                src="{{activeMenuBar[2] == true ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}"
-                alt="home">
+              <img src="{{ url === 'fcaps' ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}" alt="home">
             </i>
             <span> {{"i18nTextDefine_Monitor" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <li nz-submenu [ngClass]="{'activeMenuBar':activeMenuBar[3] == true}" (click)="thisActive(3)">
-        <span title> <i>
-            <img
-              src="{{activeMenuBar[3] == true ? 'assets/images/Services-icon-active.png':'assets/images/Services-icon.png'}}"
-              alt="home">
-          </i> {{"i18nTextDefine_Services" | translate}} </span>
+      <li nz-submenu [ngClass]="{'activeMenuBar': url.indexOf('services') === 0}" [nzOpen]="flag">
+        <span title>  
+          <i>
+            <img src="{{url.indexOf('services') === 0 ? 'assets/images/Services-icon-active.png':'assets/images/Services-icon.png'}}" alt="home">
+          </i> 
+          {{"i18nTextDefine_Services" | translate}} 
+        </span>
         <ul>
-          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[0] == true}" (click)="thisListActive(0)"><a
-              routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
-          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[1] == true}" (click)="thisListActive(1)"><a
-              routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/services-list'}">
+            <a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a>
+          </li>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/onboard-vnf-vm'}">
+            <a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a>
+          </li>
         </ul>
       </li>
       <hr>
-      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[4] == true}" (click)="thisActive(4)">
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'network'}">
         <a routerLink="network">
           <span title>
-            <i>
-              <img
-                src="{{activeMenuBar[4] == true ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}"
-                alt="home">
+             <i>
+              <img src="{{url === 'network' ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}" alt="home">
             </i>
             <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
           </span>
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
index 4055dc81..ade860b1 100644
--- a/usecaseui-portal/src/app/app.component.less
+++ b/usecaseui-portal/src/app/app.component.less
@@ -28,7 +28,7 @@ nz-layout {
         left: 0;
         z-index: 100;
         height: 100vh; 
-        background: #313449 url('../assets/images/UUIMenuBar.png') no-repeat;
+        background: #313449 url('assets/images/UUIMenuBar.png') no-repeat;
         background-size: 100%;
         .siderContent{
             width: 100%;
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index d654900c..7306db1c 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -17,7 +17,8 @@ import {Component} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {MyhttpService} from "./core/services/myhttp.service";
 import {HomesService} from "./core/services/homes.service";
-
+import {NavigationEnd, Router} from '@angular/router';
+import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'app-root',
@@ -25,10 +26,20 @@ import {HomesService} from "./core/services/homes.service";
   styleUrls: ['./app.component.less']
 })
 export class AppComponent {
+    public url:string = 'home';
 
-    constructor(private translate: TranslateService,private myhttp: HomesService) {
+    constructor(private translate: TranslateService,private myhttp: HomesService,private router:Router,) {
         this.currentLanguageGet();
-        // translate.use('en');
+        this.getUrl();
+
+        
+    }
+    getUrl(){
+        this.router.events.map(event=> {
+            if(event instanceof NavigationEnd){
+                this.url = event['url'].slice(1)
+            }
+            }).subscribe(event=>{})
     }
 
 
@@ -57,57 +68,12 @@ export class AppComponent {
             sessionStorage.setItem("DefaultLang",this.currentLanguage);
         }
     }
-    activeMenuBar =[true,false,false,false,false];
-    activeMenuList =[false,false];
-    thisActive(item){
-        if(this.activeMenuBar[item] == true){
-            this.activeMenuBar.map((its,index) => {
-                if(item != index){
-                    this.activeMenuBar[index] = false;
-                }
-            })
-        }else {
-            this.activeMenuBar.map((its,index) => {
-                if(item == index){
-                    this.activeMenuBar[item] = true;
-                }else {
-                    this.activeMenuBar[index] = false;
-                }
-            })
-            this.activeMenuList.map((its,index) => {
-                this.activeMenuList[index] = false;
-            })
+    get flag () {
+        if(!this.url.indexOf('services')){
+            return true
+        }else{
+            return false
         }
     }
-    thisListActive(item){
-        if(this.activeMenuBar[3] = true){
-            if(this.activeMenuList[item] == true){
-                this.activeMenuList.map((its,index) => {
-                    if(item != index){
-                        this.activeMenuList[index] = false;
-                    }
-                })
-            }else {
-                this.activeMenuList.map((its,index) => {
-                    if(item == index){
-                        this.activeMenuList[item] = true;
-                    }else {
-                        this.activeMenuList[index] = false;
-                    }
-                })
-
-            }
-        }else {
-            this.activeMenuList.map((its,index) => {
-                this.activeMenuList[index] = false;
-            })
-        }
-    }
-    //
-    // selectLanguage = "en";
-
-  // changeLanguage(item){
-  //   this.selectLanguage = item;
-  //   this.translate.use(item);
-  // }
+  
 }