moved data to constants

open-template-hub · Aug 29, 2021 · d5aa19f · d5aa19f
1 parent 9e5b092
commit d5aa19f
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 133 deletions.
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.ts b/src/app/component/common/dropdown-menu/dropdown-menu.component.ts
@@ -16,70 +16,70 @@ export interface DropdownMenuOption {
   hover?: boolean // this property only use on this class, do not set it from outside
 }
 
-@Component({
+@Component( {
   selector: 'app-dropdown-menu',
   templateUrl: './dropdown-menu.component.html',
-  styleUrls: ['./dropdown-menu.component.scss']
-})
+  styleUrls: [ './dropdown-menu.component.scss' ]
+} )
 export class DropdownMenuComponent implements OnInit {
   brand = {
     brandLogo: '',
   };
 
-  isComingFromToggleEvent = false
+  isComingFromToggleEvent = false;
 
-  @Input() isDropdownOpen = false
+  @Input() isDropdownOpen = false;
   @Input() toggleEvent: Observable<void>;
 
   @Input() options: DropdownColumnOption[] = [
     {
       sectionTitle: 'Payment',
       menus: [ {
-        backgroundColor: 'rgba(255, 0, 0, 0.2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: '' },
         header: 'Open Template Hub',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: '/'
       } ]
     }
-  ]
+  ];
 
-  @Input() menuType: 'top' | 'bottom' = 'top'
-  @Input() isActive = false
+  @Input() menuType: 'top' | 'bottom' = 'top';
+  @Input() isActive = false;
 
-  @ViewChild('toggleButton') toggleButton: ElementRef
-  @ViewChild('dropdownContent') dropdownContent: ElementRef
+  @ViewChild( 'toggleButton' ) toggleButton: ElementRef;
+  @ViewChild( 'dropdownContent' ) dropdownContent: ElementRef;
 
   constructor(
-    private themeService: ThemeService,
-    private renderer: Renderer2
+      private themeService: ThemeService,
+      private renderer: Renderer2
   ) {
-    this.brand = this.themeService.brand
+    this.brand = this.themeService.brand;
 
-    this.renderer.listen('window', 'click', (e: Event) => {
-      if ( this.menuType === 'top') {
-        if( this.toggleButton.nativeElement.contains( e.target ) ) {
-          this.toggleDropdown()
+    this.renderer.listen( 'window', 'click', ( e: Event ) => {
+      if ( this.menuType === 'top' ) {
+        if ( this.toggleButton.nativeElement.contains( e.target ) ) {
+          this.toggleDropdown();
         } else if ( !this.dropdownContent?.nativeElement.contains( e.target ) ) {
-          this.isDropdownOpen = false
+          this.isDropdownOpen = false;
         }
       } else if ( !this.isComingFromToggleEvent && !this.dropdownContent?.nativeElement.contains( e.target ) ) {
-        this.isDropdownOpen = false
+        this.isDropdownOpen = false;
       }
 
-      this.isComingFromToggleEvent = false
-    } )
+      this.isComingFromToggleEvent = false;
+    } );
   }
 
   ngOnInit() {
     this.toggleEvent?.subscribe( () => {
-      this.isComingFromToggleEvent = true
-      this.toggleDropdown()
-    } )
+      this.isComingFromToggleEvent = true;
+      this.toggleDropdown();
+    } );
   }
 
   toggleDropdown() {
-    this.isDropdownOpen = !this.isDropdownOpen
-    console.log(this.isDropdownOpen)
+    this.isDropdownOpen = !this.isDropdownOpen;
+    console.log( this.isDropdownOpen );
   }
 }
diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.html b/src/app/component/nav/common/bottom-nav/bottom-nav.component.html
@@ -1,6 +1,6 @@
-<app-dropdown-menu [toggleEvent]="productToggleEvent.asObservable()" [menuType]="'bottom'" [options]="productMenuOptions">
+<app-dropdown-menu [toggleEvent]="productToggleEvent.asObservable()" [menuType]="'bottom'" [options]="PRODUCTS">
 </app-dropdown-menu>
-<app-dropdown-menu [toggleEvent]="serviceToggleEvent.asObservable()" [menuType]="'bottom'" [options]="servicesMenuOptions">
+<app-dropdown-menu [toggleEvent]="serviceToggleEvent.asObservable()" [menuType]="'bottom'" [options]="SERVICES">
 </app-dropdown-menu>
 <nav class="bottom-nav">
   <a (click)="closeSettings()" *ngIf="openSettings" href="javascript:void(0)">
@@ -10,13 +10,13 @@
     </span>
   </a>
   <a *ngIf="!openSettings" (click)="productToggleEvent.next()">
-    <i aria-hidden="true" [class]="'fas fa-chevron-up fa-fw'"></i>
+    <i aria-hidden="true" [class]="'fas fa-server fa-fw'"></i>
     <span>
         Products
     </span>
   </a>
   <a *ngIf="!openSettings" (click)="serviceToggleEvent.next()">
-    <i aria-hidden="true" [class]="'fas fa-chevron-up fa-fw'"></i>
+    <i aria-hidden="true" [class]="'fas fa-handshake fa-fw'"></i>
     <span>
         Services
     </span>

diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.ts b/src/app/component/nav/common/bottom-nav/bottom-nav.component.ts
@@ -5,8 +5,7 @@ import { AuthToken } from '../../../../model/AuthToken';
 import { AuthenticationService } from '../../../../service/auth/authentication.service';
 import { BasicInfoService } from '../../../../service/basic-info/basic-info.service';
 import { LoadingService } from '../../../../service/loading/loading.service';
-import { ThemeService } from '../../../../service/theme/theme.service';
-import { URLS } from '../../../../util/constant';
+import { PRODUCTS, SERVICES, URLS } from '../../../../util/constant';
 import { DropdownColumnOption } from '../../../common/dropdown-menu/dropdown-menu.component';
 
 @Component( {
@@ -27,61 +26,14 @@ export class BottomNavComponent {
 
   URLS = URLS;
 
-  productMenuOptions: DropdownColumnOption[] = [
-    {
-      sectionTitle: 'Payment',
-      menus: [ {
-        backgroundColor: 'rgba(255, 0, 0, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      },
-        {
-          backgroundColor: 'rgba(0, 255, 0, 0.2)',
-          brand: this.themeService.brand,
-          header: 'Open Template Hub',
-          description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-          link: URLS.maintenance
-        }],
-    },
-    {
-      sectionTitle: 'Financial Services',
-      menus: [ {
-        backgroundColor: 'rgba(0, 0, 255, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      } ]
-    }
-  ]
-
-  servicesMenuOptions: DropdownColumnOption[] = [
-    {
-      menus: [ {
-        backgroundColor: 'rgba(255, 0, 0, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      },
-        {
-          backgroundColor: 'rgba(0, 0, 255, 0.2)',
-          brand: this.themeService.brand,
-          header: 'Open Template Hub',
-          description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-          link: URLS.maintenance
-        } ]
-    }
-  ]
+  PRODUCTS: DropdownColumnOption[] = [];
+  SERVICES: DropdownColumnOption[] = [];
 
   constructor(
       private router: Router,
       private authenticationService: AuthenticationService,
       private loadingService: LoadingService,
       private basicInfoService: BasicInfoService,
-      private themeService: ThemeService
   ) {
     this.authenticationService.currentUser.subscribe( currentUser => {
       this.currentUser = currentUser;
@@ -95,6 +47,9 @@ export class BottomNavComponent {
           }
         }
     );
+
+    this.PRODUCTS = PRODUCTS;
+    this.SERVICES = SERVICES;
   }
 
   logout() {

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html
@@ -5,13 +5,13 @@ <h2>Open Template Hub</h2>
   </a>
   <div class="left-item-wrapper">
     <a>
-      <app-dropdown-menu [options]="productMenuOptions">
+      <app-dropdown-menu [options]="PRODUCTS">
         <span>Products</span>
         <i aria-hidden="true" class="material-icons">expand_more</i>
       </app-dropdown-menu>
     </a>
     <a>
-      <app-dropdown-menu [options]="servicesMenuOptions">
+      <app-dropdown-menu [options]="SERVICES">
         <span>Services</span>
         <i aria-hidden="true" class="material-icons">expand_more</i>
       </app-dropdown-menu>

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.ts b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { LoadingService } from '../../../../service/loading/loading.service';
 import { ThemeService } from '../../../../service/theme/theme.service';
-import { URLS } from '../../../../util/constant';
+import { PRODUCTS, SERVICES, URLS } from '../../../../util/constant';
 import { DropdownColumnOption } from '../../../common/dropdown-menu/dropdown-menu.component';
 
 @Component( {
@@ -17,54 +17,8 @@ export class LandingLayoutTopNavComponent {
   };
   URLS = URLS;
 
-  productMenuOptions: DropdownColumnOption[] = [
-    {
-      sectionTitle: 'Payment',
-      menus: [ {
-        backgroundColor: 'rgba(255, 0, 0, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      },
-      {
-        backgroundColor: 'rgba(0, 255, 0, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      }],
-    },
-    {
-      sectionTitle: 'Financial Services',
-      menus: [ {
-        backgroundColor: 'rgba(0, 0, 255, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      } ]
-    }
-  ]
-
-  servicesMenuOptions: DropdownColumnOption[] = [
-    {
-      menus: [ {
-        backgroundColor: 'rgba(255, 0, 0, 0.2)',
-        brand: this.themeService.brand,
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: URLS.maintenance
-      },
-        {
-          backgroundColor: 'rgba(0, 0, 255, 0.2)',
-          brand: this.themeService.brand,
-          header: 'Open Template Hub',
-          description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-          link: URLS.maintenance
-        } ]
-    }
-  ]
+  PRODUCTS: DropdownColumnOption[] = [];
+  SERVICES: DropdownColumnOption[] = [];
 
   constructor(
       private router: Router,
@@ -73,5 +27,8 @@ export class LandingLayoutTopNavComponent {
   ) {
     this.brand = this.themeService.brand;
     this.loadingService.sharedLoading.subscribe( loading => this.loading = loading );
+
+    this.PRODUCTS = PRODUCTS;
+    this.SERVICES = SERVICES;
   }
 }