Merge branch 'roomExtensions' into 'master'

Room extensions

See merge request swtp-2019/arsnova-lite!36

package.json

@@ -41,9 +41,9 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular-devkit/build-angular": "^0.13.7",
     "@angular/cli": "7.0.6",
-    "@angular/compiler-cli": "7.1.0",
+    "@angular/compiler-cli": "^7.2.11",
     "@angular/language-service": "7.1.0",
     "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@types/jasmine": "^2.8.8",

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-form-field class="input-block">
-    <input [(ngModel)]="editRoom.name" matInput placeholder="{{ 'session.session-name' | translate}}" name="room-name"/>
-  </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">
-            </textarea>
-  </mat-form-field>
+  <mat-card class="header" fxLayoutAlign="center">
+    <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"  maxlength="20"/>
+    </mat-form-field>
+    <mat-form-field class="input-block">
+              <textarea [(ngModel)]="editRoom.description" matInput matTextareaAutosize
+                        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">{{'room-page.comments' | translate}}</mat-card-title>
+  </mat-card>
+  <div  fxLayout="column">
+    <div fxLayout="row">
+      <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)]="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 {
+  background-color: mat-color($arsnova-primary,200);
+  margin: 0 0 10px 0;
+}
+
+.title {
+  // color: ;
+}
+
+#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 { 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',
@@ -10,15 +15,56 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 })
 export class RoomEditComponent implements OnInit {
   editRoom: Room;
+  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 {
+  ngOnInit() {
+    if (this.editRoom.extensions['comments'].commentThreshold != null) {
+      this.commentThreshold = this.editRoom.extensions['comments'].commentThreshold;
+    } else {
+      this.commentThreshold = -10;
+    }
+  }
+
+  onSliderChange(event: any) {
+    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`]);
   }
 
-  ngOnInit() {
+  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">
-        <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="accent"
-                  matTooltip="{{ 'room-page.edit-room' | translate}}">
-            <mat-icon>create</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,10 +6,10 @@ 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';
+import { TSMap } from 'typescript-map';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -20,6 +20,8 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
   room: Room;
   updRoom: Room;
   themeClass = localStorage.getItem('classNameOfTheme');
+  commentThreshold: number;
+  updCommentThreshold: number;
 
   constructor(protected roomService: RoomService,
               protected notification: NotificationService,
@@ -40,65 +42,41 @@ 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.notification.show('There were no changes');
-      return;
-    } else {
-      this.room.name = this.updRoom.name;
-      this.room.description = this.updRoom.description;
-      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);
+  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('commentThreshold', threshold);
+      this.room.extensions = new TSMap();
+      this.room.extensions.set('comments', commentExtension);
     }
-  }
-
-  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);
+        });
       });
   }
 
   showEditDialog(): void {
-    this.updRoom = new Room();
-    this.updRoom.name = this.room.name;
-    this.updRoom.shortId = this.room.shortId;
-    this.updRoom.description = this.room.description;
+    this.updRoom = this.room;
     const dialogRef = this.dialog.open(RoomEditComponent, {
       width: '400px'
     });
     dialogRef.componentInstance.editRoom = this.updRoom;
+    dialogRef.componentInstance.commentThreshold = this.updCommentThreshold;
     dialogRef.afterClosed()
       .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.ts

@@ -46,11 +46,11 @@ export class RoomCreateComponent implements OnInit {
       this.emptyInputs = true;
       return;
     }
-    this.roomService.addRoom({
-      name: longRoomName,
-      abbreviation: '00000000',
-      description: description
-    } as Room).subscribe(room => {
+    const newRoom = new Room();
+    newRoom.name = longRoomName;
+    newRoom.abbreviation = '00000000';
+    newRoom.description = description;
+    this.roomService.addRoom(newRoom).subscribe(room => {
       this.room = room;
       let msg1: string;
       let msg2: 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

@@ -10,6 +10,8 @@ import { WsCommentServiceService } from '../../../services/websockets/ws-comment
 import { User } from '../../../models/user';
 import { UserRole } from '../../../models/user-roles.enum';
 import { AuthenticationService } from '../../../services/http/authentication.service';
+import { Room } from '../../../models/room';
+import { RoomService } from '../../../services/http/room.service';
 
 @Component({
   selector: 'app-comment-list',
@@ -19,9 +21,10 @@ import { AuthenticationService } from '../../../services/http/authentication.ser
 export class CommentListComponent implements OnInit {
   @Input() user: User;
   @Input() roomId: string;
+  room: Room;
   comments: Comment[];
   isLoading = true;
-  hideCommentsList: boolean;
+  hideCommentsList = false;
   isIconHide: boolean;
   filteredComments: Comment[];
   userRole: UserRole;
@@ -30,13 +33,16 @@ export class CommentListComponent implements OnInit {
     private translateService: TranslateService,
     public dialog: MatDialog,
     protected langService: LanguageService,
+    private authenticationService: AuthenticationService,
     private wsCommentService: WsCommentServiceService,
-    private authenticationService: AuthenticationService) {
+    protected roomService: RoomService
+  ) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
   ngOnInit() {
     this.roomId = localStorage.getItem(`roomId`);
+    this.roomService.getRoom(this.roomId).subscribe( room => this.room = room);
     this.comments = [];
     this.hideCommentsList = false;
     this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
@@ -45,7 +51,6 @@ export class CommentListComponent implements OnInit {
     this.getComments();
     this.translateService.use(localStorage.getItem('currentLang'));
     this.userRole = this.authenticationService.getRole();
-
   }
 
   getComments(): void {
@@ -65,6 +70,32 @@ export class CommentListComponent implements OnInit {
     }
   }
 
+  getCommentsCreator(): Comment[] {
+    let commentThreshold = -10;
+    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 {
+      if (this.hideCommentsList) {
+        return this.filteredComments;
+      } else {
+        return this.comments;
+      }
+    }
+  }
+
+  getCommentsParticipant(): Comment[] {
+    if (this.hideCommentsList) {
+      return this.filteredComments;
+    } else {
+      return this.comments;
+    }
+  }
+
   parseIncomingMessage(message: Message) {
     const msg = JSON.parse(message.body);
     const payload = msg.payload;
@@ -74,7 +105,7 @@ export class CommentListComponent implements OnInit {
         c.roomId = this.roomId;
         c.body = payload.body;
         c.id = payload.id;
-        c.timestamp = new Date();
+        c.timestamp = payload.timestamp;
         this.comments = this.comments.concat(c);
         break;
       case 'CommentPatched':
@@ -105,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/models/room.ts

 import { ContentGroup } from './content-group';
+import { TSMap } from 'typescript-map';
 
 export class Room {
   id: string;
   revision: string;
+  ownerId: string;
   shortId: string;
   abbreviation: string;
   name: string;
   description: string;
   closed: boolean;
   contentGroups: ContentGroup[];
+  extensions: TSMap<string, TSMap<string, any>>;
+
+  constructor(
+    ownerId: string = '',
+    shortId: string = '',
+    abbreviation: string = '',
+    name: string = '',
+    description: string = '',
+    closed: boolean = false,
+    contentGroups: ContentGroup[] = [],
+    extensions: TSMap<string, TSMap<string, any>> = new TSMap()
+  ) {
+    this.id = '',
+    this.ownerId = ownerId;
+    this.shortId = shortId;
+    this.abbreviation = abbreviation;
+    this.name = name,
+    this.description = description;
+    this.closed = closed;
+    this.contentGroups = contentGroups;
+    this.extensions = extensions;
+  }
 }