Merge branch '42-participant-home-screen-room-logic' into 'master'

Resolve "participant home screen - room logic"

Closes #42

See merge request swtp-block-ws17/arsnova-angular-frontend!64

src/app/participant-room/participant-room.component.html

 <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
-    <mat-card>
+    <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+    <mat-card *ngIf="room">
       <mat-card-header>
-        <mat-card-title><h3 class="subheading-2">{{ roomName }}</h3></mat-card-title>
-        <mat-card-subtitle>{{ roomId }}</mat-card-subtitle>
+        <mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title>
+        <mat-card-subtitle>{{ room.shortId }}</mat-card-subtitle>
       </mat-card-header>
       <mat-divider></mat-divider>
       <mat-card-content>
         <p>
-          {{ roomDescription }}
+          {{ room.description }}
         </p>
       </mat-card-content>
       <mat-divider></mat-divider>
       <mat-card-actions>
-        <button mat-icon-button color="primary" matTooltip="Ask something" routerLink="/room/{{roomId}}/create-comment">
+        <button mat-icon-button color="primary" matTooltip="Ask something" routerLink="room/{{room.id}}/create-comment">
           <mat-icon>question_answer</mat-icon>
         </button>
         <button mat-icon-button color="primary" matTooltip="Give feedback">
@@ -30,5 +31,9 @@
         </button>
       </mat-card-actions>
     </mat-card>
+    <div *ngIf="!isLoading && !room">
+       Error: room could not be found!
+    </div>
   </div>
+  <button mat-button color="primary" (click)="goBack()">Back</button>
 </div>

src/app/participant-room/participant-room.component.scss

 mat-card {
+  width: 100%;
   max-width: 800px;
 }
 

src/app/participant-room/participant-room.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Room } from '../room';
+import { Location } from '@angular/common';
+import { RoomService } from '../room.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-participant-room',
@@ -7,18 +11,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ParticipantRoomComponent implements OnInit {
 
-  roomId = '12 34 56 78';
-  roomName = 'Test Room';
-  roomDescription = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ' +
-    'magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea ' +
-    'takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ' +
-    'tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea ' +
-    'rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+  room: Room;
+  isLoading = true;
 
-  constructor() {
+  constructor(private location: Location,
+              private roomService: RoomService,
+              private route: ActivatedRoute) {
   }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getRoom(params['roomId']);
+    });
   }
 
+  getRoom(id: string): void {
+    this.roomService.getRoom(id)
+      .subscribe(room => {
+        this.room = room;
+        this.isLoading = false;
+      });
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
 }

src/app/room.service.ts

@@ -34,8 +34,7 @@ export class RoomService extends ErrorHandlingService {
   getRoom(id: string): Observable<Room> {
     const url = `${this.roomsUrl}/${id}`;
     return this.http.get<Room>(url).pipe(
-      tap(_ => ''),
-      catchError(this.handleError<Room>(`getRoom id=${id}`))
-    );
+    catchError(this.handleError<Room>(`getRoom id=${id}`))
+  );
   }
 }