From dfbbe8878d99b033358bc86391f3986d524eadb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20K=C3=A4sler?= <tom.kaesler@mni.thm.de>
Date: Sun, 28 Apr 2019 14:20:26 +0200
Subject: [PATCH] Enable highlighting
---
.../shared/comment-list/comment-list.component.ts | 10 ++++++++++
.../shared/comment/comment.component.html | 4 ++--
.../shared/comment/comment.component.scss | 5 +++++
.../shared/comment/comment.component.ts | 6 ++++--
src/app/models/comment.ts | 5 ++++-
src/app/models/messages/highlight-comment.ts | 15 +++++++++++++++
.../websockets/ws-comment-service.service.ts | 11 +++++++++++
7 files changed, 51 insertions(+), 5 deletions(-)
create mode 100644 src/app/models/messages/highlight-comment.ts
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 876bcbf2d..2d9783b64 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 b22f50e78..eff545cbd 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 36fe8df74..e0ad90c9b 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 fae83d243..41901be40 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 df7165a4b..17e3a638a 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 000000000..8c884ef2b
--- /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 ffc16dc42..81b21ac3b 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`);
}
--
GitLab