From 07005498c7bceae993709907e030119ce5a4ce93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20K=C3=A4sler?= <tom.kaesler@mni.thm.de>
Date: Fri, 28 Jun 2019 02:30:59 +0200
Subject: [PATCH] Add comment counter to room page
Refactor participant room page to use base class
---
.../room-creator-page.component.html | 2 +-
.../room-creator-page.component.ts | 10 ++++---
.../room-participant-page.component.html | 2 +-
.../room-participant-page.component.ts | 26 +++++++++----------
.../shared/room-page/room-page.component.ts | 26 ++++++++++++++++---
5 files changed, 44 insertions(+), 22 deletions(-)
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index b7c61024d..b7bcdb490 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -29,7 +29,7 @@
<mat-grid-tile>
<button mat-icon-button
routerLink="/creator/room/{{ room.shortId }}/comments">
- <mat-icon>question_answer</mat-icon>
+ <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary">question_answer</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
<h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.comments' | translate}}</h4>
</button>
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.ts b/src/app/components/creator/room-creator-page/room-creator-page.component.ts
index c670b14b9..1dd981c79 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.ts
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.ts
@@ -10,6 +10,8 @@ import { RoomEditComponent } from '../_dialogs/room-edit/room-edit.component';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
import { TSMap } from 'typescript-map';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { CommentService } from '../../../services/http/comment.service';
@Component({
selector: 'app-room-creator-page',
@@ -29,8 +31,10 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
protected location: Location,
public dialog: MatDialog,
private translateService: TranslateService,
- protected langService: LanguageService) {
- super(roomService, route, location);
+ protected langService: LanguageService,
+ protected wsCommentService: WsCommentServiceService,
+ protected commentService: CommentService) {
+ super(roomService, route, location, wsCommentService, commentService);
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
@@ -38,7 +42,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
window.scroll(0, 0);
this.translateService.use(localStorage.getItem('currentLang'));
this.route.params.subscribe(params => {
- this.getRoom(params['roomId']);
+ this.initializeRoom(params['roomId']);
});
}
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 29373c1a6..edfad7338 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -17,7 +17,7 @@
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>
<button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/comments">
- <mat-icon>question_answer</mat-icon>
+ <mat-icon matBadge="{{commentCounter}}" matBadgeColor="primary">question_answer</mat-icon>
<h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-comment' | translate}}</h3>
<h4 *ngIf="deviceType === 'mobile'">{{ 'room-page.create-comment' | translate}}</h4>
</button>
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.ts b/src/app/components/participant/room-participant-page/room-participant-page.component.ts
index 69244c222..afc55c91b 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.ts
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.ts
@@ -1,44 +1,42 @@
import { Component, OnInit } from '@angular/core';
import { Room } from '../../../models/room';
+import { RoomPageComponent } from '../../shared/room-page/room-page.component';
import { Location } from '@angular/common';
import { RoomService } from '../../../services/http/room.service';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { CommentService } from '../../../services/http/comment.service';
@Component({
selector: 'app-room-participant-page',
templateUrl: './room-participant-page.component.html',
styleUrls: ['./room-participant-page.component.scss']
})
-export class RoomParticipantPageComponent implements OnInit {
+export class RoomParticipantPageComponent extends RoomPageComponent implements OnInit {
room: Room;
isLoading = true;
deviceType = localStorage.getItem('deviceType');
- constructor(private location: Location,
- private roomService: RoomService,
- private route: ActivatedRoute,
+ constructor(protected location: Location,
+ protected roomService: RoomService,
+ protected route: ActivatedRoute,
private translateService: TranslateService,
- protected langService: LanguageService) {
+ protected langService: LanguageService,
+ protected wsCommentService: WsCommentServiceService,
+ protected commentService: CommentService) {
+ super(roomService, route, location, wsCommentService, commentService);
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
ngOnInit() {
window.scroll(0, 0);
this.route.params.subscribe(params => {
- this.getRoom(params['roomId']);
+ this.initializeRoom(params['roomId']);
});
this.translateService.use(localStorage.getItem('currentLang'));
}
-
- getRoom(id: string): void {
- this.roomService.getRoomByShortId(id)
- .subscribe(room => {
- this.room = room;
- this.isLoading = false;
- });
- }
}
diff --git a/src/app/components/shared/room-page/room-page.component.ts b/src/app/components/shared/room-page/room-page.component.ts
index f4360ec49..0b00c3d7e 100644
--- a/src/app/components/shared/room-page/room-page.component.ts
+++ b/src/app/components/shared/room-page/room-page.component.ts
@@ -3,6 +3,9 @@ import { Room } from '../../../models/room';
import { RoomService } from '../../../services/http/room.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
+import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
+import { CommentService } from '../../../services/http/comment.service';
+import { Message } from '@stomp/stompjs';
@Component({
selector: 'app-room-page',
@@ -12,22 +15,39 @@ import { Location } from '@angular/common';
export class RoomPageComponent implements OnInit {
room: Room = null;
isLoading = true;
+ commentCounter: number;
constructor(protected roomService: RoomService,
protected route: ActivatedRoute,
- protected location: Location) {
+ protected location: Location,
+ protected wsCommentService: WsCommentServiceService,
+ protected commentService: CommentService
+ ) {
}
ngOnInit() {
this.route.params.subscribe(params => {
- this.getRoom(params['roomId']);
+ this.initializeRoom(params['roomId']);
});
}
- getRoom(id: string): void {
+ initializeRoom(id: string): void {
this.roomService.getRoomByShortId(id).subscribe(room => {
this.room = room;
this.isLoading = false;
+ this.commentService.getComments(this.room.id)
+ .subscribe(comments => {
+ this.commentCounter = comments.length;
+ });
+ this.wsCommentService.getCommentStream(this.room.id).subscribe((message: Message) => {
+ const msg = JSON.parse(message.body);
+ const payload = msg.payload;
+ if (msg.type === 'CommentCreated') {
+ this.commentCounter = this.commentCounter + 1;
+ } else if (msg.type === 'CommentDeleted') {
+ this.commentCounter = this.commentCounter - 1;
+ }
+ });
});
}
--
GitLab