You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
5.4 KiB
TypeScript
183 lines
5.4 KiB
TypeScript
import { Component, OnInit, ElementRef } from '@angular/core';
|
|
import { GENERAL_ROUTES, DMP_ROUTES, DATASETS_ROUTES } from '../sidebar/sidebar.component';
|
|
// import { HISTORY_ROUTES } from '../sidebar/sidebar.component';
|
|
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
|
|
import { Router } from '@angular/router';
|
|
import { AuthService } from '../../core/services/auth/auth.service';
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
|
|
import { AppRole } from '../../core/common/enum/app-role';
|
|
import { ProgressIndicationService } from '../../core/services/progress-indication/progress-indication-service';
|
|
import { BaseComponent } from '../../core/common/base/base.component';
|
|
import { takeUntil } from 'rxjs/operators';
|
|
|
|
@Component({
|
|
selector: 'app-navbar',
|
|
templateUrl: './navbar.component.html',
|
|
styleUrls: ['./navbar.component.css', './navbar.component.scss']
|
|
})
|
|
export class NavbarComponent extends BaseComponent implements OnInit {
|
|
progressIndication = false;
|
|
private listTitles: any[];
|
|
location: Location;
|
|
mobile_menu_visible: any = 0;
|
|
private toggleButton: any;
|
|
private sidebarVisible: boolean;
|
|
|
|
constructor(location: Location,
|
|
private element: ElementRef,
|
|
private router: Router,
|
|
private authentication: AuthService,
|
|
private dialog: MatDialog,
|
|
private progressIndicationService: ProgressIndicationService
|
|
) {
|
|
super();
|
|
this.location = location;
|
|
this.sidebarVisible = false;
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.listTitles = GENERAL_ROUTES.filter(listTitle => listTitle);
|
|
this.listTitles.push(DMP_ROUTES.filter(listTitle => listTitle));
|
|
// this.listTitles.push(HISTORY_ROUTES.filter(listTitle => listTitle));
|
|
this.listTitles.push(DATASETS_ROUTES.filter(listTitle => listTitle));
|
|
const navbar: HTMLElement = this.element.nativeElement;
|
|
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
|
|
this.router.events.subscribe((event) => {
|
|
this.sidebarClose();
|
|
var $layer: any = document.getElementsByClassName('close-layer')[0];
|
|
if ($layer) {
|
|
$layer.remove();
|
|
this.mobile_menu_visible = 0;
|
|
}
|
|
});
|
|
|
|
this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
|
|
setTimeout(() => { this.progressIndication = x; });
|
|
});
|
|
}
|
|
|
|
public isAuthenticated(): boolean {
|
|
return !(!this.authentication.current());
|
|
}
|
|
|
|
sidebarOpen() {
|
|
const toggleButton = this.toggleButton;
|
|
const body = document.getElementsByTagName('body')[0];
|
|
setTimeout(function () {
|
|
toggleButton.classList.add('toggled');
|
|
}, 500);
|
|
|
|
body.classList.add('nav-open');
|
|
|
|
this.sidebarVisible = true;
|
|
};
|
|
sidebarClose() {
|
|
const body = document.getElementsByTagName('body')[0];
|
|
this.toggleButton.classList.remove('toggled');
|
|
this.sidebarVisible = false;
|
|
body.classList.remove('nav-open');
|
|
};
|
|
sidebarToggle() {
|
|
// const toggleButton = this.toggleButton;
|
|
// const body = document.getElementsByTagName('body')[0];
|
|
var $toggle = document.getElementsByClassName('navbar-toggler')[0];
|
|
|
|
if (this.sidebarVisible === false) {
|
|
this.sidebarOpen();
|
|
} else {
|
|
this.sidebarClose();
|
|
}
|
|
const body = document.getElementsByTagName('body')[0];
|
|
|
|
if (this.mobile_menu_visible == 1) {
|
|
// $('html').removeClass('nav-open');
|
|
body.classList.remove('nav-open');
|
|
if ($layer) {
|
|
$layer.remove();
|
|
}
|
|
setTimeout(function () {
|
|
$toggle.classList.remove('toggled');
|
|
}, 400);
|
|
|
|
this.mobile_menu_visible = 0;
|
|
} else {
|
|
setTimeout(function () {
|
|
$toggle.classList.add('toggled');
|
|
}, 430);
|
|
|
|
var $layer = document.createElement('div');
|
|
$layer.setAttribute('class', 'close-layer');
|
|
|
|
|
|
if (body.querySelectorAll('.main-panel')) {
|
|
document.getElementsByClassName('main-panel')[0].appendChild($layer);
|
|
} else if (body.classList.contains('off-canvas-sidebar')) {
|
|
document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
|
|
}
|
|
|
|
setTimeout(function () {
|
|
$layer.classList.add('visible');
|
|
}, 100);
|
|
|
|
$layer.onclick = function () { //asign a function
|
|
body.classList.remove('nav-open');
|
|
this.mobile_menu_visible = 0;
|
|
$layer.classList.remove('visible');
|
|
setTimeout(function () {
|
|
$layer.remove();
|
|
$toggle.classList.remove('toggled');
|
|
}, 400);
|
|
}.bind(this);
|
|
|
|
body.classList.add('nav-open');
|
|
this.mobile_menu_visible = 1;
|
|
|
|
}
|
|
};
|
|
|
|
getTitle() {
|
|
var titlee = this.location.prepareExternalUrl(this.location.path());
|
|
if (titlee.charAt(0) === '#') {
|
|
titlee = titlee.slice(2);
|
|
}
|
|
titlee = titlee.split('/').pop();
|
|
|
|
for (var item = 0; item < this.listTitles.length; item++) {
|
|
if (this.listTitles[item].path === titlee) {
|
|
return this.listTitles[item].title;
|
|
}
|
|
}
|
|
return 'Dashboard';
|
|
}
|
|
|
|
public principalHasAvatar(): boolean {
|
|
return this.authentication.current().avatarUrl != null;
|
|
}
|
|
|
|
public getPrincipalAvatar(): string {
|
|
return this.authentication.current().avatarUrl;
|
|
}
|
|
|
|
public isAdmin(): boolean {
|
|
if (!this.authentication.current()) { return false; }
|
|
const principalRoles = this.authentication.current().authorities;
|
|
for (let i = 0; i < principalRoles.length; i++) {
|
|
if (principalRoles[i] === AppRole.Admin) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
openProfile() {
|
|
const dialogRef = this.dialog.open(UserDialogComponent, {
|
|
hasBackdrop: true,
|
|
autoFocus: false,
|
|
closeOnNavigation: true,
|
|
disableClose: false,
|
|
position: { top: '64px', right: '1em' }
|
|
});
|
|
}
|
|
}
|