Merge branch...

Merge branch '310-give-each-new-question-poser-a-consecutive-number-combined-with-an-icon-label-and-filter-questions-by-clicking-on-the-label' into 'master'

Give comment creators a 'userNumber', added as new filter

Closes #310

See merge request arsnova/frag.jetzt!280

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

@@ -149,7 +149,8 @@
 
 <div *ngIf="!isLoading">
   <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current"
-                [parseVote]="getVote(current)" [userRole]="userRole" [moderator]="false" (clickedOnTag)="clickedOnTag($event)">
+                [parseVote]="getVote(current)" [userRole]="userRole" [moderator]="false"
+               (clickedOnTag)="clickedOnTag($event)" (clickedUserNumber)="clickedUserNumber($event)">
               </app-comment>
 </div>
 <!-- No Questions Present -->

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

@@ -50,6 +50,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   wrong = 'wrong';
   ack = 'ack';
   tag = 'tag';
+  userNumber = 'userNumber';
   answer = 'answer';
   owner = 'owner';
   currentFilter = '';
@@ -195,6 +196,8 @@ export class CommentListComponent implements OnInit, OnDestroy {
         c.id = payload.id;
         c.timestamp = payload.timestamp;
         c.tag = payload.tag;
+        c.creatorId = payload.creatorId;
+        c.userNumber = this.commentService.hashCode(c.creatorId);
 
         this.announceNewComment(c.body);
 
@@ -307,7 +310,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
     this.notificationService.show(message);
   }
 
