added log out button

src/app/components/feed/feed.component.ts

@@ -40,6 +40,7 @@ export class FeedComponent implements OnInit {
   }
 
   showNew() {
+    console.log("showNew()")
     this.feedService.getAllPostsRaw().subscribe(response => {
       this.feedNew = this.feedService.renderAllPosts(response.json())
       this.parentSelectedPostList = this.feedNew})
@@ -48,6 +49,7 @@ export class FeedComponent implements OnInit {
   }
 
   showMostLiked() {
+    console.log("showMostLiked()")
     this.feedService.getAllPostsRaw().subscribe(response => {
       this.feedMostLiked = this.feedService.renderAllPosts(response.json())
       this.parentSelectedPostList = this.feedMostLiked})

src/app/components/main-navigation/main-navigation.component.html

@@ -2,11 +2,20 @@
   <mat-sidenav #drawer class="sidenav" 
       fxShow="true" fxHide.gt-sm="true"
       fixedInViewport="false"
+      autoFocus="false"
      >
     <mat-toolbar>Menu</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item  *ngFor="let link of navLinks" 
+      <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>
-      href={{link.path}}>{{link.label}}</a>
+      <a mat-list-item *ngIf="loggedIn" routerLink={{profileUrl}} (click)="drawer.close()">Profile</a>
+      <a mat-list-item routerLink="/about" (click)="drawer.close()">About</a>
+      <a mat-list-item routerLink="/imprint" (click)="drawer.close()">Imprint</a>
+      <mat-divider></mat-divider>
+      <div id="link-box">
+        <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/register" (click)="drawer.close()">Register</a>
+        <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/login" (click)="drawer.toggle()">Login</a>
+        <a mat-stroked-button *ngIf="loggedIn" class="link-button" (click)="logout()" (click)="drawer.toggle()">log out</a>
+      </div>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
@@ -22,14 +31,29 @@
       <span>Greenvironment</span>
         <!--The following menu items will be hidden on both SM and XS screen sizes -->
        <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
-          <a mat-tab-link 
+        <div *ngIf="loggedIn">
-              *ngFor="let link of navLinks"
+        <a mat-tab-link
+              *ngFor="let link of navLinksLoggedIn"
               [routerLink]="link.path"
               (click)="activeLink = link"
               routerLinkActive #rla="routerLinkActive"
+              [routerLinkActiveOptions]="{exact:true}"
               [active]="activeLink == link">
               {{link.label}}
           </a>
+          <a mat-tab-link (click)="logout()" >log out</a>
+          </div>
+          <div *ngIf="!loggedIn">
+          <a mat-tab-link
+          *ngFor="let link of navLinks"
+          [routerLink]="link.path"
+          (click)="activeLink = link"
+          routerLinkActive #rla="routerLinkActive"
+          [routerLinkActiveOptions]="{exact:true}"
+          [active]="rla.isActive">
+          {{link.label}}
+          </a>
+        </div>
        </nav>
     </mat-toolbar>
     <router-outlet></router-outlet>

src/app/components/main-navigation/main-navigation.component.sass

@@ -10,18 +10,22 @@
 .sidenav 
   width: 200px
 
-
 .sidenav .mat-toolbar
   background: inherit
 
-
-
 .mat-toolbar.mat-primary
   height: 56px
   position: sticky
   top: 0
   z-index: 1000
 
+#link-box
+  padding: 0.5em
+
+.link-button
+  width: 100%
+  margin-bottom: 0.5em 
+
 
 
 

src/app/components/main-navigation/main-navigation.component.ts

@@ -1,14 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
+import { DatasharingService } from '../../services/datasharing.service';
+import { SelfService } from '../../services/selfservice/self.service';
+import { environment } from 'src/environments/environment';
+import { Levellist } from 'src/app/models/levellist';
+import { Http } from '@angular/http';
+import { Router } from '@angular/router';
+import { User } from 'src/app/models/user';
 
 @Component({
   selector: 'app-main-navigation',
   templateUrl: './main-navigation.component.html',
   styleUrls: ['./main-navigation.component.sass']
 })
-export class MainNavigationComponent {
+export class MainNavigationComponent implements OnInit {
+  loggedIn: boolean = false;
+  userId: number;
+  username: string
+  user: User
+  levellist: Levellist = new Levellist()
+  level: string
+  points: number
+  profileUrl: string;
+
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(
@@ -16,12 +32,48 @@ export class MainNavigationComponent {
       shareReplay()
     );
 
-  constructor(private breakpointObserver: BreakpointObserver) {}
+  constructor(private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {}
+  ngOnInit() {
+    this.data.currentUserInfo.subscribe(user => {
+      this.user = user
+      this.loggedIn = user.loggedIn;
+      this.userId = user.userID;
+      this.username = user.username
+      this.level = this.levellist.getLevelName(user.level)
+      this.points = user.points
+      this.profileUrl = '/profile/' + this.userId;
+    })    
+  }
+  navLinksLoggedIn = [
+    { path: '', label: 'Home' },
+    { path: 'profile/1', label: 'Profile' },
+    { path: '/about', label: 'About' },
+    { path: '/imprint', label: 'Imprint' },
+  ];
   navLinks = [
     { path: '', label: 'Home' },
-    { path: '/profile/1', label: 'Profile' },
     { path: '/about', label: 'About' },
     { path: '/imprint', label: 'Imprint' },
     { path: '/login', label: 'Login' },
+    { path: '/register', label: 'Register' },
   ];
+
+  logout() {
+    let url = environment.graphQLUrl
+ 
+    let headers = new Headers()
+    headers.set('Content-Type', 'application/json')
+
+    const body = {query: `mutation {
+        logout
+      }`}
+ 
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text())})
+    this.loggedIn = false
+    let user = new User()
+    user.loggedIn = false
+    this.data.changeUserInfo(user)
+    this.router.navigate(['login'])
+  }
 }