diff --git a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html
index a28a981824d16e13c9a6d57de3b8a59f0009fb8c..30d97bd2f7a80353b1ec6a4f833fb1a15d1cbedb 100644
--- a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html
+++ b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.html
@@ -1,15 +1,13 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+ <mat-form-field class="input-block">
+ <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
+ matAutosizeMinRows=2 matAutosizeMaxRows=5 maxlength="255" [formControl]="bodyForm"></textarea>
+ <mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
+ </mat-form-field>
<div fxLayout="row" fxLayoutAlign="center">
- <form>
- <mat-form-field class="input-block">
- <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
- matAutosizeMinRows=2 matAutosizeMaxRows=5 maxlength="255" [formControl]="bodyForm"></textarea>
- <mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
- </mat-form-field>
- <button mat-raised-button color="warn"
- (click)="onNoClick()">{{ 'comment-page.abort' | translate}}</button>
- <button mat-raised-button color="accent"
- (click)="closeDialog(commentBody.value)">{{ 'comment-page.send' | translate}}</button>
- </form>
+ <button mat-raised-button color="warn"
+ (click)="onNoClick()">{{ 'comment-page.abort' | translate}}</button>
+ <button mat-raised-button color="accent"
+ (click)="closeDialog(commentBody.value)">{{ 'comment-page.send' | translate}}</button>
</div>
</div>
diff --git a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts
index eaa0a5f2a15d2766deb6f0044ff512ed35987255..52aa288d8422f673d465051ff6defbfbf50edaff 100644
--- a/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts
+++ b/src/app/components/shared/_dialogs/submit-comment/submit-comment.component.ts
@@ -3,9 +3,9 @@ import { Comment } from '../../../../models/comment';
import { NotificationService } from '../../../../services/util/notification.service';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
-import { CommentPageComponent } from '../../comment-page/comment-page.component';
import { FormControl, Validators } from '@angular/forms';
import { User } from '../../../../models/user';
+import { CommentListComponent } from '../../comment-list/comment-list.component';
@Component({
@@ -20,17 +20,15 @@ export class SubmitCommentComponent implements OnInit {
user: User;
roomId: string;
- subjectForm = new FormControl('', [Validators.required]);
bodyForm = new FormControl('', [Validators.required]);
- private date = new Date(Date.now());
constructor(
- private notification: NotificationService,
- public dialogRef: MatDialogRef<CommentPageComponent>,
- private translateService: TranslateService,
- public dialog: MatDialog,
- private translationService: TranslateService,
- @Inject(MAT_DIALOG_DATA) public data: any) {
+ private notification: NotificationService,
+ public dialogRef: MatDialogRef<CommentListComponent>,
+ private translateService: TranslateService,
+ public dialog: MatDialog,
+ private translationService: TranslateService,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
}
ngOnInit() {
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 abe72767afb09acdb2fbdbc20949d2e929a2dd4f..e4a6a3c36323838dd28dbdccd60653b420055b4f 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -1,15 +1,19 @@
<div fxLayout="row" id="search-container">
- <mat-label>
- <mat-icon>search</mat-icon>
+ <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 }}"
- (focus)="hideCommentsList=true" (input)="searchComments(searchBox.value)">
- <button mat-flat-button color="accent" *ngIf="hideCommentsList"
- (click)="hideCommentsList=false;searchBox.value='';">{{ 'comment-list-page.cancel' | translate }}</button>
+ (input)="searchComments(searchBox.value)">
+ <button mat-button *ngIf="searchBox.value" (click)="hideCommentsList=false; searchBox.value=''">
+ <mat-icon>close</mat-icon>
+ </button>
+ <button mat-button *ngIf="!searchBox.value" color="accent" (click)="openSubmitDialog()">
+ <mat-icon class="add-icon">add_circle</mat-icon>
+ </button>
</div>
-<mat-card class="outer-card" *ngIf="hideCommentsList && searchBox.value!=''">
+<mat-card class="outer-card" *ngIf="hideCommentsList">
<app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
</mat-card>
<mat-card class="outer-card" *ngIf="!hideCommentsList">
- <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
-</mat-card>
\ No newline at end of file
+ <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
+</mat-card>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 05f9132c8fd215795eda5b6137d6a841a4d526da..16594a1e77869d3b556f091ffb88022f5b01fe16 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -1,9 +1,6 @@
mat-card {
margin-bottom: 10px;
background-color: #4db6ac;
- border-radius: 8px;
- width: 100%;
- max-width: 800px;
}
app-comment {
@@ -13,29 +10,37 @@ app-comment {
input {
box-sizing: border-box;
- padding: 0 10px 0 20px;
- width: 100%;
- background-color: #4db6ac;
+ padding: 0 10px 0 5px;
+ width: 90%;
+ background-color: #80cbc4;
border: none;
+ outline: none;
+ min-height: 60px;
+ font-size: large;
+ border-radius: 5px;
}
-button{
- border-left: 3px solid #b2dfdb;
- border-radius: 0px;
- min-height: 100% !important;
- min-width: 100px;
+#search-container{
+ border-radius: 5px;
+ background-color: #80cbc4;
+ margin-bottom: 10px;
}
-mat-icon {
- padding: 10px;
+
+.add-button {
+ width: 44px!important;
+ height: 44px!important;
+ text-align: center;
}
-mat-label {
- min-height: 100% !important;
- border-radius: 0px;
+.add-icon {
+ font-size: 45px;
+ height: 45px;
+ width: 45px;
+ line-height: 100%!important;
}
-#search-container{
- background-color: #4db6ac;
- margin-bottom: 10px;
+.search-icon {
+ padding: 10px;
}
+
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 a5dd22ad4e704624b925e02bdfa4ae587cd7b09d..8e097e465fe86e4e9348718d34244c046130cb6c 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -1,10 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { Comment } from '../../../models/comment';
import { CommentService } from '../../../services/http/comment.service';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
import { RxStompService } from '@stomp/ng2-stompjs';
import { Message } from '@stomp/stompjs';
+import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-comment.component';
+import { MatDialog } from '@angular/material';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { User } from '../../../models/user';
@Component({
selector: 'app-comment-list',
@@ -12,16 +16,19 @@ import { Message } from '@stomp/stompjs';
styleUrls: ['./comment-list.component.scss']
})
export class CommentListComponent implements OnInit {
+ @Input() user: User;
+ @Input() roomId: string;
comments: Comment[];
isLoading = true;
- roomId: string;
hideCommentsList: boolean;
filteredComments: Comment[];
constructor(private commentService: CommentService,
- private translateService: TranslateService,
- protected langService: LanguageService,
- private rxStompService: RxStompService) {
+ private translateService: TranslateService,
+ public dialog: MatDialog,
+ protected langService: LanguageService,
+ private rxStompService: RxStompService,
+ private wsCommentService: WsCommentServiceService) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
@@ -45,35 +52,68 @@ export class CommentListComponent implements OnInit {
}
searchComments(term: string): void {
- this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term));
+ if (term) {
+ this.hideCommentsList = true;
+ this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term.toLowerCase()));
+ } else {
+ this.hideCommentsList = false;
+ }
}
parseIncomingMessage(message: Message) {
const msg = JSON.parse(message.body);
const payload = msg.payload;
- if (msg.type === 'CommentCreated') {
- const c = new Comment();
- c.roomId = this.roomId;
- c.body = payload.body;
- c.id = payload.id;
- c.creationTimestamp = payload.timestamp;
- this.comments = this.comments.concat(c);
- } else if (msg.type === 'CommentPatched') {
+ switch (msg.type) {
+ case 'CommentCreated':
+ const c = new Comment();
+ c.roomId = this.roomId;
+ c.body = payload.body;
+ c.id = payload.id;
+ c.creationTimestamp = payload.timestamp;
+ this.comments = this.comments.concat(c);
+ break;
+ case 'CommentPatched':
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)) {
switch (key) {
- case 'read': this.comments[i].read = <boolean>value;
- break;
- case 'correct' : this.comments[i].correct = <boolean>value;
- break;
- case 'favorite' : this.comments[i].favorite = <boolean>value;
- break;
+ case 'read':
+ this.comments[i].read = <boolean>value;
+ break;
+ case 'correct' :
+ this.comments[i].correct = <boolean>value;
+ break;
+ case 'favorite' :
+ this.comments[i].favorite = <boolean>value;
+ break;
+ case 'score' :
+ this.comments[i].score = <number>value;
+ break;
}
}
}
- }
+ }
}
}
+
+ openSubmitDialog(): void {
+ const dialogRef = this.dialog.open(SubmitCommentComponent, {
+ width: '400px'
+ });
+ dialogRef.componentInstance.user = this.user;
+ dialogRef.componentInstance.roomId = this.roomId;
+ dialogRef.afterClosed()
+ .subscribe(result => {
+ if (result) {
+ this.send(result);
+ } else {
+ return;
+ }
+ });
+ }
+
+ send(comment: Comment): void {
+ this.wsCommentService.add(comment);
+ }
}
diff --git a/src/app/components/shared/comment-page/comment-page.component.html b/src/app/components/shared/comment-page/comment-page.component.html
index a0d67ae5eaf0e03312cd2cc9770003e902c23c40..44f9d6b44659f93e633ed89748bd90770abf62ce 100644
--- a/src/app/components/shared/comment-page/comment-page.component.html
+++ b/src/app/components/shared/comment-page/comment-page.component.html
@@ -1,13 +1,6 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<div fxLayout="row" fxLayoutAlign="center">
- <mat-toolbar>List of Questions
- <span class="fill-remaining-space"></span>
- <button mat-icon-button color="primary" (click)="openSubmitDialog()">
- <mat-icon>add_circle</mat-icon>
- </button></mat-toolbar>
- </div>
- <div fxLayout="row" fxLayoutAlign="center">
- <app-comment-list></app-comment-list>
+ <app-comment-list [user]="user" [roomId]="roomId"></app-comment-list>
</div>
</div>
diff --git a/src/app/components/shared/comment-page/comment-page.component.scss b/src/app/components/shared/comment-page/comment-page.component.scss
index 3eeff504832295d9e4654f7e2acf0a6193f9c196..501394eb496b8c96db882589073de268cfcb434a 100644
--- a/src/app/components/shared/comment-page/comment-page.component.scss
+++ b/src/app/components/shared/comment-page/comment-page.component.scss
@@ -2,23 +2,3 @@ app-comment-list {
width: 100%;
max-width: 800px;
}
-
-.mat-icon-button {
- width: 50px;
- height: 50px;
- margin-bottom: 20px;
- margin-top: 20px;
-}
-
-mat-icon {
- font-size: 50px;
- height: 50px;
- width: 50px;
- line-height: 100%!important;
-}
-
-mat-toolbar {
- border-radius: 10px;
- background-color: #bbdefb;
- max-width: 800px;
-}
diff --git a/src/app/components/shared/comment-page/comment-page.component.ts b/src/app/components/shared/comment-page/comment-page.component.ts
index 33fd31461df20c963d77b8cb3a6a994d90c8027b..725fc8800b5bee1039f167bd72cd7a67c7d2e52f 100644
--- a/src/app/components/shared/comment-page/comment-page.component.ts
+++ b/src/app/components/shared/comment-page/comment-page.component.ts
@@ -1,12 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { Comment } from '../../../models/comment';
import { User } from '../../../models/user';
import { NotificationService } from '../../../services/util/notification.service';
import { AuthenticationService } from '../../../services/http/authentication.service';
-import { MatDialog } from '@angular/material';
-import { SubmitCommentComponent } from '../_dialogs/submit-comment/submit-comment.component';
-import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
@Component({
selector: 'app-comment-page',
@@ -19,32 +15,10 @@ export class CommentPageComponent implements OnInit {
constructor(private route: ActivatedRoute,
private notification: NotificationService,
- public dialog: MatDialog,
- private authenticationService: AuthenticationService,
- private wsCommentService: WsCommentServiceService) { }
+ private authenticationService: AuthenticationService) { }
ngOnInit(): void {
this.roomId = localStorage.getItem('roomId');
this.user = this.authenticationService.getUser();
}
-
- openSubmitDialog(): void {
- const dialogRef = this.dialog.open(SubmitCommentComponent, {
- width: '400px'
- });
- dialogRef.componentInstance.user = this.user;
- dialogRef.componentInstance.roomId = this.roomId;
- dialogRef.afterClosed()
- .subscribe(result => {
- if (result) {
- this.send(result);
- } else {
- return;
- }
- });
- }
-
- send(comment: Comment): void {
- this.wsCommentService.add(comment);
- }
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 2e95afd4774f4d2fd9eec5d25a97e93a0ee7e03d..d1363c0363e71a1e831fa1e5f5227372e785cf82 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,18 +1,29 @@
<mat-card class="card-container">
- <div fxLayout="row" fxLayoutAlign="center center">
- <div *ngIf="comment.createdFromLecturer !== false" mat-card-avatar class="proffesor-icon" matTooltip="created from lecturer"><mat-icon>record_voice_over</mat-icon></div>
- <mat-card-content>
- <p (click)="openPresentDialog(comment.body)">{{comment.body}}</p>
- </mat-card-content>
- <span class="fill-remaining-space"></span>
- <button mat-icon-button [disabled]="isCreator" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
- <mat-icon [ngClass]="{'correct-icon' : comment.correct === true}">check_circle</mat-icon>
- </button>
- <button mat-icon-button [disabled]="isCreator" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
- <mat-icon [ngClass]="{'favorite-icon' : comment.favorite === true}">star</mat-icon>
- </button>
- <button mat-icon-button [disabled]="isCreator" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
- <mat-icon [ngClass]="{'read-icon' : comment.read === true}">visibility</mat-icon>
- </button>
+ <div fxLayout="column">
+ <div fxLayout="row">
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+ <mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
+ </button>
+ <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+ <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
+ </button>
+ <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark as unread' : 'Mark as read'">
+ <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
+ </button>
+ </div>
+ <div fxLayout="row">
+ <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
+ <span class="fill-remaining-space"></span>
+ <div fxLayout="column">
+ <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
+ <mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
+ </button>
+ <h2>{{comment.score}}</h2>
+ <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
+ <mat-icon class="voting-icon" [ngClass]="{'downvoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
+ </button>
+ </div>
+ </div>
</div>
</mat-card>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index ac4d7beca3ae20f39af8512885a3528aedb6834c..3174c0b7241f75a911043e5d0e16d72e25b3e821 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -2,6 +2,9 @@ mat-card {
margin-bottom: 20px;
background-color: #4dd0e1;
cursor: pointer;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ padding-right: 5px;
}
mat-card-content > :first-child {
@@ -14,25 +17,62 @@ mat-toolbar {
background-color: #bbdefb;
}
-mat-icon {
- color: white;
+.voting-icon {
+ width: 35px;
+ height: 35px;
+ font-size: 35px;
+ line-height: 100%!important;
+}
+
+.upvoted {
+ color: #66bb6a;
+}
+
+.downvoted {
+ color: #FF8A65;
+}
+
+.incorrect-icon {
+ color: #c8e6c9;
}
.correct-icon {
- color: green;
+ color: #66bb6a;
}
.read-icon {
- color: blue;
+ color: #1e88e5;
+}
+
+.unread-icon {
+ color: #e3f2fd;
}
.favorite-icon {
color: #fdd835;
}
-.proffesor-icon {
+.not-favorite-icon {
+ color: #fffde7;
+}
+
+.proffessor-icon {
background-size: cover;
margin-right: 10px;
margin-top: 10px;
}
+h2 {
+ text-align: center;
+ margin: 0;
+}
+
+.body {
+ min-width: 200px;
+ min-height: 100px;
+ text-align: start;
+ font-size: large;
+ max-height: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index b6290b6d07a3346248fdf52d6909a2707079c476..36fbd582fe3fe8fae5f332d26a1e767c1178e665 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -18,8 +18,9 @@ import { MatDialog } from '@angular/material';
})
export class CommentComponent implements OnInit {
@Input() comment: Comment;
- isCreator = false;
+ isStudent = false;
isLoading = true;
+ hasVoted = 0;
constructor(protected authenticationService: AuthenticationService,
private route: ActivatedRoute,
@@ -34,7 +35,7 @@ export class CommentComponent implements OnInit {
ngOnInit() {
if (this.authenticationService.getRole() === 0) {
- this.isCreator = true;
+ this.isStudent = true;
}
this.translateService.use(localStorage.getItem('currentLang'));
}
@@ -51,6 +52,20 @@ export class CommentComponent implements OnInit {
this.comment = this.wsCommentService.toggleFavorite(comment);
}
+ voteUp(comment: Comment): void {
+ if (this.hasVoted !== 1) {
+ this.wsCommentService.voteUp(comment);
+ this.hasVoted = 1;
+ }
+ }
+
+ voteDown(comment: Comment): void {
+ if (this.hasVoted !== -1) {
+ this.wsCommentService.voteDown(comment);
+ this.hasVoted = -1;
+ }
+ }
+
delete(comment: Comment): void {
this.commentService.deleteComment(comment.id).subscribe(room => {
this.notification.show(`Comment '${comment.body}' successfully deleted.`);
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index 13a09ef9f2f855eedc99ec50854a9fa60a48de42..d8b7e6719b7d391734213670689fab7d45566f73 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -23,6 +23,7 @@ import { LoginComponent } from './login/login.component';
import { StatisticHelpComponent } from './_dialogs/statistic-help/statistic-help.component';
import { CommentComponent } from './comment/comment.component';
import { SubmitCommentComponent } from './_dialogs/submit-comment/submit-comment.component';
+import { OrderBy } from './sort';
import { PresentCommentComponent } from './_dialogs/present-comment/present-comment.component';
@NgModule({
@@ -54,6 +55,7 @@ import { PresentCommentComponent } from './_dialogs/present-comment/present-comm
StatisticHelpComponent,
CommentComponent,
SubmitCommentComponent,
+ OrderBy,
PresentCommentComponent
],
exports: [
diff --git a/src/app/components/shared/sort.ts b/src/app/components/shared/sort.ts
new file mode 100644
index 0000000000000000000000000000000000000000..57bbe8fee596d31f36e01455683d8d39ddc08895
--- /dev/null
+++ b/src/app/components/shared/sort.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'orderBy'
+})
+
+export class OrderBy implements PipeTransform {
+ transform(array: Array<string>, args: string): Array<string> {
+ array.sort((a: any, b: any) => {
+ if (a[args] > b[args]) {
+ return -1;
+ } else if (a[args] <= b[args]) {
+ return 1;
+ }
+ });
+ return array;
+ }
+}
diff --git a/src/app/models/messages/abstract-vote.ts b/src/app/models/messages/abstract-vote.ts
new file mode 100644
index 0000000000000000000000000000000000000000..655ab105d2905c998728ab929be812aded446668
--- /dev/null
+++ b/src/app/models/messages/abstract-vote.ts
@@ -0,0 +1,17 @@
+export abstract class AbstractVote {
+ type: string;
+ payload: {
+ userId: string;
+ commentId: string;
+ vote: number;
+ };
+
+ protected constructor(type: string, userId: string, commentId: string, vote: number) {
+ this.type = type;
+ this.payload = {
+ userId: userId,
+ commentId: commentId,
+ vote: vote
+ };
+ }
+}
diff --git a/src/app/models/messages/down-vote.ts b/src/app/models/messages/down-vote.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5dc52ab375931fc77edc33cb6e9162727767f490
--- /dev/null
+++ b/src/app/models/messages/down-vote.ts
@@ -0,0 +1,14 @@
+import { AbstractVote } from './abstract-vote';
+
+export class DownVote extends AbstractVote {
+ type: string;
+ payload: {
+ userId: string;
+ commentId: string;
+ vote: number;
+ };
+
+ constructor(userId: string, commentId: string) {
+ super('Downvote', userId, commentId, -1);
+ }
+}
diff --git a/src/app/models/messages/up-vote.ts b/src/app/models/messages/up-vote.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eef91a512f030870eb7e92492289772de1adb1fe
--- /dev/null
+++ b/src/app/models/messages/up-vote.ts
@@ -0,0 +1,14 @@
+import { AbstractVote } from './abstract-vote';
+
+export class UpVote extends AbstractVote {
+ type: string;
+ payload: {
+ userId: string;
+ commentId: string;
+ vote: number;
+ };
+
+ constructor(userId: string, commentId: string) {
+ super('Upvote', userId, commentId, 1);
+ }
+}
diff --git a/src/app/models/vote.ts b/src/app/models/vote.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74e0b39fef99919830e07790549e3aa44911aa6f
--- /dev/null
+++ b/src/app/models/vote.ts
@@ -0,0 +1,15 @@
+export class Vote {
+ private id: string;
+ private userId: string;
+ private commentId: string;
+ private vote: number;
+
+ constructor(userId: string ,
+ commentId: string,
+ vote: number) {
+ this.id = '';
+ this.userId = userId;
+ this.commentId = commentId;
+ this.vote = vote;
+ }
+}
diff --git a/src/app/services/websockets/ws-comment-service.service.ts b/src/app/services/websockets/ws-comment-service.service.ts
index 5e8516afeafef627ac38d8ec5ec139863ce067ba..7384404df1e76bf4ee11f6387c0cb2ce8ea52e22 100644
--- a/src/app/services/websockets/ws-comment-service.service.ts
+++ b/src/app/services/websockets/ws-comment-service.service.ts
@@ -4,6 +4,8 @@ import { RxStompService } from '@stomp/ng2-stompjs';
import { CreateComment } from '../../models/messages/create-comment';
import { PatchComment } from '../../models/messages/patch-comment';
import { TSMap } from 'typescript-map';
+import { UpVote } from '../../models/messages/up-vote';
+import { DownVote } from '../../models/messages/down-vote';
@Injectable({
@@ -49,9 +51,30 @@ export class WsCommentServiceService {
return comment;
}
+ voteUp(comment: Comment): void {
+ const message = new UpVote(comment.userId, comment.id);
+ this.rxStompService.publish({
+ destination: `/queue/vote.command.upvote`,
+ body: JSON.stringify(message),
+ headers: {
+ 'content-type': 'application/json'
+ }
+ });
+ }
+
+ voteDown(comment: Comment): void {
+ const message = new DownVote(comment.userId, comment.id);
+ this.rxStompService.publish({
+ destination: `/queue/vote.command.downvote`,
+ body: JSON.stringify(message),
+ headers: {
+ 'content-type': 'application/json'
+ }
+ });
+ }
+
private patchComment(comment: Comment, changes: TSMap<string, any>): void {
const message = new PatchComment(comment.id, changes);
- console.log(message);
this.rxStompService.publish({
destination: `/queue/comment.command.patch`,
body: JSON.stringify(message),
@@ -59,5 +82,5 @@ export class WsCommentServiceService {
'content-type': 'application/json'
}
});
- }
+ }
}