-  filterComments(type: string, tag?: string): void {
+  filterComments(type: string, compare?: any): void {
     this.currentFilter = type;
     if (type === '') {
       this.filteredComments = this.comments;
@@ -328,7 +331,9 @@ export class CommentListComponent implements OnInit, OnDestroy {
         case this.unread:
           return !c.read;
         case this.tag:
-          return c.tag === tag;
+          return c.tag === compare;
+        case this.userNumber:
+          return c.userNumber === compare;
         case this.answer:
           return c.answer;
         case this.owner:
@@ -365,6 +370,10 @@ export class CommentListComponent implements OnInit, OnDestroy {
     this.filterComments(this.tag, tag);
   }
 
+  clickedUserNumber(usrNumber: number): void {
+    this.filterComments(this.userNumber, usrNumber);
+  }
+
   pauseCommentStream() {
     this.freeze = true;
     this.commentStream.unsubscribe();

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

@@ -93,15 +93,21 @@
       <div *ngIf="!isStudent" fxLayout="column" fxLayoutAlign="center">
         <span class="scoreCreator">{{comment.score}}</span>
       </div>
-
     </div>
-    <div (click)="this.clickedOnTag.emit(comment.tag)" *ngIf="comment.tag && comment.tag !== ''" class="comment-tags">
-      <span class="comment-tag-icon">
+    <div fxLayout="row" fxLayoutAlign="start center">
+      <div fxLayoutAlign="center center" (click)="this.clickedOnTag.emit(comment.tag)"
+           *ngIf="comment.tag && comment.tag !== ''" class="comment-tags">
         <mat-icon svgIcon="comment_tag"></mat-icon>
-      </span>
-      <span class="comment-tag">
-        {{comment.tag}}
-      </span>
+        <span>
+          {{comment.tag}}
+        </span>
+      </div>
+      <div class="user-number" fxLayoutAlign="center center" (click)="this.clickedUserNumber.emit(comment.userNumber)">
+        <mat-icon class="user-icon">person</mat-icon>
+       <strong>
+          {{comment.userNumber}}
+       </strong>
+      </div>
     </div>
   </div>
 </mat-card>

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

@@ -112,14 +112,19 @@ user.role
 }
 
 .comment-tags {
-  width: 140px;
-  margin-top: 1rem;
   cursor: pointer;
   color: var(--primary);
+  margin-right: 10px;
 }
 
-.comment-tag {
-  vertical-align: 5px;
+.user-number {
+  cursor: pointer;
+  color: var(--on-surface);
+}
+
+
+.user-icon {
+  margin-right: 5px;
 }
 
 .voteUp {

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

@@ -34,8 +34,8 @@ export class CommentComponent implements OnInit {
   @Input() comment: Comment;
   @Input() moderator: boolean;
   @Input() userRole: UserRole;
-  @Output()
-  clickedOnTag = new EventEmitter<string>();
+  @Output() clickedOnTag = new EventEmitter<string>();
+  @Output() clickedUserNumber = new EventEmitter<number>();
   isStudent = false;
   isCreator = false;
   isModerator = false;

src/app/models/comment.ts

@@ -16,6 +16,7 @@ export class Comment {
   ack: boolean;
   tag: string;
   answer: string;
+  userNumber: number;
 
   constructor(roomId: string = '',
               creatorId: string = '',
@@ -29,7 +30,8 @@ export class Comment {
               highlighted: boolean = false,
               ack: boolean = true,
               tag: string = '',
-              answer: string = '') {
+              answer: string = '',
+              userNumber: number = 0) {
     this.id = '';
     this.roomId = roomId;
     this.creatorId = creatorId;
@@ -45,5 +47,6 @@ export class Comment {
     this.ack = ack;
     this.tag = tag;
     this.answer = answer;
+    this.userNumber = userNumber;
   }
 }

src/app/rx-stomp.config.ts

@@ -3,8 +3,8 @@ import { environment } from './../environments/environment';
 
 export const ARSRxStompConfig: RxStompConfig = {
   // Which server?
-  brokerURL: (window.location.protocol === 'http:' ) ?
-    `ws://${window.location.hostname}:/api/ws/websocket` : `wss://${window.location.hostname}/api/ws/websocket`,
+  brokerURL: ((window.location.protocol === 'http:') ? 'ws' : 'wss')
+  + `://${window.location.host}/api/ws/websocket`,
 
   connectHeaders: {
     login: 'guest',

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Comment } from '../../models/comment';
-import { catchError, tap } from 'rxjs/operators';
+import { catchError, tap, map } from 'rxjs/operators';
 import { BaseHttpService } from './base-http.service';
 
 const httpOptions = {
@@ -25,6 +25,7 @@ export class CommentService extends BaseHttpService {
   getComment(commentId: string): Observable<Comment> {
     const connectionUrl = `${this.apiUrl.base}${this.apiUrl.comment}/${commentId}`;
     return this.http.get<Comment>(connectionUrl, httpOptions).pipe(
+      map(comment => this.parseUserNumber(comment)),
       tap(_ => ''),
       catchError(this.handleError<Comment>('getComment'))
     );
@@ -33,7 +34,8 @@ export class CommentService extends BaseHttpService {
   addComment(comment: Comment): Observable<Comment> {
     const connectionUrl = this.apiUrl.base + this.apiUrl.comment + '/';
     return this.http.post<Comment>(connectionUrl,
-      { roomId: comment.roomId, body: comment.body,
+      {
+        roomId: comment.roomId, body: comment.body,
         read: comment.read, creationTimestamp: comment.timestamp
       }, httpOptions).pipe(
         tap(_ => ''),
@@ -55,6 +57,9 @@ export class CommentService extends BaseHttpService {
       properties: { roomId: roomId, ack: true },
       externalFilters: {}
     }, httpOptions).pipe(
+      map(commentList => {
+        return commentList.map(comment => this.parseUserNumber(comment));
+      }),
       tap(_ => ''),
       catchError(this.handleError<Comment[]>('getComments', []))
     );
@@ -66,6 +71,9 @@ export class CommentService extends BaseHttpService {
       properties: { roomId: roomId, ack: false },
       externalFilters: {}
     }, httpOptions).pipe(
+      map(commentList => {
+        return commentList.map(comment => this.parseUserNumber(comment));
+      }),
       tap(_ => ''),
       catchError(this.handleError<Comment[]>('getComments', []))
     );
@@ -77,6 +85,9 @@ export class CommentService extends BaseHttpService {
       properties: { roomId: roomId },
       externalFilters: {}
     }, httpOptions).pipe(
+      map(commentList => {
+        return commentList.map(comment => this.parseUserNumber(comment));
+      }),
       tap(_ => ''),
       catchError(this.handleError<Comment[]>('getComments', []))
     );
@@ -108,4 +119,19 @@ export class CommentService extends BaseHttpService {
       catchError(this.handleError<number>('countByRoomId', 0))
     );
   }
+
+  parseUserNumber(comment: Comment): Comment {
+    comment.userNumber = this.hashCode(comment.creatorId);
+    return comment;
+  }
+
+  hashCode(s) {
+    let hash;
+    for (let i = 0, h = 0; i < s.length; i++) {
+      hash = Math.abs(Math.imul(31, hash) + s.charCodeAt(i) | 0);
+    }
+    const userNumberString = String(hash);
+    hash = +userNumberString.substring(userNumberString.length - 4, userNumberString.length);
+    return hash;
+  }
 }

tslint.json

@@ -47,7 +47,7 @@
       }
     ],
     "no-arg": true,
-    "no-bitwise": true,
+    "no-bitwise": false,
     "no-console": [
       true,
       "debug",