diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index be6b01827ff07bf62506f9edf99c9433b8aa59eb..64683e4f7985c1b70ee126bc409ca2f377daea56 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -2,12 +2,12 @@
<mat-label fxLayoutAlign="center center">
<mat-icon class="search-icon">search</mat-icon>
</mat-label>
- <input #searchBox placeholder="{{ 'comment-list-page.search-box-placeholder-text' | translate }}"
+ <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">
<mat-icon>close</mat-icon>
</button>
- <button mat-button *ngIf="!searchBox.value && userRole === '1' && comments.length > 0"
+ <button mat-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>
@@ -17,7 +17,7 @@
</button>
<mat-icon mat-icon-button *ngIf="!searchBox.value" class="add-filterIcon" color="accent" [matMenuTriggerFor]="filterMenu">
- filter_list
+ sort
</mat-icon>
<mat-menu #filterMenu="matMenu" xPosition="before">
@@ -50,8 +50,8 @@
</div>
<mat-card id="outer-card" *ngIf="hideCommentsList">
- <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
+ <app-comment *ngFor="let current of filteredComments" [comment]="current"></app-comment>
</mat-card>
<mat-card *ngIf="!hideCommentsList">
- <app-comment *ngFor="let current of comments | orderBy: 'timestamp'" [comment]="current"> </app-comment>
+ <app-comment *ngFor="let current of comments | orderBy: 'timestamp'" [comment]="current"></app-comment>
</mat-card>
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..e188ed0591d7e4e66f812e3f9a19f0b784c71f8a 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -57,7 +57,7 @@ export class CommentListComponent implements OnInit {
}
searchComments(term: string): void {
- if (term) {
+ if (term && term.length > 2) {
this.hideCommentsList = true;
this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term.toLowerCase()));
} else {
@@ -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,17 @@ 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.lights;
+ console.log(<boolean>payload.lights);
+ console.log(this.comments[i]);
+ }
+ }
+ break;
}
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index b22f50e7836decd293fb8e4b2b838b4437662193..8b4c59b3f8c71dabc1879787d84244a3c127f2f4 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,8 +21,8 @@
</button>
</div>
<div fxLayout="row">
- <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
- <span class="fill-remaining-space"></span>
+ <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
+ <span class="fill-remaining-space" (click)="openPresentDialog(comment)"></span>
<div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()">
<button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)" >
<mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 36fe8df741e6d9a1d65afd5fd883b1481bbfdb5d..df231fd142dd04c6487ca5645d96db7aa031b8d7 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -5,6 +5,7 @@
padding-bottom: 10px;
padding-top: 10px;
padding-right: 5px;
+ transition: background-color 1s linear;
}
mat-card-content > :first-child {
@@ -88,3 +89,9 @@ h2 {
bottom: 0;
left: 0;
}
+
+.highlighted {
+ background-color: var(--highlighted-comment)!important;
+ transition: background-color 1s linear;
+}
+
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index fae83d243f619ddf089006796738f394f23125bd..9b46d4c2c31b00e5146f9c7fa05fac271a78e17e 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -66,6 +66,7 @@ export class CommentComponent implements OnInit {
}
this.language = localStorage.getItem('currentLang');
this.translateService.use(this.language);
+ console.log(this.comment);
}
startAnimation(state_: any): void {
@@ -110,7 +111,10 @@ export class CommentComponent implements OnInit {
});
}
- openPresentDialog(body: string): void {
+ openPresentDialog(comment: Comment): void {
+ if (this.isStudent === false) {
+ this.wsCommentService.highlight(comment);
+ }
const dialogRef = this.dialog.open(PresentCommentComponent, {
position: {
left: '10px',
@@ -121,9 +125,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`);
}
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 41537e07d379a26857f2fa9b4c047127a0cafb45..dd4ab8c08f9097cee0a6ff0db0202f161882699a 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -89,7 +89,7 @@
"export": "Exportieren"
},
"comment-list-page": {
- "search-box-placeholder-text": "Kommentare durchsuchen",
+ "search": "Suchen",
"cancel": "Abbrechen"
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index 9a64abd7d01fe37e13a49601d1a483fbde7e3f24..ac9edfcd94354045d5024e150918d8aaaa0de4b7 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -89,7 +89,7 @@
"export": "Export"
},
"comment-list-page": {
- "search-box-placeholder-text": "Search in comments",
+ "search": "Search",
"cancel": "Cancel"
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index b45ceb1d8056eb38bc42948696ee0099b130092c..db81bfab034356a7a44cbe481aecbfdec928bb16 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -24,7 +24,7 @@
"error-both-fields": "Bitte füllen Sie alle Felder aus."
},
"comment-list-page": {
- "search-box-placeholder-text": "Kommentare durchsuchen",
+ "search": "Suchen",
"cancel": "Abbrechen"
},
"answer": {
@@ -48,4 +48,4 @@
"improvable": "Luft nach oben",
"no-answers": "Keine Antworten"
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index b129791e4df861cad6e0f4c314ae7945e25b2d6a..33772d28f99604bf7925427865ba5a8cdb4a8702 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -24,7 +24,7 @@
"error-both-fields": "Please fill in all fields."
},
"comment-list-page": {
- "search-box-placeholder-text": "Search in comments",
+ "search": "Search",
"cancel": "Cancel"
},
"answer": {
@@ -48,4 +48,4 @@
"improvable": "Improvable",
"no-answers": "No answers"
}
-}
\ No newline at end of file
+}
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts
index 1dda0e11fbc6b9e1da6bbaa84d2818352cd5b39f..eda2c5ec0ae02903b9d52f1e0bf9488e04ef0e03 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -48,5 +48,6 @@ export const dark = {
'--text-2': '#004d40', // could be used for all texts
'--text-3': '#78909c', // could be used for all texts
'--dialog-bg': '#78909c',
- 'stats-ok': '#FFB74D'
+ 'stats-ok': '#FFB74D',
+ '--highlighted-comment' : '#005F63'
};
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index aa33dded2897ba1d066ef55664d9236a7b060d0c..bc5d76ae9f74ba8e044d273e2a34e87ee880f665 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -45,4 +45,5 @@ export const defaultTheme = {
'--room-list-card-color': '#4db6ac', // shared/room-list.component.scss
'--statistic-bg-color': '#fff8e1', // shared/statistic.component.scss & shared/statistics-page.component.scss
'--dialog-bg': '#e0f2f1',
+ '--highlighted-comment' : '#FFD54F'
};