From 1261e94d0a0bebeb57fa8b4d0331caa9d1e34dd9 Mon Sep 17 00:00:00 2001
From: tekay <tom.kaesler@mni.thm.de>
Date: Fri, 15 Mar 2019 15:08:32 +0100
Subject: [PATCH] add websocket support for comments
---
.../comment-create-page.component.ts | 88 +++++++++++++++++++
.../comment-list/comment-list.component.ts | 19 ++++
src/app/models/messages/create-comment.ts | 19 ++++
src/app/rx-stomp.config.ts | 2 +-
4 files changed, 127 insertions(+), 1 deletion(-)
create mode 100644 src/app/components/participant/comment-create-page/comment-create-page.component.ts
create mode 100644 src/app/models/messages/create-comment.ts
diff --git a/src/app/components/participant/comment-create-page/comment-create-page.component.ts b/src/app/components/participant/comment-create-page/comment-create-page.component.ts
new file mode 100644
index 000000000..b5c53abe1
--- /dev/null
+++ b/src/app/components/participant/comment-create-page/comment-create-page.component.ts
@@ -0,0 +1,88 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { Comment } from '../../../models/comment';
+import { CommentService } from '../../../services/http/comment.service';
+import { NotificationService } from '../../../services/util/notification.service';
+import { AuthenticationService } from '../../../services/http/authentication.service';
+import { User } from '../../../models/user';
+import { CommentListComponent } from '../../shared/comment-list/comment-list.component';
+import { RxStompService } from '@stomp/ng2-stompjs';
+import { CreateComment } from '../../../models/messages/create-comment';
+
+@Component({
+ selector: 'app-comment-create-page',
+ templateUrl: './comment-create-page.component.html',
+ styleUrls: ['./comment-create-page.component.scss']
+})
+export class CommentCreatePageComponent implements OnInit {
+ @ViewChild(CommentListComponent) child: CommentListComponent;
+ roomId: string;
+ roomShortId: string;
+ user: User;
+ private date = new Date(Date.now());
+ subjectForm = new FormControl('', [Validators.required]);
+ bodyForm = new FormControl('', [Validators.required]);
+
+
+ constructor(
+ protected authenticationService: AuthenticationService,
+ private route: ActivatedRoute,
+ private notification: NotificationService,
+ private translationService: TranslateService,
+ private rxStompService: RxStompService) { }
+
+ ngOnInit(): void {
+ this.user = this.authenticationService.getUser();
+ this.roomShortId = this.route.snapshot.paramMap.get('roomId');
+ this.roomId = localStorage.getItem(`roomId`);
+ }
+
+ send(subject: string, body: string): void {
+ subject = subject.trim();
+ body = body.trim();
+ if (!subject && !body) {
+ this.translationService.get('comment-page.error-both-fields').subscribe(translatedMessage => {
+ this.notification.show(translatedMessage);
+ });
+ return;
+ }
+ if (!subject) {
+ this.translationService.get('comment-page.error-title').subscribe(translatedMessage => {
+ this.notification.show(translatedMessage);
+ });
+ return;
+ }
+ if (!body) {
+ this.translationService.get('comment-page.error-comment').subscribe(translatedMessage => {
+ this.notification.show(translatedMessage);
+ });
+ return;
+ }
+ const message = new CreateComment(this.roomId, this.user.id, subject, body);
+ this.rxStompService.publish({
+ destination: `/queue/comment.command`,
+ body: JSON.stringify(message),
+ headers: {
+ 'content-type': 'application/json'
+ }
+ });
+
+ /*this.commentService.addComment({
+ id: '',
+ roomId: this.roomId,
+ userId: this.user.id,
+ subject: subject,
+ body: body,
+ creationTimestamp: this.date.getTime(),
+ read: false,
+ revision: ''
+ } as Comment).subscribe(() => {
+ this.child.getComments();
+ this.notification.show(`Comment '${subject}' successfully created.`);
+ this.goBack();
+ });*/
+ }
+}
+
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 8b104e1f2..fc3ab2d3b 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -3,6 +3,8 @@ 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';
@Component({
selector: 'app-comment-list',
@@ -19,12 +21,17 @@ export class CommentListComponent implements OnInit {
constructor(private commentService: CommentService,
private translateService: TranslateService,
protected langService: LanguageService) {
+ private rxStompService: RxStompService) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
ngOnInit() {
this.roomId = localStorage.getItem(`roomId`);
+ this.comments = [];
this.hideCommentsList = false;
+ this.rxStompService.watch(`/queue/${this.roomId}.comment.stream`).subscribe((message: Message) => {
+ this.parseIncomingMessage(message);
+ });
this.getComments();
this.translateService.use(localStorage.getItem('currentLang'));
}
@@ -40,4 +47,16 @@ export class CommentListComponent implements OnInit {
searchComments(term: string): void {
this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(term));
}
+
+ parseIncomingMessage(message: Message) {
+ console.log(message);
+ const payload = JSON.parse(message.body).payload;
+ const c = new Comment();
+ c.roomId = this.roomId;
+ c.subject = payload.subject;
+ c.body = payload.body;
+
+ this.comments.concat(c);
+ }
}
+
diff --git a/src/app/models/messages/create-comment.ts b/src/app/models/messages/create-comment.ts
new file mode 100644
index 000000000..43331c038
--- /dev/null
+++ b/src/app/models/messages/create-comment.ts
@@ -0,0 +1,19 @@
+export class CreateComment {
+ type: string;
+ payload: {
+ roomId: string;
+ creatorId: string;
+ subject: string;
+ body: string;
+ };
+
+ constructor(roomId: string, creatorId: string, subject: string, body: string) {
+ this.type = 'CreateComment';
+ this.payload = {
+ roomId: roomId,
+ creatorId: creatorId,
+ subject: subject,
+ body: body
+ };
+ }
+}
diff --git a/src/app/rx-stomp.config.ts b/src/app/rx-stomp.config.ts
index 70326222a..aaded217c 100644
--- a/src/app/rx-stomp.config.ts
+++ b/src/app/rx-stomp.config.ts
@@ -18,6 +18,6 @@ export const myRxStompConfig: InjectableRxStompConfig = {
// It can be quite verbose, not recommended in production
// Skip this key to stop logging to console
debug: (msg: string): void => {
- // console.log(new Date(), 'STOMP debug: ' + msg);
+ console.log(new Date(), 'STOMP debug: ' + msg);
}
};
--
GitLab