Add header for different settigs, feature currently not working threshold is not saved correctly

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/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-slider thumbLabel id="commentSlider" tickInterval="0" min="-50" max="50" step="1" value="0"
-              color="accent"></mat-slider>
+  <mat-card class="header" fxLayoutAlign="center">
+    <mat-card-title class="title" fxLayoutAlign="center">General</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"/>
+    </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>
+  </div>
+  <mat-card class="header" fxLayoutAlign="center">
+    <mat-card-title class="title" fxLayoutAlign="center">Comments</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>{{editRoom.commentThreshold | number}}</mat-label>
+    </div>
+      <mat-slider id="commentSlider" min="-50" max="50" step="1" value="0"
+                  color="accent" [(ngModel)]="editRoom.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}}

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

+@import '../../../../../styles';
+
+.header {
+  color: black;
+  background-color: mat-color($arsnova-primary,500);
+  margin: 0 0 10px 0;
+}
+
+.title {
+  // color: ;
+}
+
 #commentSlider {
   width: 100%;
 }

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

@@ -20,5 +20,10 @@ export class RoomEditComponent implements OnInit {
   }
 
   ngOnInit() {
+
+  }
+
+  onSliderChange(event: any) {
+    this.editRoom.commentThreshold = event.value;
   }
 }

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

@@ -44,13 +44,15 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
 
   updateRoom(): void {
     if ((this.updRoom.name === this.room.name) &&
-      (this.updRoom.description === this.room.description)
+      (this.updRoom.description === this.room.description) &&
+      (this.updRoom.commentThreshold === this.room.commentThreshold)
     ) {
       this.notification.show('There were no changes');
       return;
     } else {
       this.room.name = this.updRoom.name;
       this.room.description = this.updRoom.description;
+      this.room.commentThreshold = this.updRoom.commentThreshold;
       this.roomService.updateRoom(this.room)
         .subscribe(() => {
           this.notification.show('Changes are made');
@@ -86,6 +88,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     this.updRoom.name = this.room.name;
     this.updRoom.shortId = this.room.shortId;
     this.updRoom.description = this.room.description;
+    this.updRoom.commentThreshold = this.room.commentThreshold;
     const dialogRef = this.dialog.open(RoomEditComponent, {
       width: '400px'
     });

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

@@ -52,6 +52,7 @@ export class RoomCreateComponent implements OnInit {
       description: description
     } as Room).subscribe(room => {
       this.room = room;
+      room.commentThreshold = -100;
       let msg1: string;
       let msg2: string;
       this.translateService.get('home-page.created-1').subscribe(msg => { msg1 = msg; });

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,6 +21,7 @@ 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;
@@ -31,12 +34,16 @@ export class CommentListComponent implements OnInit {
     public dialog: MatDialog,
     protected langService: LanguageService,
     private wsCommentService: WsCommentServiceService,
-    private authenticationService: AuthenticationService) {
+    private authenticationService: AuthenticationService,
+    private wsCommentService: WsCommentServiceService,
+    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) => {
@@ -65,6 +72,22 @@ export class CommentListComponent implements OnInit {
     }
   }
 
+  getCommentsCreator(): Comment[] {
+    if (this.hideCommentsList) {
+      return this.filteredComments.filter( x => x.score >= this.room.commentThreshold );
+    } else {
+      return  this.comments.filter( x => x.score >= this.room.commentThreshold );
+    }
+  }
+
+  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 +97,7 @@ export class CommentListComponent implements OnInit {
         c.roomId = this.roomId;
         c.body = payload.body;
         c.id = payload.id;
-        c.timestamp = new Date();
+        c.creationTimestamp = payload.timestamp;
         this.comments = this.comments.concat(c);
         break;
       case 'CommentPatched':

src/app/models/room.ts

@@ -8,5 +8,6 @@ export class Room {
   name: string;
   description: string;
   closed: boolean;
+  commentThreshold: number;
   contentGroups: ContentGroup[];
 }

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

@@ -79,7 +79,7 @@ export class RoomService extends BaseHttpService {
   }
 
   updateRoom(updatedRoom: Room): Observable<Room> {
-    const connectionUrl = `${ this.apiUrl.base + this.apiUrl.rooms }/~${ updatedRoom.shortId }`;
+    const connectionUrl = `${ this.apiUrl.base + this.apiUrl.rooms }/${ updatedRoom.shortId }`;
     return this.http.put(connectionUrl, updatedRoom , httpOptions).pipe(
       tap(() => ''),
       catchError(this.handleError<any>('updateRoom'))