Fix layout and linking

src/app/components/fragments/footer/footer.component.html

@@ -4,35 +4,32 @@
       <mat-panel-description>© SWTP WS17/18</mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-grid-list cols="3" rows="1" rowHeight="200px">
-      <mat-grid-tile>
-        <mat-nav-list role="list">
-          <h3 mat-subheader>Useful Links</h3>
-          <mat-list-item role="listitem">
-            <a target="_blank" href="https://www.thm.de/site/impressum.html">Impressum</a>
-          </mat-list-item>
-          <mat-list-item role="listitem">
-            <a target="_blank" href="https://www.thm.de/site/rechtsvorschriften.html">Privacy Terms</a>
-          </mat-list-item>
-          <mat-list-item role="listitem">
-            <a target="_blank" href="http://dailylolpics.lolpics.com/wp-content/uploads/2017/10/halp-me.jpg">Halp</a>
-          </mat-list-item>
-        </mat-nav-list>
-
-      </mat-grid-tile>
-
-      <mat-grid-tile>
-        <mat-list role="list">
-          <mat-list-item role="listitem">
-            <button mat-raised-button color="primary">Login as guest</button>
-          </mat-list-item>
-        </mat-list>
-
-        <button mat-button color="warn" (click)="prevStep()">Previous</button>
-      </mat-grid-tile>
-
-    </mat-grid-list>
 
+    <div class="container">
+      <mat-list role="list">
+        <h3 mat-subheader>Change Theme</h3>
+        <mat-list-item role="listitem">
+          <mat-slide-toggle></mat-slide-toggle>
+        </mat-list-item>
+      </mat-list>
+      <mat-nav-list>
+        <h3 mat-subheader>Login</h3>
+        <mat-list-item role="listitem">
+          <a (click)="guestLogin()">Login as Guest</a>
+        </mat-list-item>
+      </mat-nav-list>
+      <mat-nav-list role="list">
+        <h3 mat-subheader>Useful Links</h3>
+        <mat-list-item role="listitem">
+          <a target="_blank" href="https://www.thm.de/site/impressum.html">Impressum</a>
+        </mat-list-item>
+        <mat-list-item role="listitem">
+          <a target="_blank" href="https://www.thm.de/site/rechtsvorschriften.html">Privacy Terms</a>
+        </mat-list-item>
+        <mat-list-item role="listitem">
+          <a target="_blank" href="http://dailylolpics.lolpics.com/wp-content/uploads/2017/10/halp-me.jpg">Help</a>
+        </mat-list-item>
+      </mat-nav-list>
+    </div>
   </mat-expansion-panel>
 </footer>
-<!-- (click)="goToHomepage()" -->
\ No newline at end of file

src/app/components/fragments/footer/footer.component.scss

 footer {
-    overflow-y: auto
+    overflow-y: auto;
+    
 }
 
 mat-expansion-panel {
   background-color: rgb(235, 235, 235);
-  color: rgb(60, 60, 60);
+  color: rgb(60, 60, 60);  
+}
+
+.container {
+  display: flex;
+  justify-content: space-around;
+}
+
+
+/* Small screens */
+@media all and (max-width: 500px) {
+  .container {
+    flex-direction: column;
+  }
 }

src/app/components/fragments/footer/footer.component.ts

-import { Component, OnInit } from '@angular/core';
-import { UserRole } from '../../../models/user-roles.enum';
+import { Component, OnInit, Input } from '@angular/core';
+import { AuthenticationService } from '../../../services/http/authentication.service';
+import { NotificationService } from '../../../services/util/notification.service';
 import { Router } from '@angular/router';
-import { User } from '../../../models/user';
 
 @Component({
   selector: 'app-footer',
@@ -9,29 +9,26 @@ import { User } from '../../../models/user';
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
-  user: User;
+
 
   constructor(
+    public authenticationService: AuthenticationService,
+    public notificationService: NotificationService,
     public router: Router
   ) { }
 
   ngOnInit() {
   }
 
-  goToHomepage() {
-    const role: UserRole = this.user !== undefined ? this.user.role : undefined;
-    let route: string;
+  guestLogin(): void {
+    this.authenticationService.guestLogin().subscribe(loginSuccessful => this.checkLogin(loginSuccessful));
+  }
 
-    switch (role) {
-      case UserRole.PARTICIPANT:
-        route = '/participant';
-        break;
-      case UserRole.CREATOR:
-        route = '/creator';
-        break;
-      default:
-        route = '/';
+  private checkLogin(loginSuccessful: boolean) {
+    if (loginSuccessful) {
+      this.notificationService.show('Login successful!');
+      this.router.navigate(['participant']);
     }
-    this.router.navigate([route]);
   }
+
 }