diff --git a/package.json b/package.json index e6f6897bd8c50b8009fc44a31aa1c7f29a5dc1df..4a116219ebc08e93907959f0ff4b2730c323993f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@angular/router": "7.1.0", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", + "@stomp/ng2-stompjs": "^7.2.0", "chart.js": "^2.7.3", "core-js": "^2.5.7", "hammerjs": "^2.0.8", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 764f878156adb1a6bf6e97eafd3e5dc35a5498fa..b0dbf94001d43257056fb0d97aec0e631b4e6587 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,9 @@ import { LanguageService } from './services/util/language.service'; import { MarkdownService, MarkedOptions } from 'ngx-markdown'; import { NewLandingComponent } from './components/home/new-landing/new-landing.component'; import { HomePageComponent } from './components/home/home-page/home-page.component'; +import { InjectableRxStompConfig, RxStompService, rxStompServiceFactory } from '@stomp/ng2-stompjs'; +import { myRxStompConfig } from './rx-stomp.config'; + export function dialogClose(dialogResult: any) { } @@ -54,6 +57,15 @@ export function dialogClose(dialogResult: any) { useClass: AuthenticationInterceptor, multi: true }, + { + provide: InjectableRxStompConfig, + useValue: myRxStompConfig + }, + { + provide: RxStompService, + useFactory: rxStompServiceFactory, + deps: [InjectableRxStompConfig] + }, NotificationService, AuthenticationService, AuthenticationGuard, diff --git a/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts b/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts index 55f0725ab74c156c2225ba9ddcb790c29b679630..e4e74b34db01192677db0a4616594af6cd409c0d 100644 --- a/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts +++ b/src/app/components/shared/feedback-barometer-page/feedback-barometer-page.component.ts @@ -1,7 +1,12 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import { AuthenticationService } from '../../../services/http/authentication.service'; import { UserRole } from '../../../models/user-roles.enum'; import { NotificationService } from '../../../services/util/notification.service'; +import { RxStompService } from '@stomp/ng2-stompjs'; +import { Message } from '@stomp/stompjs'; +import { CreateFeedback } from '../../../models/messages/create-feedback'; +import { GetFeedback } from '../../../models/messages/get-feedback'; /* ToDo: Use TranslateService */ @@ -18,16 +23,29 @@ export class FeedbackBarometerPageComponent implements OnInit { { state: 3, name: 'sentiment_very_dissatisfied', message: 'Abgehängt.', count: 0, } ]; userRole: UserRole; - - dummy = [2, 3, 2, 1]; // dummy data -> delete this with api implementation and add get-data + roomId: string; constructor( private authenticationService: AuthenticationService, - private notification: NotificationService, ) {} + private notification: NotificationService, + private rxStompService: RxStompService, + private route: ActivatedRoute, ) { + this.roomId = this.route.snapshot.params.roomId; + } ngOnInit() { this.userRole = this.authenticationService.getRole(); - this.updateFeedback(this.dummy); + + this.rxStompService.watch(`/room/${this.roomId}/feedback.stream`).subscribe((message: Message) => { + this.parseIncomingMessage(message); + }); + + const getFeedback = new GetFeedback(); + + this.rxStompService.publish({ + destination: `/backend/room/${this.roomId}/feedback.query`, + body: JSON.stringify(getFeedback) + }); } private updateFeedback(data) { @@ -38,10 +56,12 @@ export class FeedbackBarometerPageComponent implements OnInit { } } - submitFeedback(state: string) { - this.dummy[state] += 1; // delete this with api implementation and add submit-data - this.updateFeedback(this.dummy); - this.notification.show(`Feedback submitted to room.`); + submitFeedback(state: number) { + const createFeedback = new CreateFeedback(state); + this.rxStompService.publish({ + destination: `/backend/room/${this.roomId}/feedback.command`, + body: JSON.stringify(createFeedback) + }); } toggle() { @@ -49,4 +69,9 @@ export class FeedbackBarometerPageComponent implements OnInit { const temp = 'stopped'; // add status variable this.notification.show(`Feedback transmission ${ temp }.`); } + + parseIncomingMessage(message: Message) { + const values = JSON.parse(message.body).payload.values; + this.updateFeedback(values); + } } diff --git a/src/app/models/messages/create-feedback.ts b/src/app/models/messages/create-feedback.ts new file mode 100644 index 0000000000000000000000000000000000000000..05bea86504e69c54bd8b28f3bbdc15525cbb08f3 --- /dev/null +++ b/src/app/models/messages/create-feedback.ts @@ -0,0 +1,13 @@ +export class CreateFeedback { + type: string; + payload: { + value: number; + }; + + constructor(val: number) { + this.type = 'CreateFeedback'; + this.payload = { + value: val + }; + } +} diff --git a/src/app/models/messages/get-feedback.ts b/src/app/models/messages/get-feedback.ts new file mode 100644 index 0000000000000000000000000000000000000000..563ea0ab71c90ba413bf4507e18c73252af49551 --- /dev/null +++ b/src/app/models/messages/get-feedback.ts @@ -0,0 +1,7 @@ +export class GetFeedback { + type: string; + + constructor() { + this.type = 'GetFeedback'; + } +} diff --git a/src/app/rx-stomp.config.ts b/src/app/rx-stomp.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..70326222a0d4eb3bb8de6041633a864871acfda1 --- /dev/null +++ b/src/app/rx-stomp.config.ts @@ -0,0 +1,23 @@ +import { InjectableRxStompConfig } from '@stomp/ng2-stompjs'; + +export const myRxStompConfig: InjectableRxStompConfig = { + // Which server? + brokerURL: `ws://${window.location.hostname}:8080/ws/websocket`, + + // How often to heartbeat? + // Interval in milliseconds, set to 0 to disable + heartbeatIncoming: 0, // Typical value 0 - disabled + heartbeatOutgoing: 20000, // Typical value 20000 - every 20 seconds + + // Wait in milliseconds before attempting auto reconnect + // Set to 0 to disable + // Typical value 500 (500 milli seconds) + reconnectDelay: 1000, + + // Will log diagnostics on console + // 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); + } +};