ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Finish navigation bar

Browse source
This commit is contained in:
Cathy Hu 2020-08-27 17:04:22 +02:00
parent 4c9cf1aabe
commit 0ec30a4a44
3 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
View file

@ -1,25 +1,22 @@
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<button <a mat-button [routerLink]="['/']" routerLinkActive="router-link-active"
mat-icon-button >Kibicara</a
class="example-icon" >
aria-label="Example icon-button with menu icon" <a mat-button [routerLink]="['/hoods']" routerLinkActive="router-link-active"
>All hoods</a
>
<a
mat-button
[routerLink]="['/organizers']"
routerLinkActive="router-link-active"
>Become a hood admin!</a
> >
<mat-icon>menu</mat-icon>
</button>
<span>Kibicara</span>
<span class="example-spacer"></span> <span class="example-spacer"></span>
<button <div *ngIf="authenticated; else unauthenticated">
mat-icon-button <a mat-raised-button [routerLink]="['/dashboard']" routerLinkActive="router-link-active">Dashboard</a>
class="example-icon favorite-icon" <a mat-button (click)="onLogout()" routerLinkActive="router-link-active">Logout</a>
aria-label="Example icon-button with heart icon" </div>
> <ng-template #unauthenticated>
<mat-icon>favorite</mat-icon> <a mat-button [routerLink]="['/login']" routerLinkActive="router-link-active">Login</a>
</button> </ng-template>
<button
mat-icon-button
class="example-icon"
aria-label="Example icon-button with share icon"
>
<mat-icon>share</mat-icon>
</button>
</mat-toolbar> </mat-toolbar>

2
kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
View file

@ -1,3 +1,3 @@
.example-spacer { .example-spacer {
flex: 1 1 auto; flex: 1 auto;
} }

30
kibicara-frontend/src/app/shared/toolbar/toolbar.component.ts
View file

@ -1,15 +1,39 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { LoginService } from 'src/app/core/auth/login.service';
import { Observer } from 'rxjs';
import { Route } from '@angular/compiler/src/core';
import { Router, NavigationEnd } from '@angular/router';
import { first, map } from 'rxjs/operators';
@Component({ @Component({
selector: 'app-toolbar', selector: 'app-toolbar',
templateUrl: './toolbar.component.html', templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss'] styleUrls: ['./toolbar.component.scss'],
}) })
export class ToolbarComponent implements OnInit { export class ToolbarComponent implements OnInit {
authenticated = false;
constructor() { } constructor(private loginService: LoginService, private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
ngOnInit(): void { this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.router.navigated = false;
if (this.loginService.currentHoodAdminValue) {
this.authenticated = true;
} else {
this.authenticated = false;
}
}
});
} }
ngOnInit(): void {}
onLogout() {
this.loginService.logout();
this.router.navigate(['/']);
}
} }