Add route for creator's room view

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { ParticipantHomeScreenComponent } from './participant-home-screen/partic
 import { AuthenticationGuard } from './authentication.guard';
 import { UserRole } from './user-roles.enum';
 import { ParticipantRoomComponent } from './participant-room/participant-room.component';
+import { CreatorRoomComponent } from './creator-room/creator-room.component';
 import { CommentComponent } from './comment/comment.component';
 import { CommentListComponent } from './comment-list/comment-list.component';
 
@@ -32,6 +33,11 @@ const routes: Routes = [
     component: RoomComponent,
     canActivate: [AuthenticationGuard]
   },
+  {
+    path: 'creator/room/:roomId',
+    component: CreatorRoomComponent,
+    canActivate: [AuthenticationGuard]
+  },
   {
     path: 'room/:roomId/comments',
     component: CommentListComponent,

src/app/creator-home-screen/creator-home-screen.component.html

@@ -3,6 +3,13 @@
     <button mat-raised-button color="primary" (click)="openCreateRoomDialog()">Create new room</button>
   </div>
   <div fxLayout="row" fxLayoutAlign="center">
-    <app-room-list></app-room-list>
+<!--    <app-room-list></app-room-list> -->
+    <mat-list>
+      <mat-list-item *ngFor="let room of rooms">
+        <button mat-button routerLink="room/{{room.id}}">
+          {{room.name}}
+        </button>
+      </mat-list-item>
+    </mat-list>
   </div>
 </div>

src/app/creator-home-screen/creator-home-screen.component.ts

 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { RoomCreationComponent } from '../room-creation/room-creation.component';
+import { RoomListComponent } from '../room-list/room-list.component';
+import { RoomService } from '../room.service';
 
 @Component({
   selector: 'app-creator-home-screen',
   templateUrl: './creator-home-screen.component.html',
   styleUrls: ['./creator-home-screen.component.scss']
 })
-export class CreatorHomeScreenComponent implements OnInit {
+export class CreatorHomeScreenComponent extends RoomListComponent implements OnInit {
 
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog,
+              protected roomService: RoomService) {
+    super(roomService);
+  }
 
   ngOnInit() {
+    this.getRooms();
   }
 
   openCreateRoomDialog(): void {

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

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
     <div fxLayoutGap="20px">
-      <mat-list-item>Room: {{room}}</mat-list-item>
+      <mat-list-item>Room: {{room.name}}</mat-list-item>
       <mat-list-item>
         <button mat-raised-button color="primary">Create content</button>
       </mat-list-item>

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

 import { Component, OnInit } from '@angular/core';
+import { RoomService } from '../room.service';
+import { ActivatedRoute } from '@angular/router';
+import { RoomComponent } from '../room/room.component';
+import { Room } from '../room';
 
 @Component({
   selector: 'app-creator-room',
   templateUrl: './creator-room.component.html',
   styleUrls: ['./creator-room.component.scss']
 })
-export class CreatorRoomComponent implements OnInit {
-  room = '1';
-  constructor() { }
+export class CreatorRoomComponent extends RoomComponent implements OnInit {
+  room: Room;
+  constructor(protected roomService: RoomService,
+              protected route: ActivatedRoute) {
+    super(roomService, route);
+  }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getRoom(params['roomId']);
+    });
   }
 
 }

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

@@ -11,7 +11,7 @@ export class RoomListComponent implements OnInit {
   rooms: Room[];
   closedRooms: Room[];
 
-  constructor(private roomService: RoomService) {
+  constructor(protected roomService: RoomService) {
   }
 
   ngOnInit() {

src/app/room/room.component.ts

@@ -11,8 +11,8 @@ import { ActivatedRoute } from '@angular/router';
 export class RoomComponent implements OnInit {
   room: Room = null;
 
-  constructor(private roomService: RoomService,
-              private route: ActivatedRoute) {
+  constructor(protected roomService: RoomService,
+              protected route: ActivatedRoute) {
   }
 
   ngOnInit() {