Fix comment settings extensions

src/app/components/creator/_dialogs/content-edit/content-edit.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
   <mat-form-field>
-    <input matInput [(ngModel)]="content.subject" maxlength="20" placeholder="{{'content.subject' | translate}}" name="subject"/>
+    <input matInput [(ngModel)]="content.subject" maxlength="40" placeholder="{{'content.subject' | translate}}" name="subject"/>
   </mat-form-field>
   <mat-form-field>
-    <textarea matInput [(ngModel)]="content.body" rows="3" maxlength="100" placeholder="{{'content.body' | translate}}" name="body"></textarea>
+    <textarea matInput [(ngModel)]="content.body" rows="3" maxlength="255" placeholder="{{'content.body' | translate}}" name="body"></textarea>
   </mat-form-field>
   <h4>{{'content.answers' | translate}}</h4>
   <mat-table [dataSource]="displayAnswers">
     <ng-container matColumnDef="label">
       <mat-cell *matCellDef="let answer">
         <mat-form-field class="input-block">
-          <input matInput [(ngModel)]="answer.answerOption.label" maxlength="20" name="answer"/>
+          <input matInput [(ngModel)]="answer.answerOption.label" maxlength="50" name="answer"/>
         </mat-form-field>
       </mat-cell>
     </ng-container>

