diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 876bcbf2d2c0d4110aaa5baafe2c76aba63808f7..2d9783b6449e3260cda63494aa3c43ba805e102f 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -78,6 +78,7 @@ export class CommentListComponent implements OnInit {
this.comments = this.comments.concat(c);
break;
case 'CommentPatched':
+ // ToDo: Use a map for comments w/ key = commentId
for (let i = 0; i < this.comments.length; i++) {
if (payload.id === this.comments[i].id) {
for (const [key, value] of Object.entries(payload.changes)) {
@@ -98,6 +99,15 @@ export class CommentListComponent implements OnInit {
}
}
}
+ break;
+ case 'CommentHighlighted':
+ // ToDo: Use a map for comments w/ key = commentId
+ for (let i = 0; i < this.comments.length; i++) {
+ if (payload.id === this.comments[i].id) {
+ this.comments[i].highlighted = <boolean>payload.light;
+ }
+ }
+ break;
}
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index b22f50e7836decd293fb8e4b2b838b4437662193..eff545cbdbef6908c6fb95031d513251d506d0a4 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,4 +1,4 @@
-<mat-card id="comment-card" [@slide]>
+<mat-card id="comment-card" [ngClass]="{true : 'highlighted', false: ''}[comment.highlighted]" [@slide]>
<div fxLayout="column">
<div fxLayout="row">
<span class="fill-remaining-space"></span>
@@ -21,7 +21,7 @@
</button>
</div>
<div fxLayout="row">
- <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
+ <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
<span class="fill-remaining-space"></span>
<div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()">
<button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)" >
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 36fe8df741e6d9a1d65afd5fd883b1481bbfdb5d..e0ad90c9bd5d4cb61cf00724e5c60cb0f3fa37b6 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -88,3 +88,8 @@ h2 {
bottom: 0;
left: 0;
}
+
+.highlighted {
+ // ToDo: Use theme
+ background-color: #333 !important;
+}
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index fae83d243f619ddf089006796738f394f23125bd..41901be403e5f57b7b68d893a3dd92aec00b1820 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -110,7 +110,8 @@ export class CommentComponent implements OnInit {
});
}
- openPresentDialog(body: string): void {
+ openPresentDialog(comment: Comment): void {
+ this.wsCommentService.highlight(comment);
const dialogRef = this.dialog.open(PresentCommentComponent, {
position: {
left: '10px',
@@ -121,9 +122,10 @@ export class CommentComponent implements OnInit {
height: '100%',
width: '100%'
});
- dialogRef.componentInstance.body = body;
+ dialogRef.componentInstance.body = comment.body;
dialogRef.afterClosed()
.subscribe(result => {
+ this.wsCommentService.lowlight(comment);
if (result === 'close') {
return;
}
diff --git a/src/app/models/comment.ts b/src/app/models/comment.ts
index df7165a4bd6c24397b611f3b3871e6fd3296e656..17e3a638a94abb4e5562f2c0241b0da49f1f6cd2 100644
--- a/src/app/models/comment.ts
+++ b/src/app/models/comment.ts
@@ -10,6 +10,7 @@ export class Comment {
timestamp: Date;
score: number;
createdFromLecturer: boolean;
+ highlighted: boolean;
constructor(roomId: string = '',
userId: string = '',
@@ -19,7 +20,8 @@ export class Comment {
favorite: boolean = false,
creationTimestamp: Date = null,
score: number = 0,
- createdFromLecturer = false) {
+ createdFromLecturer = false,
+ highlighted: boolean = false) {
this.id = '';
this.roomId = roomId;
this.userId = userId;
@@ -31,5 +33,6 @@ export class Comment {
this.timestamp = creationTimestamp;
this.score = score;
this.createdFromLecturer = createdFromLecturer;
+ this.highlighted = highlighted;
}
}
diff --git a/src/app/models/messages/highlight-comment.ts b/src/app/models/messages/highlight-comment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c884ef2b3ad70bb2a16bed780e35d7b28fbcdba
--- /dev/null
+++ b/src/app/models/messages/highlight-comment.ts
@@ -0,0 +1,15 @@
+export class HighlightComment {
+ type: string;
+ payload: {
+ id: string;
+ lights: boolean;
+ };
+
+ constructor(id: string, lights: boolean) {
+ this.type = 'HighlightComment';
+ this.payload = {
+ id: id,
+ lights: lights
+ };
+ }
+}
diff --git a/src/app/services/websockets/ws-comment-service.service.ts b/src/app/services/websockets/ws-comment-service.service.ts
index ffc16dc4231d7086240ea0cbbc633420828fcf60..81b21ac3b8dbf715e17f1a72cfdc9c998901d0b4 100644
--- a/src/app/services/websockets/ws-comment-service.service.ts
+++ b/src/app/services/websockets/ws-comment-service.service.ts
@@ -3,6 +3,7 @@ import { Comment } from '../../models/comment';
import { WsConnectorService } from '../../services/websockets/ws-connector.service';
import { CreateComment } from '../../models/messages/create-comment';
import { PatchComment } from '../../models/messages/patch-comment';
+import { HighlightComment } from '../../models/messages/highlight-comment';
import { TSMap } from 'typescript-map';
import { UpVote } from '../../models/messages/up-vote';
import { DownVote } from '../../models/messages/down-vote';
@@ -62,6 +63,16 @@ export class WsCommentServiceService {
this.wsConnector.send(`/queue/comment.command.patch`, JSON.stringify(message));
}
+ highlight(comment: Comment) {
+ const message = new HighlightComment(comment.id, true);
+ this.wsConnector.send(`/queue/comment.command.highlight`, JSON.stringify(message));
+ }
+
+ lowlight(comment: Comment) {
+ const message = new HighlightComment(comment.id, false);
+ this.wsConnector.send(`/queue/comment.command.highlight`, JSON.stringify(message));
+ }
+
getCommentStream(roomId: string): Observable<IMessage> {
return this.wsConnector.getWatcher(`/topic/${roomId}.comment.stream`);
}