Initial Commit - NG UI

[osm/NG-UI.git] / src / app / layouts / header / HeaderComponent.html

diff --git a/src/app/layouts/header/HeaderComponent.html b/src/app/layouts/header/HeaderComponent.html
new file mode 100644 (file)
index 0000000..a9ff5ac
--- /dev/null
+++ b/src/app/layouts/header/HeaderComponent.html
@@ -0,0 +1,71 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<span class="d-none px-3 py-2 text-center text-bold bg-primary text-white">Here is a newer {{'APPVERSION' | translate}} {{PACKAGEVERSION}}
+    of OSM!</span>
+
+<nav class="navbar navbar-expand-md sticky-top bg-white" role="navigation">
+    <a class="navbar-brand">
+        <img routerLink="/" src="assets/images/logo.png" class="osm-logo"
+            alt="OPEN SOURCE MANO" draggable="false">
+    </a>
+    <div class="nav navbar-nav nav-flex-icons ml-auto">
+        <ul class="navbar-nav cursor-pointer" ngbDropdown display="dynamic" placement="bottom-right">
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" id="navbarDropdownProject" ngbDropdownToggle>
+                    <i class="fas fa-folder-open"></i> {{'PAGE.DASHBOARD.PROJECTS' | translate}}
+                    ({{selectedProject | async}})
+                </a>
+                <div class="dropdown-menu custom-dropdown-menu m-0 p-0" ngbDropdownMenu *ngIf="getSelectedProject"
+                    aria-labelledby="navbarDropdownProject">
+                    <a ngbDropdownItem class="dropdown-item project-item"
+                        [ngClass]="list.project_name === getSelectedProject ? 'activeProject' : ''"
+                        (click)="list.project_name === getSelectedProject ? '' : this.projectService.switchProjectModal(list)"
+                        *ngFor="let list of projectList$ | async" placement="left" container="body"
+                        ngbTooltip="{{ (list.project_name === getSelectedProject ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
+                        <span>{{list.project_name}}</span>
+                        <i *ngIf="list.project_name === getSelectedProject"
+                            class="fas fa-check-circle text-success"></i>
+                        <i *ngIf="list.project_name !== getSelectedProject" class="fas fa-exchange-alt text-danger"></i>
+                    </a>
+                </div>
+            </li>
+        </ul>
+        <ul class="navbar-nav cursor-pointer text-right" ngbDropdown display="dynamic" placement="bottom-right">
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
+                    <i class="fas fa-user-circle"></i> {{'USER' | translate}} ({{username$ | async}})
+                </a>
+                <div class="dropdown-menu custom-dropdown-menu m-0 p-0" ngbDropdownMenu
+                    aria-labelledby="navbarDropdown">
+                    <a ngbDropdownItem class="dropdown-item project-item" (click)="userSettings()">
+                        <span>{{'PAGE.DASHBOARD.USERSETTINGS' | translate}}</span>
+                        <i class="fas fa-users-cog"></i>
+                    </a>
+                    <a ngbDropdownItem class="dropdown-item project-item" (click)="logout()">
+                        <span>{{'PAGE.DASHBOARD.LOGOUT' | translate}}</span>
+                        <i class="fas fa-sign-out-alt"></i>
+                    </a>
+                    <div class="custom-divider"></div>
+                    <a *ngIf="sharedService.osmVersion" ngbDropdownItem class="dropdown-item project-item osm-version" href="javascript:void(0);">
+                        <span>{{'OSMVERSION' | translate}} {{sharedService.osmVersion}}</span>
+                    </a>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>
\ No newline at end of file