src/app/components/creator/_dialogs/room-delete/room-delete.component.ts

 import { Component, Inject, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { NotificationService } from '../../../../services/util/notification.service';
 import { RoomCreateComponent } from '../../../shared/_dialogs/room-create/room-create.component';
-import { RoomService } from '../../../../services/http/room.service';
 import { Room } from '../../../../models/room';
 
 @Component({
@@ -14,10 +11,7 @@ import { Room } from '../../../../models/room';
 export class RoomDeleteComponent implements OnInit {
   room: Room;
 
-  constructor(private roomService: RoomService,
-              private router: Router,
-              private notification: NotificationService,
-              public dialogRef: MatDialogRef<RoomCreateComponent>,
+  constructor(              public dialogRef: MatDialogRef<RoomCreateComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 

src/app/components/creator/_dialogs/room-edit/room-edit.component.html

 <div *ngIf="editRoom">
   <mat-card class="header" fxLayoutAlign="center">
-    <mat-card-title class="title" fxLayoutAlign="center">General</mat-card-title>
+    <mat-card-title class="title" fxLayoutAlign="center">{{'room-page.general' | translate}}</mat-card-title>
   </mat-card>
   <div fxLayout="column">
     <mat-form-field class="input-block">
-      <input [(ngModel)]="editRoom.name" matInput placeholder="{{ 'session.session-name' | translate}}" name="room-name"/>
+      <input [(ngModel)]="editRoom.name" matInput placeholder="{{ 'session.session-name' | translate}}"
+             name="room-name"  maxlength="20"/>
     </mat-form-field>
     <mat-form-field class="input-block">
               <textarea [(ngModel)]="editRoom.description" matInput matTextareaAutosize
-                        matAutosizeMinRows="2" matAutosizeMaxRows="5" placeholder="{{ 'session.description' | translate}}" name="description">
+                        matAutosizeMinRows="2" matAutosizeMaxRows="5"  maxlength="255"
+                        placeholder="{{ 'session.description' | translate}}" name="description">
               </textarea>
     </mat-form-field>
+    <div fxLayoutAlign="center center">
+      <button mat-raised-button class="delete" (click)="openDeletionRoomDialog()"><mat-icon>delete</mat-icon>Session löschen</button>
+    </div>
   </div>
   <mat-card class="header" fxLayoutAlign="center">
-    <mat-card-title class="title" fxLayoutAlign="center">Comments</mat-card-title>
+    <mat-card-title class="title" fxLayoutAlign="center">{{'room-page.comments' | translate}}</mat-card-title>
   </mat-card>
   <div  fxLayout="column">
     <div fxLayout="row">
-      <mat-label>Threshold for visible comments:</mat-label>
-      <span class="fill-remaining-space"></span>
-      <mat-label>{{commentThreshold | number}}</mat-label>
+      <h3>{{ 'room-page.threshold' | translate}}</h3>
+      <h3>{{commentThreshold | number}}</h3>
     </div>
       <mat-slider id="commentSlider" min="-50" max="50" step="1" value="0"
-                  color="accent" [(ngModel)]="editRoom.commentThreshold" (input)="onSliderChange($event)"></mat-slider>
+                  color="accent" [(ngModel)]="commentThreshold" (input)="onSliderChange($event)"></mat-slider>
   </div>
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
     <button (click)="dialogRef.close('abort')" mat-button color="primary">
       {{ 'room-page.abort' | translate}}
     </button>
-    <button (click)="dialogRef.close('edit')" mat-raised-button color="primary">
+    <button (click)="dialogRef.close(commentThreshold)" mat-raised-button color="primary">
       {{ 'room-page.update' | translate}}
     </button>
   </div>

src/app/components/creator/_dialogs/room-edit/room-edit.component.scss

 @import '../../../../../styles';
 
 .header {
-  color: black;
-  background-color: mat-color($arsnova-primary,500);
+  background-color: mat-color($arsnova-primary,200);
   margin: 0 0 10px 0;
 }
 
@@ -13,3 +12,15 @@
 #commentSlider {
   width: 100%;
 }
+
+.delete {
+  margin-bottom: 20px;
+  min-width: 170px;
+  width: 60%;
+  background-color: mat-color($arsnova-warn,300);
+}
+
+mat-icon {
+  margin-right: 10px;
+}
+

src/app/components/creator/_dialogs/room-edit/room-edit.component.ts

 import { Component, Inject, OnInit } from '@angular/core';
 import { Room } from '../../../../models/room';
 import { RoomCreateComponent } from '../../../shared/_dialogs/room-create/room-create.component';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { TSMap } from 'typescript-map';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
+import { RoomDeleteComponent } from '../room-delete/room-delete.component';
+import { NotificationService } from '../../../../services/util/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { RoomService } from '../../../../services/http/room.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-room-edit',
@@ -14,29 +18,53 @@ export class RoomEditComponent implements OnInit {
   commentThreshold: number;
 
   constructor(public dialogRef: MatDialogRef<RoomCreateComponent>,
+              public dialog: MatDialog,
+              public notificationService: NotificationService,
+              public translationService: TranslateService,
+              protected roomService: RoomService,
+              public router: Router,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
   ngOnInit() {
-    // ToDo: implement a more robust way
-    // ToDo: have a default comment threshold defined in config files
-    if (this.editRoom.extensions != null) {
-      const commentExtension = this.editRoom.extensions.get('comments');
-      if ((commentExtension != null) && commentExtension.get('threshold') != null) {
-        this.commentThreshold = commentExtension.get('threshold');
-      } else {
-        this.commentThreshold = -10;
-      }
+    if (this.editRoom.extensions['comments'].commentThreshold != null) {
+      this.commentThreshold = this.editRoom.extensions['comments'].commentThreshold;
     } else {
       this.commentThreshold = -10;
     }
   }
 
   onSliderChange(event: any) {
-    this.commentThreshold = event.value;
+    if (event.value) {
+      this.commentThreshold = event.value;
+    } else {
+      this.commentThreshold = 0;
+    }
+  }
+
+  openDeletionRoomDialog(): void {
+    const dialogRef = this.dialog.open(RoomDeleteComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.room = this.editRoom;
+    dialogRef.afterClosed()
+      .subscribe(result => {
+        this.confirmDeletion(result);
+      });
+  }
+
+  deleteRoom(room: Room): void {
+    this.translationService.get('room-page.deleted').subscribe(msg => {
+      this.notificationService.show(room.name + msg);
+    });
+    this.roomService.deleteRoom(room.id).subscribe();
+    this.dialogRef.close();
+    this.router.navigate([`/creator`]);
+  }
+
+  confirmDeletion(dialogAnswer: string): void {
+    if (dialogAnswer === 'delete') {
+      this.deleteRoom(this.editRoom);
+    }
   }
 }

src/app/components/creator/content-creator/content-creator.component.html

 <form>
 <mat-form-field class="input-block">
   <input matInput #subject [(ngModel)]="content.subject" placeholder="{{'content.subject' | translate}}" name="subject"
-  maxlength="20">
+  maxlength="40">
 </mat-form-field>
 <mat-form-field class="input-block">
     <textarea matInput #body [(ngModel)]="content.body" placeholder="{{'content.body' | translate}}" name="body"
-              matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8" maxlength="100"></textarea>
+              matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8" maxlength="255"></textarea>
 </mat-form-field>
 <mat-form-field>
   <input matInput #group [formControl]="myControl" [matAutocomplete]="auto"

src/app/components/creator/content-list/content-list.component.html

@@ -14,23 +14,23 @@
     <mat-grid-list cols="3" rowHeight="1:1">
       <mat-grid-tile>
         <button class="actionButton" mat-icon-button color="primary"
-                matTooltip="{{ 'room-page.create-content' | translate}}"
                 routerLink="/creator/room/{{ roomId }}/create-content">
-          <mat-icon class="actionIcon">note_add</mat-icon>
+          <mat-icon class="actionIcon" matTooltip="{{ 'room-page.create-content' | translate}}">note_add</mat-icon>
+          <h3>{{ 'room-page.create-content' | translate}}</h3>
         </button>
       </mat-grid-tile>
       <mat-grid-tile>
         <button class="actionButton" mat-icon-button color="primary"
-                matTooltip="{{ 'room-page.present' | translate}}"
                 routerLink="/creator/room/{{ roomId }}/{{ contentGroup.name }}/presentation">
-          <mat-icon class="actionIcon">school</mat-icon>
+          <mat-icon class="actionIcon" matTooltip="{{ 'room-page.present' | translate}}">school</mat-icon>
+          <h3>{{ 'room-page.present' | translate}}</h3>
         </button>
       </mat-grid-tile>
       <mat-grid-tile>
         <button class="actionButton" mat-icon-button color="primary"
-                matTooltip="{{ 'room-page.answer-statistics' | translate}}"
                 routerLink="/creator/room/{{ roomId }}/statistics">
-          <mat-icon class="actionIcon">insert_chart</mat-icon>
+          <mat-icon class="actionIcon" matTooltip="{{ 'room-page.answer-statistics' | translate}}">insert_chart</mat-icon>
+          <h3>{{ 'room-page.answer-statistics' | translate}}</h3>
         </button>
       </mat-grid-tile>
     </mat-grid-list>

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

@@ -2,18 +2,25 @@
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-progress-spinner *ngIf="isLoading" color="accent" mode="indeterminate"></mat-progress-spinner>
     <mat-card *ngIf="room">
-      <mat-card-header fxLayoutAlign="center" fxLayout="row">
-        <mat-card-title fxLayoutAlign="center">
-          <h2>{{ room.name }}</h2>
-        </mat-card-title>
-        <mat-card-subtitle fxLayoutAlign="center">
-          <h3>
-            {{ room.shortId.slice(0,4) }} {{  room.shortId.slice(4,8) }}
-          </h3>
-        </mat-card-subtitle>
-      </mat-card-header>
+      <div fxLayout="row">
+        <span class="fill-remaining-space"></span>
+        <mat-card-header fxLayoutAlign="center" fxLayout="row">
+          <mat-card-title fxLayoutAlign="center">
+            <h2>{{ room.name }}</h2>
+          </mat-card-title>
+          <mat-card-subtitle fxLayoutAlign="center">
+            <h3>
+              {{ room.shortId.slice(0, 4) }} {{  room.shortId.slice(4, 8) }}
+            </h3>
+          </mat-card-subtitle>
+        </mat-card-header>
+        <span class="fill-remaining-space"></span>
+        <button mat-icon-button id="settings" *ngIf="!modify" (click)="showEditDialog()" color="primary">
+          <mat-icon id="settings-icon" matTooltip="{{ 'room-page.session-settings' | translate}}">settings</mat-icon>
+        </button>
+      </div>
       <mat-divider></mat-divider>
-      <mat-card-content fxLayoutAlign="center">
+      <mat-card-content id="description" fxLayoutAlign="center">
         <mat-expansion-panel *ngIf="!(room.description == '')" class="mat-elevation-z0">
           <mat-expansion-panel-header>
             <h4>{{ 'room-page.description' | translate }}</h4>
@@ -23,44 +30,35 @@
           </p>
         </mat-expansion-panel>
       </mat-card-content>
-      <mat-grid-list cols="3" rowHeight="2:1">
+      <mat-grid-list cols="2" rowHeight="2:1">
         <mat-grid-tile colspan="1" rowspan="1">
-        <button mat-icon-button color="primary" matTooltip="{{ 'room-page.create-content' | translate}}"
-                routerLink="/creator/room/{{ room.shortId }}/create-content">
-          <mat-icon>note_add</mat-icon>
-        </button>
-        </mat-grid-tile>
-        <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.comments' | translate}}"
-                  routerLink="/creator/room/{{ room.shortId }}/comments">
-            <mat-icon>question_answer</mat-icon>
+          <button mat-icon-button color="primary"
+                  routerLink="/creator/room/{{ room.shortId }}/create-content">
+            <mat-icon matTooltip="{{ 'room-page.create-content' | translate}}">note_add</mat-icon>
+            <h3>{{ 'room-page.create-content' | translate}}</h3>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-icon-button *ngIf="!modify" (click)="showEditDialog()" color="primary"
-                  matTooltip="{{ 'room-page.session-settings' | translate}}">
-            <mat-icon>settings</mat-icon>
+          <button mat-icon-button color="primary"
+                  routerLink="/creator/room/{{ room.shortId }}/comments">
+            <mat-icon matTooltip="{{ 'room-page.comments' | translate}}">question_answer</mat-icon>
+            <h3>{{ 'room-page.comments' | translate}}</h3>
           </button>
         </mat-grid-tile>
       </mat-grid-list>
-      <mat-grid-list cols="3" rowHeight="2:1">
-        <mat-grid-tile>
-         <button mat-icon-button color="primary" matTooltip="{{ 'room-page.answer-statistics' | translate}}"
-                 routerLink="/creator/room/{{ room.shortId }}/statistics">
-           <mat-icon>insert_chart</mat-icon>
-         </button>
-        </mat-grid-tile>
+      <mat-grid-list cols="2" rowHeight="2:1">
         <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.live-feedback' | translate}}"
-                  routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
-            <mat-icon class="smallerIcon">thumbs_up_down</mat-icon>
+          <button mat-icon-button color="primary" routerLink="/creator/room/{{ room.shortId }}/statistics">
+            <mat-icon matTooltip="{{ 'room-page.answer-statistics' | translate}}">insert_chart</mat-icon>
+           <h3>{{ 'room-page.answer-statistics' | translate}}</h3>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-        <button mat-icon-button color="warn" (click)="openDeletionRoomDialog()"
-                matTooltip="{{ 'room-page.delete-room' | translate}}">
-          <mat-icon>delete_forever</mat-icon>
-        </button>
+          <button mat-icon-button color="primary" routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
+            <mat-icon class="smallerIcon" matTooltip="{{ 'room-page.live-feedback' | translate}}">thumbs_up_down
+            </mat-icon>
+            <h3>{{ 'room-page.live-feedback' | translate}}</h3>
+          </button>
         </mat-grid-tile>
       </mat-grid-list>
       <app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>

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

@@ -17,12 +17,27 @@ button {
   }
 }
 
+#description {
+  margin-bottom: 0px;
+}
+
 .mat-icon-button {
   width: 75%;
   height: 75%;
   margin-bottom: 20px;
 }
 
+#settings {
+  width: 10%;
+  max-width: 40px;
+}
+
+#settings-icon {
+  font-size: 35px;
+  height: 35px;
+  width: 35px;
+}
+
 mat-icon {
   font-size: 50px;
   height: 50px;

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

@@ -6,7 +6,6 @@ import { Room } from '../../../models/room';
 import { Location } from '@angular/common';
 import { NotificationService } from '../../../services/util/notification.service';
 import { MatDialog } from '@angular/material';
-import { RoomDeleteComponent } from '../_dialogs/room-delete/room-delete.component';
 import { RoomEditComponent } from '../_dialogs/room-edit/room-edit.component';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
@@ -43,51 +42,20 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     });
   }
 
-  /* TODO: i18n */
-
-  updateRoom(): void {
-    if ((this.updRoom.name === this.room.name) &&
-      (this.updRoom.description === this.room.description) &&
-      (this.commentThreshold === this.updCommentThreshold)
-    ) {
-      this.notification.show('There were no changes');
-      return;
-    } else {
-      this.room.name = this.updRoom.name;
-      this.room.description = this.updRoom.description;
-      if (this.room.extensions === null) {
-        this.room.extensions = new TSMap();
-      }
+  updateRoom(threshold: number): void {
+    this.room.name = this.updRoom.name;
+    this.room.description = this.updRoom.description;
+    if (threshold > -50) {
       const commentExtension: TSMap<string, any> = new TSMap();
-      commentExtension.set('threshold', this.updCommentThreshold);
+      commentExtension.set('commentThreshold', threshold);
+      this.room.extensions = new TSMap();
       this.room.extensions.set('comments', commentExtension);
-      this.roomService.updateRoom(this.room)
-        .subscribe(() => {
-          this.notification.show('Changes are made');
-        });
-    }
-  }
-
-  deleteRoom(room: Room): void {
-    const msg = room.name + ' deleted';
-    this.notification.show(msg);
-    this.delete(room);
-  }
-
-  confirmDeletion(dialogAnswer: string): void {
-    if (dialogAnswer === 'delete') {
-      this.deleteRoom(this.room);
     }
-  }
-
-  openDeletionRoomDialog(): void {
-    const dialogRef = this.dialog.open(RoomDeleteComponent, {
-      width: '400px'
-    });
-    dialogRef.componentInstance.room = this.room;
-    dialogRef.afterClosed()
-      .subscribe(result => {
-        this.confirmDeletion(result);
+    this.roomService.updateRoom(this.room)
+      .subscribe(() => {
+        this.translateService.get('room-page.changes-successful').subscribe(msg => {
+          this.notification.show(msg);
+        });
       });
   }
 
@@ -102,11 +70,13 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
       .subscribe(result => {
         if (result === 'abort') {
           return;
-        }
-        if (result === 'edit') {
-          this.updateRoom();
+        } else {
+          this.updateRoom(+result);
         }
       });
+    dialogRef.backdropClick().subscribe( res => {
+        dialogRef.close('abort');
+    });
   }
 }
 

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

@@ -23,21 +23,18 @@
       </mat-card-content>
       <mat-grid-list cols="3" rowHeight="2:1">
         <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.create-comment' | translate}}"
-                  routerLink="/participant/room/{{ room.shortId }}/comments">
-            <mat-icon>question_answer</mat-icon>
+          <button mat-icon-button color="primary" routerLink="/participant/room/{{ room.shortId }}/comments">
+            <mat-icon matTooltip="{{ 'room-page.create-comment' | translate}}">question_answer</mat-icon>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.give-feedback' | translate}}"
-                  routerLink="/participant/room/{{ room.shortId }}/feedback-barometer">
-            <mat-icon>thumbs_up_down</mat-icon>
+          <button mat-icon-button color="primary" routerLink="/participant/room/{{ room.shortId }}/feedback-barometer">
+            <mat-icon matTooltip="{{ 'room-page.give-feedback' | translate}}">thumbs_up_down</mat-icon>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="Lernstand"
-                  routerLink="/participant/room/{{ room.shortId }}/statistics">
-            <mat-icon>insert_chart</mat-icon>
+          <button mat-icon-button color="primary" routerLink="/participant/room/{{ room.shortId }}/statistics">
+            <mat-icon matTooltip="{{ 'statistic.answer-statistic' | translate}}">insert_chart</mat-icon>
           </button>
         </mat-grid-tile>
       </mat-grid-list>

src/app/components/shared/_dialogs/room-create/room-create.component.html

-<form (ngSubmit)="addRoom(longRoomName.value, description.value, -100)">
+<form (ngSubmit)="addRoom(longRoomName.value, description.value)">
   <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field>
       <input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text"

src/app/components/shared/_dialogs/room-create/room-create.component.ts

@@ -6,7 +6,6 @@ import { NotificationService } from '../../../../services/util/notification.serv
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { ContentService } from '../../../../services/http/content.service';
 import { TranslateService } from '@ngx-translate/core';
-import { TSMap } from 'typescript-map';
 
 @Component({
   selector: 'app-room-create',
@@ -41,7 +40,7 @@ export class RoomCreateComponent implements OnInit {
     this.emptyInputs = false;
   }
 
-  addRoom(longRoomName: string, description: string, commentThreshold: number) {
+  addRoom(longRoomName: string, description: string) {
     longRoomName = longRoomName.trim();
     if (!longRoomName) {
       this.emptyInputs = true;
@@ -51,9 +50,6 @@ export class RoomCreateComponent implements OnInit {
     newRoom.name = longRoomName;
     newRoom.abbreviation = '00000000';
     newRoom.description = description;
-    const commentExtension: TSMap<string, any> = new TSMap();
-    commentExtension.set('commentThreshold', commentThreshold);
-    newRoom.extensions.set('comments', commentExtension);
     this.roomService.addRoom(newRoom).subscribe(room => {
       this.room = room;
       let msg1: string;

src/app/components/shared/comment-list/comment-list.component.html

@@ -4,19 +4,20 @@
   </mat-label>
   <input #searchBox placeholder="{{ 'comment-list-page.search' | translate }}"
     (input)="searchComments(searchBox.value)">
-  <button mat-button *ngIf="searchBox.value || isIconHide" (click)="hideCommentsList=false; searchBox.value=''; isIconHide=false">
+  <button mat-icon-button *ngIf="searchBox.value || isIconHide" (click)="hideCommentsList=false; searchBox.value=''; isIconHide=false">
     <mat-icon>close</mat-icon>
   </button>
-  <button mat-button *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
+  <span class="fill-remaining-space"></span>
+  <button mat-icon-button *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
     [matTooltip]="'Export comments'" (click)="export(true)">
     <mat-icon class="add-icon" id="export-icon">cloud_download</mat-icon>
   </button>
 
-  <button mat-button *ngIf="!searchBox.value && !isIconHide" color="accent" (click)="openSubmitDialog()">
+  <button mat-icon-button *ngIf="!searchBox.value && !isIconHide" color="accent" (click)="openSubmitDialog()">
     <mat-icon class="add-icon">add_circle</mat-icon>
   </button>
 
-  <mat-icon mat-icon-button *ngIf="!searchBox.value" class="add-filterIcon" color="accent" [matMenuTriggerFor]="filterMenu">
+  <mat-icon mat-icon-button *ngIf="!searchBox.value" class="filterIcon" color="accent" [matMenuTriggerFor]="filterMenu">
     sort
   </mat-icon>
 
@@ -49,9 +50,10 @@
   </mat-menu>
 </div>
 
-<mat-card id="outer-card" *ngIf="hideCommentsList">
-  <app-comment *ngFor="let current of filteredComments" [comment]="current"></app-comment>
+<mat-card class="outer-card" *ngIf="user.role === 0">
+  <app-comment *ngFor="let current of getCommentsParticipant()" [comment]="current"></app-comment>
 </mat-card>
-<mat-card *ngIf="!hideCommentsList">
-  <app-comment *ngFor="let current of comments | orderBy: 'timestamp'" [comment]="current"></app-comment>
+<mat-card class="outer-card" *ngIf="user.role === 1">
+  <app-comment *ngFor="let current of getCommentsCreator()" [comment]="current"></app-comment>
 </mat-card>
+

src/app/components/shared/comment-list/comment-list.component.scss

-#outer-card {
+.outer-card {
   margin-bottom: 10px;
   background-color: var(--comment-list-bg);
 }
@@ -11,7 +11,7 @@ app-comment {
 input {
   box-sizing: border-box;
   padding: 0 10px 0 5px;
-  width: 90%;
+  width: 50%;
   background-color: var(--input-search-cl);
   border: none;
   outline: none;
@@ -26,6 +26,10 @@ input {
   margin-bottom: 10px;
 }
 
+.search-icon {
+  padding: 10px;
+}
+
 .add-button {
   width: 44px !important;
   height: 44px !important;
@@ -39,15 +43,16 @@ input {
   line-height: 100% !important;
 }
 
-.search-icon {
-  padding: 10px;
+.mat-icon-button {
+  min-width: 50px;
+  margin: 10px 2% 0px 0px;
 }
 
 #export-icon {
   color: rgba(30,136,229,0.7)
 }
 
-.add-filterIcon {
+.filterIcon {
   font-size: 45px;
   height: 50px;
   width: 50px;

src/app/components/shared/comment-list/comment-list.component.ts

@@ -24,7 +24,7 @@ export class CommentListComponent implements OnInit {
   room: Room;
   comments: Comment[];
   isLoading = true;
-  hideCommentsList: boolean;
+  hideCommentsList = false;
   isIconHide: boolean;
   filteredComments: Comment[];
   userRole: UserRole;
@@ -33,7 +33,6 @@ export class CommentListComponent implements OnInit {
     private translateService: TranslateService,
     public dialog: MatDialog,
     protected langService: LanguageService,
-    private wsCommentService: WsCommentServiceService,
     private authenticationService: AuthenticationService,
     private wsCommentService: WsCommentServiceService,
     protected roomService: RoomService
@@ -52,7 +51,6 @@ export class CommentListComponent implements OnInit {
     this.getComments();
     this.translateService.use(localStorage.getItem('currentLang'));
     this.userRole = this.authenticationService.getRole();
-
   }
 
   getComments(): void {
@@ -73,23 +71,25 @@ export class CommentListComponent implements OnInit {
   }
 
   getCommentsCreator(): Comment[] {
-    // ToDo: get a default comment threshold from config settings file
     let commentThreshold = -10;
-    if (
-      (this.room.extensions.get('comments') != null) &&
-      (this.room.extensions.get('comments').get('commentThreshold'))
-    ) {
-      commentThreshold = this.room.extensions.get('comments').get('commentThreshold');
-    }
-    if (this.hideCommentsList) {
-      return this.filteredComments.filter( x => x.score >= commentThreshold );
+    if (this.room.extensions) {
+      commentThreshold = this.room.extensions['comments'].commentThreshold;
+      if (this.hideCommentsList) {
+        return this.filteredComments.filter( x => x.score >= commentThreshold );
+      } else {
+        return this.comments.filter( x => x.score >= commentThreshold );
+      }
     } else {
-      return  this.comments.filter( x => x.score >= commentThreshold );
+      if (this.hideCommentsList) {
+        return this.filteredComments;
+      } else {
+        return this.comments;
+      }
     }
   }
 
   getCommentsParticipant(): Comment[] {
-    if ( this.hideCommentsList) {
+    if (this.hideCommentsList) {
       return this.filteredComments;
     } else {
       return this.comments;
@@ -105,7 +105,7 @@ export class CommentListComponent implements OnInit {
         c.roomId = this.roomId;
         c.body = payload.body;
         c.id = payload.id;
-        c.creationTimestamp = payload.timestamp;
+        c.timestamp = payload.timestamp;
         this.comments = this.comments.concat(c);
         break;
       case 'CommentPatched':
@@ -136,8 +136,6 @@ export class CommentListComponent implements OnInit {
         for (let i = 0; i < this.comments.length; i++) {
           if (payload.id === this.comments[i].id) {
             this.comments[i].highlighted = <boolean>payload.lights;
-            console.log(<boolean>payload.lights);
-            console.log(this.comments[i]);
           }
         }
         break;

src/app/components/shared/comment/comment.component.ts

@@ -66,7 +66,6 @@ export class CommentComponent implements OnInit {
     }
     this.language = localStorage.getItem('currentLang');
     this.translateService.use(this.language);
-    console.log(this.comment);
   }
 
   startAnimation(state_: any): void {

src/app/components/shared/header/header.component.html

@@ -55,8 +55,7 @@
       <mat-icon>account_box</mat-icon>
     </button>
     <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="appMenu">
-      <mat-icon *ngIf="user.role === 1" aria-label="Example icon-button with a heart icon">record_voice_over</mat-icon>
-      <mat-icon *ngIf="user.role === 0" aria-label="Example icon-button with a heart icon">supervisor_account</mat-icon>
+      <mat-icon>account_box</mat-icon>
     </button>
   </mat-toolbar-row>
 </mat-toolbar>

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

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { catchError, tap, map } from 'rxjs/operators';
 import { AuthenticationService } from './authentication.service';
 import { BaseHttpService } from './base-http.service';
+import { TSMap } from 'typescript-map';
 
 const httpOptions = {
   headers: new HttpHeaders({})
@@ -58,6 +59,7 @@ export class RoomService extends BaseHttpService {
   getRoom(id: string): Observable<Room> {
     const connectionUrl = `${ this.apiUrl.base +  this.apiUrl.rooms }/${ id }`;
     return this.http.get<Room>(connectionUrl).pipe(
+      map(room => this.parseExtensions(room)),
       map(room => this.parseDefaultContentGroup(room)),
       tap(room => this.setRoomId(room)),
       catchError(this.handleError<Room>(`getRoom keyword=${ id }`))
@@ -105,6 +107,15 @@ export class RoomService extends BaseHttpService {
     return room;
   }
 
+  parseExtensions(room: Room): Room {
+    if (room.extensions) {
+      let extensions: TSMap<string, TSMap<string, any>> = new TSMap();
+      extensions = room.extensions;
+      room.extensions = extensions;
+    }
+    return room;
+  }
+
   setRoomId(room: Room): void {
     localStorage.setItem('roomId', room.id);
   }

src/assets/i18n/creator/de.json

@@ -15,12 +15,16 @@
     "reallySession": "Wollen Sie die Session ",
     "reallyContent": "Wollen Sie die Frage ",
     "really2": " wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
+    "deleted": " erfolgreich gelöscht.",
     "abort": "Abbrechen",
     "update": "Update",
+    "changes-successful": "Änderungen erfolgreich.",
     "default-content-group": "Standard",
     "description": "Beschreibung",
     "present": "Präsentieren",
-    "session-settings": "Session Einstellungen"
+    "session-settings": "Session Einstellungen",
+    "general": "Allgemein",
+    "threshold": "Schwellenwert für sichtbare Kommentare: "
   },
   "content": {
     "content": "Frage",
@@ -80,7 +84,7 @@
     "enter-comment": "Kommentar",
     "send": "Senden",
     "abort": "Abbrechen",
-    "error-comment": "Bitte geben Sie ein Kommentar ein.",
+    "error-comment": "Bitte geben Sie einen Kommentar ein.",
     "error-title": "Bitte geben Sie einen Titel ein.",
     "error-both-fields": "Bitte füllen Sie alle Felder aus.",
     "delimiter": "Bitte wählen Sie ein Trennzeichen:",