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/app.module.ts

@@ -66,6 +66,7 @@ import { CommentService } from './comment.service';
 import { ParticipantHomeScreenComponent } from './participant-home-screen/participant-home-screen.component';
 import { ParticipantRoomComponent } from './participant-room/participant-room.component';
 import { DataStoreService } from './data-store.service';
+import { CreatorRoomComponent } from './creator-room/creator-room.component';
 
 @NgModule({
   declarations: [
@@ -87,7 +88,8 @@ import { DataStoreService } from './data-store.service';
     ParticipantHomeScreenComponent,
     CommentListComponent,
     ContentAnswersComponent,
-    ParticipantRoomComponent
+    ParticipantRoomComponent,
+    CreatorRoomComponent
   ],
   entryComponents: [
     RegisterComponent,

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

 <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
-    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
     <button mat-raised-button color="primary" (click)="openCreateRoomDialog()">Create new room</button>
   </div>
   <div fxLayout="row" fxLayoutAlign="center">

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 { Room } from '../room';
 
 @Component({
   selector: 'app-creator-home-screen',
@@ -8,8 +10,8 @@ import { RoomCreationComponent } from '../room-creation/room-creation.component'
   styleUrls: ['./creator-home-screen.component.scss']
 })
 export class CreatorHomeScreenComponent implements OnInit {
-
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog) {
+  }
 
   ngOnInit() {
   }

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

+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
+  <div fxLayout="row" fxLayoutAlign="center">
+    <mat-card *ngIf="room">
+      <mat-card-header>
+        <mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title>
+        <mat-card-subtitle>{{ room.id }}</mat-card-subtitle>
+      </mat-card-header>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <p>
+          {{ room.description }}
+        </p>
+      </mat-card-content>
+      <mat-divider></mat-divider>
+      <mat-card-actions>
+        <button mat-button color="primary" matTooltip="Create new content">
+          Create content
+        </button>
+        <button mat-button color="primary" matTooltip="See contents">
+          Contents
+        </button>
+        <button mat-button color="primary" matTooltip="See room comments">
+          Comments
+        </button>
+        <button mat-button color="warn" matTooltip="Delete selected room">
+          Delete room
+        </button>
+        <button mat-button color="primary" matTooltip="Go back to last page" (click)="goBack()">
+          Go back
+        </button>
+      </mat-card-actions>
+    </mat-card>
+    <div *ngIf="!isLoading && !room">Error</div>
+  </div>
+</div>

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

+mat-card {
+  max-width: 800px;
+}
+
+mat-card-content > :first-child {
+  margin-top: 16px;
+}

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

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreatorRoomComponent } from './creator-room.component';
+
+describe('CreatorRoomComponent', () => {
+  let component: CreatorRoomComponent;
+  let fixture: ComponentFixture<CreatorRoomComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreatorRoomComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreatorRoomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-creator-room',
+  templateUrl: './creator-room.component.html',
+  styleUrls: ['./creator-room.component.scss']
+})
+export class CreatorRoomComponent extends RoomComponent implements OnInit {
+  room: Room;
+
+  constructor(protected roomService: RoomService,
+              protected route: ActivatedRoute,
+              private location: Location) {
+    super(roomService, route);
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getRoom(params['roomId']);
+    });
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+
+}

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

 <form>
-  <mat-form-field class="input-block">
-    <input matInput placeholder="Room-Id" />
-  </mat-form-field>
-  <button mat-raised-button color="primary">Join</button>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+    <mat-form-field class="input-block">
+      <input matInput #roomId placeholder="Room-Id"/>
+    </mat-form-field>
+    <button mat-fab color="primary" routerLink="room/{{ roomId.value }}">
+      <mat-icon>send</mat-icon>
+    </button>
+  </div>
 </form>

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

-<app-join-room></app-join-room>
-<app-room-list></app-room-list>
+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+    <app-join-room></app-join-room>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+    <app-room-list></app-room-list>
+  </div>
+</div>
+

src/app/participant-home-screen/participant-home-screen.component.scss

+app-join-room {
+  max-width: 800px;
+}
+
+app-room-list {
+  width: 100%;
+  max-width: 800px;
+}

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

@@ -37,7 +37,7 @@ export class RoomCreationComponent implements OnInit {
     this.roomService.addRoom({ name: longRoomName, abbreviation: shortRoomName } as Room)
       .subscribe(room => {
         this.notification.show(`Room '${room.name}' successfully created.`);
-        this.router.navigate([`room/${room.id}`]);
+        this.router.navigate([`creator/room/${room.id}`]);
         this.dialogRef.close();
       });
   }

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

@@ -12,7 +12,7 @@
       {{ room.description }}
     </p>
     <mat-action-row>
-      <button mat-button routerLink="/room/{{ room.id }}">Join room</button>
+      <button mat-button routerLink="room/{{ room.id }}">Join room</button>
     </mat-action-row>
   </mat-expansion-panel>
 </mat-accordion>

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.service.ts

@@ -19,23 +19,23 @@ export class RoomService extends ErrorHandlingService {
 
   getRooms(): Observable<Room[]> {
     return this.http.get<Room[]>(this.roomsUrl).pipe(
-      tap (_ => ''),
+      tap(_ => ''),
       catchError(this.handleError('getRooms', []))
     );
   }
 
   addRoom(room: Room): Observable<Room> {
     return this.http.post<Room>(this.roomsUrl, room, httpOptions).pipe(
-     tap (_ => ''),
-     catchError(this.handleError<Room>('addRoom'))
-   );
+      tap(_ => ''),
+      catchError(this.handleError<Room>('addRoom'))
+    );
   }
 
   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}`))
-  );
+      tap(_ => ''),
+      catchError(this.handleError<Room>(`getRoom id=${id}`))
+    );
   }
 }

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() {