MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Progress Bar Returns, this time blue

This commit is contained in:
apapachristou 2019-04-30 18:59:19 +03:00
parent e569de4a7c
commit 4562f65a6d
3 changed files with 131 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -53,7 +53,8 @@
<!-- Login -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
[src]="this.getPrincipalAvatar()" (click)="openProfile()">
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
@ -65,3 +66,6 @@
</div>
</div>
</nav>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div>

8
dmp-frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -5,3 +5,11 @@ $mat-card-header-size: 40px !default;
border-radius: 50%;
flex-shrink: 0;
}
.progress-bar {
top: 70px;
left: 0;
position: fixed;
width: 100%;
z-index: 1;
}

221
dmp-frontend/src/app/ui/navbar/navbar.component.ts
View File

@ -1,139 +1,154 @@
import { Component, OnInit, ElementRef } from '@angular/core';
import { GENERAL_ROUTES, DMP_ROUTES, PUBLIC_ROUTES } from '../sidebar/sidebar.component';
// import { HISTORY_ROUTES } from '../sidebar/sidebar.component';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
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';
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']
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css', './navbar.component.scss']
})
export class NavbarComponent implements OnInit {
private listTitles: any[];
location: Location;
mobile_menu_visible: any = 0;
private toggleButton: any;
private sidebarVisible: boolean;
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) {
this.location = location;
this.sidebarVisible = false;
}
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(PUBLIC_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;
}
});
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(PUBLIC_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);
sidebarOpen() {
const toggleButton = this.toggleButton;
const body = document.getElementsByTagName('body')[0];
setTimeout(function () {
toggleButton.classList.add('toggled');
}, 500);
body.classList.add('nav-open');
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];
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.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);
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);
this.mobile_menu_visible = 0;
} else {
setTimeout(function () {
$toggle.classList.add('toggled');
}, 430);
var $layer = document.createElement('div');
$layer.setAttribute('class', 'close-layer');
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);
}
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);
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);
$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;
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();
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';
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 {