diff --git a/src/app/participant-room/participant-room.component.html b/src/app/participant-room/participant-room.component.html index a77376131d5a7ca67ac8a929fbaa5c32d34526f1..250352b278958dc693284df5094455d51b06cc88 100644 --- a/src/app/participant-room/participant-room.component.html +++ b/src/app/participant-room/participant-room.component.html @@ -1,19 +1,20 @@ <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> diff --git a/src/app/participant-room/participant-room.component.scss b/src/app/participant-room/participant-room.component.scss index edaeaf744fc3fb135465a6e113293ebbffab2266..f39ead8e5c76bac24ad6bedc8a5f32a5738a47b6 100644 --- a/src/app/participant-room/participant-room.component.scss +++ b/src/app/participant-room/participant-room.component.scss @@ -1,4 +1,5 @@ mat-card { + width: 100%; max-width: 800px; } diff --git a/src/app/participant-room/participant-room.component.ts b/src/app/participant-room/participant-room.component.ts index 1409939fd29038d92bbb1906a6c14ef0b811e1c3..2e865692e3023418524b7dc19b7a870811a5871d 100644 --- a/src/app/participant-room/participant-room.component.ts +++ b/src/app/participant-room/participant-room.component.ts @@ -1,4 +1,8 @@ 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(); + } } diff --git a/src/app/room.service.ts b/src/app/room.service.ts index 77b492462aeb0bdea0cb39feaa5a358b9d81b451..5f4fc2796b9dc7e031a00103aeca388e111c1e8a 100644 --- a/src/app/room.service.ts +++ b/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}`)) + ); } }