Open moderators-dialog when button clicked

src/app/components/creator/creator.module.ts

@@ -22,7 +22,7 @@ import { ContentListComponent } from './content-list/content-list.component';
 import { ContentEditComponent } from './_dialogs/content-edit/content-edit.component';
 import { ContentPresentationComponent } from './content-presentation/content-presentation.component';
 import { CommentExportComponent } from './_dialogs/comment-export/comment-export.component';
-import { ModeratorsComponent } from './_dialogs/moderators/moderators';
+import { ModeratorsComponent } from './_dialogs/moderators/moderators.component';
 
 @NgModule({
   imports: [
@@ -66,7 +66,8 @@ import { ModeratorsComponent } from './_dialogs/moderators/moderators';
     ContentTextCreatorComponent,
     ContentYesNoCreatorComponent,
     ContentEditComponent,
-    CommentExportComponent
+    CommentExportComponent,
+    ModeratorsComponent
   ]
 })
 export class CreatorModule {

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

@@ -15,7 +15,7 @@
           </mat-card-subtitle>
         </mat-card-header>
         <span class="fill-remaining-space"></span>
-        <button mat-icon-button class="corner-icons" id="person" (click)="showModeratorsDialog()">
+        <button mat-icon-button class="corner-icons" (click)="showModeratorsDialog()">
           <mat-icon class="corner-icon" id="moderators-icon" matTooltip="{{ 'room-page.moderators' | translate}}">person</mat-icon>
         </button>
         <button mat-icon-button class="corner-icons" id="settings" (click)="showSettingsDialog()">

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

@@ -36,11 +36,10 @@ button {
   margin-bottom: 5%;
 }
 
-
-  .corner-icons {
-    width: 10%;
-    max-width: 40px;
-  }
+.corner-icons {
+  width: 10%;
+  max-width: 40px;
+}
 
 .corner-icon {
   font-size: 35px;

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

@@ -12,6 +12,7 @@ import { LanguageService } from '../../../services/util/language.service';
 import { TSMap } from 'typescript-map';
 import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
 import { CommentService } from '../../../services/http/comment.service';
+import { ModeratorsComponent } from '../_dialogs/moderators/moderators.component';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -84,7 +85,9 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
   }
 
   showModeratorsDialog(): void {
-
+    const dialogRef = this.dialog.open(ModeratorsComponent, {
+      width: '400px'
+    });
   }
 }
 

src/app/components/shared/room-join/room-join.component.ts

@@ -62,7 +62,6 @@ export class RoomJoinComponent implements OnInit {
           if (!this.user) {
             this.guestLogin();
           } else {
-            console.log(room);
             if (this.user.role === UserRole.CREATOR) {
               this.authenticationService.logout();
               this.guestLogin();

src/app/services/http/moderator.service.ts

@@ -30,11 +30,11 @@ export class ModeratorService extends BaseHttpService {
     );
   }
 
-  put(roomId: string, userId: string) {
+  add(roomId: string, userId: string) {
     const url = `${this.apiUrl.base + this.apiUrl.room}/${roomId + this.apiUrl.moderator}/${userId}`;
     return this.http.put(url, httpOptions).pipe(
       tap(_ => ''),
-      catchError(this.handleError<any>('putModerator'))
+      catchError(this.handleError<any>('addModerator'))
     );
   }