diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
index ef718fe257fffa4a5b7144ac44b4c2581b39c5b9..638e65c03491bacada8a3e77cc9d42dcae553b50 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
@@ -27,9 +27,9 @@
<div class="button-bar"
fxLayoutAlign="center center">
- <div *ngIf="comments && comments.length > 0">
+ <div *ngIf="comments && commentsFilteredByTime.length > 0">
<h3 class="counter"
- *ngIf="comments && !hideCommentsList">{{comments.length}}</h3>
+ *ngIf="comments && !hideCommentsList">{{commentsFilteredByTime .length}}</h3>
<h3 class="counter-filtered"
*ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</h3>
</div>
@@ -50,6 +50,16 @@
<mat-icon class="searchBarIcon">swap_vert</mat-icon>
</button>
+ <button id="time-button"
+ mat-icon-button
+ class="searchBarButton"
+ aria-labelledby="time_settings"
+ *ngIf="!searchBox.value && comments && comments.length > 0 && !search"
+ [matMenuTriggerFor]="timeMenu"
+ matTooltip="{{ 'comment-list.select-time' | translate }}">
+ <mat-icon class="searchBarIcon">access_time</mat-icon>
+ </button>
+
<button mat-icon-button
class="searchBarButton"
(click)="switchToCommentList()"
@@ -86,6 +96,16 @@
</button>
</mat-menu>
+ <mat-menu #timeMenu="matMenu" xPosition="before">
+ <div *ngFor="let periodItem of periodsList">
+ <button mat-menu-item (click)="setTimePeriod(periodItem)" class="period"
+ [ngClass]="{'selected': periodItem === period}"
+ aria-labelledby="{{periodItem}}">
+ <span>{{ ('comment-list.select-' + periodItem) | translate }}</span>
+ </button>
+ </div>
+ </mat-menu>
+
</div>
<button mat-icon-button
@@ -97,7 +117,7 @@
</button>
<div *ngIf="!isLoading">
- <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments"
+ <app-comment *ngFor="let current of hideCommentsList ? filteredComments : commentsFilteredByTime"
[comment]="current"
[userRole]="user.role"
[parseVote]="getVote(current)"
@@ -106,7 +126,7 @@
</app-comment>
</div>
-<div *ngIf="comments && comments.length < 1 && !isLoading"
+<div *ngIf="comments && commentsFilteredByTime.length < 1 && !isLoading"
fxLayout="row"
fxLayoutAlign="center center"
class="no-comments">
@@ -118,4 +138,10 @@
<div id="search-box-input-description">
{{ 'comment-page.search-box-input-description' | translate }}
</div>
+ <div id="select-time">{{ 'comment-list.a11y-select-time' | translate }}</div>
+ <div id="select-time-1h">{{ 'comment-list.a11y-select-time-1h' | translate }}</div>
+ <div id="select-time-3h">{{ 'comment-list.a11y-select-time-3h' | translate }}</div>
+ <div id="select-time-1d">{{ 'comment-list.a11y-select-time-1d' | translate }}</div>
+ <div id="select-time-1w">{{ 'comment-list.a11y-select-time-1w' | translate }}</div>
+ <div id="select-time-all">{{ 'comment-list.a11y-select-time-all' | translate }}</div>
</div>
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
index 1f8b93effe261613cac6df6c9de43299ea944796..ed8ea0f7b63d53c4d5aca906071db29c85278640 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.scss
@@ -124,3 +124,8 @@ h3 {
.visible {
transform: scale(1.4);
}
+
+.selected {
+ font-weight: bold;
+}
+
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
index 78b51440c88d27a508b226aba662777164b7dca8..6b7d3b508672fcdfe20197aac9481c3329315dc3 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
@@ -15,6 +15,7 @@ import { CorrectWrong } from '../../../models/correct-wrong.enum';
import { EventService } from '../../../services/util/event.service';
import { Router } from '@angular/router';
import { AppComponent } from '../../../app.component';
+import { Period } from '../../shared/comment-list/comment-list.component';
@Component({
selector: 'app-moderator-comment-list',
@@ -27,6 +28,7 @@ export class ModeratorCommentListComponent implements OnInit {
@Input() roomId: string;
AppComponent = AppComponent;
comments: Comment[] = [];
+ commentsFilteredByTime: Comment[] = [];
room: Room;
hideCommentsList = false;
filteredComments: Comment[];
@@ -52,6 +54,8 @@ export class ModeratorCommentListComponent implements OnInit {
searchInput = '';
search = false;
searchPlaceholder = '';
+ periodsList = Object.values(Period);
+ period: Period = Period.ALL;
constructor(
private commentService: CommentService,
@@ -85,8 +89,8 @@ export class ModeratorCommentListComponent implements OnInit {
this.commentService.getRejectedComments(this.roomId)
.subscribe(comments => {
this.comments = comments;
+ this.setTimePeriod(this.period);
this.isLoading = false;
- this.sortComments(this.currentSort);
});
this.translateService.get('comment-list.search').subscribe(msg => {
this.searchPlaceholder = msg;
@@ -100,13 +104,13 @@ export class ModeratorCommentListComponent implements OnInit {
}
isScrollButtonVisible(): boolean {
- return !AppComponent.isScrolledTop() && this.comments.length > 10;
+ return !AppComponent.isScrolledTop() && this.commentsFilteredByTime.length > 10;
}
searchComments(): void {
if (this.searchInput && this.searchInput.length > 2) {
this.hideCommentsList = true;
- this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(this.searchInput.toLowerCase()));
+ this.filteredComments = this.commentsFilteredByTime.filter(c => c.body.toLowerCase().includes(this.searchInput.toLowerCase()));
}
}
@@ -129,7 +133,7 @@ export class ModeratorCommentListComponent implements OnInit {
this.comments = this.comments.filter(x => x.score >= commentThreshold);
}
}
- this.sortComments(this.currentSort);
+ this.setTimePeriod(this.period);
}
getVote(comment: Comment): Vote {
@@ -153,6 +157,7 @@ export class ModeratorCommentListComponent implements OnInit {
this.comments = this.comments.filter(function (el) {
return el.id !== payload.id;
});
+ this.setTimePeriod(this.period);
}
switch (key) {
case this.read:
@@ -189,10 +194,10 @@ export class ModeratorCommentListComponent implements OnInit {
}
break;
}
-
- this.filterComments(this.currentFilter);
- this.sortComments(this.currentSort);
- this.searchComments();
+ this.setTimePeriod(this.period);
+ if (this.hideCommentsList) {
+ this.searchComments();
+ }
}
parseIncomingModeratorMessage(message: Message) {
@@ -210,18 +215,19 @@ export class ModeratorCommentListComponent implements OnInit {
this.comments = this.comments.concat(c);
break;
}
- this.filterComments(this.currentFilter);
- this.sortComments(this.currentSort);
- this.searchComments();
+ this.setTimePeriod(this.period);
+ if (this.hideCommentsList) {
+ this.searchComments();
+ }
}
filterComments(type: string, compare?: any): void {
this.currentFilter = type;
if (type === '') {
- this.filteredComments = this.comments;
+ this.filteredComments = this.commentsFilteredByTime;
return;
}
- this.filteredComments = this.comments.filter(c => {
+ this.filteredComments = this.commentsFilteredByTime.filter(c => {
switch (type) {
case this.correct:
return c.correct === CorrectWrong.CORRECT ? 1 : 0;
@@ -263,7 +269,7 @@ export class ModeratorCommentListComponent implements OnInit {
if (this.hideCommentsList === true) {
this.sort(this.filteredComments, type);
} else {
- this.sort(this.comments, type);
+ this.sort(this.commentsFilteredByTime, type);
}
this.currentSort = type;
}
@@ -277,4 +283,31 @@ export class ModeratorCommentListComponent implements OnInit {
}
this.router.navigate([`/${role}/room/${this.room.shortId}/comments`]);
}
+
+ setTimePeriod(period: Period) {
+ this.period = period;
+ const currentTime = new Date();
+ const hourInSeconds = 3600000;
+ let periodInSeconds;
+ if (period !== Period.ALL) {
+ switch (period) {
+ case Period.ONEHOUR:
+ periodInSeconds = hourInSeconds;
+ break;
+ case Period.THREEHOURS:
+ periodInSeconds = hourInSeconds * 2;
+ break;
+ case Period.ONEDAY:
+ periodInSeconds = hourInSeconds * 24;
+ break;
+ case Period.ONEWEEK:
+ periodInSeconds = hourInSeconds * 168;
+ }
+ this.commentsFilteredByTime = this.comments
+ .filter(c => new Date(c.timestamp).getTime() >= (currentTime.getTime() - periodInSeconds));
+ } else {
+ this.commentsFilteredByTime = this.comments;
+ }
+ this.filterComments(this.currentFilter);
+ }
}
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 113b011460178ca2a7c00832a9358ab0b5b450b6..f0696d1f335cc7a85dd920074d8bbd60a92ed3b1 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -36,9 +36,9 @@
<div class="button-bar"
fxLayoutAlign="center center">
- <div *ngIf="comments && comments.length > 0">
+ <div *ngIf="comments && commentsFilteredByTime.length > 0">
<h3 class="counter"
- *ngIf="!hideCommentsList">{{comments.length}}</h3>
+ *ngIf="!hideCommentsList">{{commentsFilteredByTime.length}}</h3>
<h3 class="counter-filtered"
*ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</h3>
</div>
@@ -70,6 +70,16 @@
<mat-icon class="searchBarIcon">filter_list</mat-icon>
</button>
+ <button id="time-button"
+ mat-icon-button
+ class="searchBarButton"
+ aria-labelledby="time_settings"
+ *ngIf="!searchBox.value && comments && comments.length > 0 && !search"
+ [matMenuTriggerFor]="timeMenu"
+ matTooltip="{{ 'comment-list.select-time' | translate }}">
+ <mat-icon class="searchBarIcon">access_time</mat-icon>
+ </button>
+
<button id="pause-comments"
mat-fab
aria-labelledby="pause"
@@ -92,6 +102,16 @@
</div>
+ <mat-menu #timeMenu="matMenu" xPosition="before">
+ <div *ngFor="let periodItem of periodsList">
+ <button mat-menu-item (click)="setTimePeriod(periodItem)" class="period"
+ [ngClass]="{'selected': periodItem === period}"
+ aria-labelledby="{{periodItem}}">
+ <span>{{ ('comment-list.select-' + periodItem) | translate }}</span>
+ </button>
+ </div>
+ </mat-menu>
+
<mat-menu #sortMenu="matMenu"
xPosition="before">
@@ -185,7 +205,7 @@
</button>
<div *ngIf="!isLoading">
- <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments"
+ <app-comment *ngFor="let current of hideCommentsList ? filteredComments : commentsFilteredByTime"
[comment]="current"
[parseVote]="getVote(current)"
[userRole]="userRole"
@@ -197,7 +217,7 @@
</div>
<!-- No Questions Present -->
-<div *ngIf="comments && comments.length < 1 && !isLoading"
+<div *ngIf="comments && commentsFilteredByTime.length < 1 && !isLoading"
fxLayout="row"
fxLayoutAlign="center center"
class="no-comments">
@@ -224,4 +244,10 @@
<div id="play">{{'comment-list.a11y-play' | translate}}</div>
<div id="close_search">{{'comment-list.a11y-close_search' | translate}}</div>
<div id="new-comment">{{ 'comment-page.new-comment' | translate:{comment: newestComment} }}</div>
+ <div id="select-time">{{ 'comment-list.a11y-select-time' | translate }}</div>
+ <div id="select-time-1h">{{ 'comment-list.a11y-select-time-1h' | translate }}</div>
+ <div id="select-time-3h">{{ 'comment-list.a11y-select-time-3h' | translate }}</div>
+ <div id="select-time-1d">{{ 'comment-list.a11y-select-time-1d' | translate }}</div>
+ <div id="select-time-1w">{{ 'comment-list.a11y-select-time-1w' | translate }}</div>
+ <div id="select-time-all">{{ 'comment-list.a11y-select-time-all' | translate }}</div>
</div>
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 8e4057570a0ac547f6ed156849f5aaa1b56d1ada..0e68b8c23753c5b22a2deb519c880ef6370983a5 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -202,3 +202,7 @@ h3 {
.visible {
transform: scale(1.4);
}
+
+.selected {
+ font-weight: bold;
+}
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 0dd540b5512737d7b302623f08c2381d4dfce340..1e96bd17925ddacdebbdb06b40284654b465134b 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -24,11 +24,20 @@ import { AuthenticationService } from '../../../services/http/authentication.ser
import { Title } from '@angular/platform-browser';
import { TitleService } from '../../../services/util/title.service';
+export enum Period {
+ ONEHOUR = 'time-1h',
+ THREEHOURS = 'time-3h',
+ ONEDAY = 'time-1d',
+ ONEWEEK = 'time-1w',
+ ALL = 'time-all'
+}
+
@Component({
selector: 'app-comment-list',
templateUrl: './comment-list.component.html',
styleUrls: ['./comment-list.component.scss'],
})
+
export class CommentListComponent implements OnInit, OnDestroy {
@ViewChild('searchBox') searchField: ElementRef;
@Input() user: User;
@@ -36,6 +45,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
shortId: string;
AppComponent = AppComponent;
comments: Comment[] = [];
+ commentsFilteredByTime: Comment[] = [];
room: Room;
hideCommentsList = false;
filteredComments: Comment[];
@@ -70,6 +80,8 @@ export class CommentListComponent implements OnInit, OnDestroy {
newestComment: string;
freeze = false;
commentStream: Subscription;
+ periodsList = Object.values(Period);
+ period: Period = Period.ALL;
constructor(
private commentService: CommentService,
@@ -162,7 +174,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
if (this.searchInput) {
if (this.searchInput.length > 1) {
this.hideCommentsList = true;
- this.filteredComments = this.comments.filter(c => c.body.toLowerCase().includes(this.searchInput.toLowerCase()));
+ this.filteredComments = this.commentsFilteredByTime.filter(c => c.body.toLowerCase().includes(this.searchInput.toLowerCase()));
}
} else if (this.searchInput.length === 0 && this.currentFilter === '') {
this.hideCommentsList = false;
@@ -193,7 +205,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
this.setComments(this.comments.filter(x => x.score >= commentThreshold));
}
}
- this.sortComments(this.currentSort);
+ this.setTimePeriod(this.period);
}
getVote(comment: Comment): Vote {
@@ -220,8 +232,8 @@ export class CommentListComponent implements OnInit, OnDestroy {
});
this.announceNewComment(c.body);
-
- this.setComments(this.comments.concat(c));
+ this.comments = this.comments.concat(c);
+ this.setComments(this.comments);
break;
case 'CommentPatched':
// ToDo: Use a map for comments w/ key = commentId
@@ -250,9 +262,10 @@ export class CommentListComponent implements OnInit, OnDestroy {
case this.ack:
const isNowAck = <boolean>value;
if (!isNowAck) {
- this.setComments(this.comments.filter(function (el) {
+ this.comments = this.comments.filter(function (el) {
return el.id !== payload.id;
- }));
+ });
+ this.setTimePeriod(this.period);
}
break;
case this.tag:
@@ -282,9 +295,10 @@ export class CommentListComponent implements OnInit, OnDestroy {
}
break;
}
- this.filterComments(this.currentFilter);
- this.sortComments(this.currentSort);
- this.searchComments();
+ this.setTimePeriod(this.period);
+ if (this.hideCommentsList) {
+ this.searchComments();
+ }
}
openCreateDialog(): void {
@@ -339,12 +353,12 @@ export class CommentListComponent implements OnInit, OnDestroy {
filterComments(type: string, compare?: any): void {
this.currentFilter = type;
if (type === '') {
- this.filteredComments = this.comments;
+ this.filteredComments = this.commentsFilteredByTime;
this.hideCommentsList = false;
this.currentFilter = '';
return;
}
- this.filteredComments = this.comments.filter(c => {
+ this.filteredComments = this.commentsFilteredByTime.filter(c => {
switch (type) {
case this.correct:
return c.correct === CorrectWrong.CORRECT ? 1 : 0;
@@ -387,7 +401,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
if (this.hideCommentsList === true) {
this.filteredComments = this.sort(this.filteredComments, type);
} else {
- this.setComments(this.sort(this.comments, type));
+ this.setComments(this.sort(this.commentsFilteredByTime, type));
}
this.currentSort = type;
}
@@ -432,8 +446,8 @@ export class CommentListComponent implements OnInit, OnDestroy {
}
setComments(comments: Comment[]) {
- this.titleService.attachTitle('(' + comments.length + ')');
- this.comments = comments;
+ this.commentsFilteredByTime = comments;
+ this.titleService.attachTitle('(' + this.commentsFilteredByTime.length + ')');
}
/**
@@ -454,4 +468,32 @@ export class CommentListComponent implements OnInit, OnDestroy {
this.liveAnnouncer.announce(newCommentText).catch(err => { /* TODO error handling */ });
}, 450);
}
+
+ setTimePeriod(period: Period) {
+ this.period = period;
+ const currentTime = new Date();
+ const hourInSeconds = 3600000;
+ let periodInSeconds;
+ if (period !== Period.ALL) {
+ switch (period) {
+ case Period.ONEHOUR:
+ periodInSeconds = hourInSeconds;
+ break;
+ case Period.THREEHOURS:
+ periodInSeconds = hourInSeconds * 2;
+ break;
+ case Period.ONEDAY:
+ periodInSeconds = hourInSeconds * 24;
+ break;
+ case Period.ONEWEEK:
+ periodInSeconds = hourInSeconds * 168;
+ }
+ this.commentsFilteredByTime = this.comments
+ .filter(c => new Date(c.timestamp).getTime() >= (currentTime.getTime() - periodInSeconds));
+ } else {
+ this.commentsFilteredByTime = this.comments;
+ }
+ this.filterComments(this.currentFilter);
+ this.titleService.attachTitle('(' + this.commentsFilteredByTime.length + ')');
+ }
}
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index e7a90ae88e6bbe742f8003e692671a5abe0c6158..ab6c667949a3a062007754d597eb49feaed64e51 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -36,10 +36,23 @@
<span>{{tag}}</span>
</button>
</mat-menu>
+ <mat-menu #timeMenu="matMenu" xPosition="before">
+ <div *ngFor="let periodItem of periodsList">
+ <button mat-menu-item (click)="setTimePeriod(periodItem)" class="period"
+ [ngClass]="{'selected': periodItem === period}"
+ aria-labelledby="{{periodItem}}">
+ <span>{{ ('comment-list.select-' + periodItem) | translate }}</span>
+ </button>
+ </div>
+ </mat-menu>
<button ars-btn [mat-menu-trigger-for]="sortMenu" matRipple aria-labelledby="sort-lbl">
<i>sort</i>
<p>{{'question-wall.sort' | translate}}</p>
</button>
+ <button ars-btn [mat-menu-trigger-for]="timeMenu" matRipple aria-labelledby="filter-time">
+ <i>access_time</i>
+ <p>{{'question-wall.time-period' | translate}}</p>
+ </button>
<button ars-btn [mat-menu-trigger-for]="filterMenu" matRipple aria-labelledby="filter-lbl">
<i>filter_list</i>
<p>Filter</p>
@@ -145,14 +158,14 @@
<ars-row *ngIf="!userSelection">
- <ars-fill *ngIf="(hasFilter?commentsFilter:comments).length==0"
+ <ars-fill *ngIf="(hasFilter?commentsFilter:commentsFilteredByTime).length==0"
style="float:left;">
<p class="questionwall-present-introduction-desc">
{{'question-wall.no-result' | translate}}
</p>
</ars-fill>
- <ars-row *ngFor="let comment of hasFilter?commentsFilter:comments"
+ <ars-row *ngFor="let comment of hasFilter?commentsFilter:commentsFilteredByTime"
class="questionwall-comment-anchor"
style="float:left;">
<ars-row style="box-sizing:border-box;padding:8px;">
@@ -270,6 +283,7 @@
<div id="sort-lbl-old">{{'question-wall.sort-lbl-old' | translate}}</div>
<div id="sort-lbl-rating">{{'question-wall.sort-lbl-rating' | translate}}</div>
<div id="filter-lbl">{{'question-wall.filter-lbl' | translate}}</div>
+ <div id="filter-time">{{'question-wall.filter-time' | translate}}</div>
<div id="filter-lbl-favorites">{{'question-wall.filter-lbl-favorites' | translate}}</div>
<div id="filter-lbl-approved">{{'question-wall.filter-lbl-approved' | translate}}</div>
<div id="filter-lbl-disapproved">{{'question-wall.filter-lbl-disapproved' | translate}}</div>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index b727648b71fb2bdfa683f52f20c35cded1494020..8f89207fa737313928a7f053331cfdcc5961dcb0 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -281,3 +281,7 @@
}
}
}
+
+.selected {
+ font-weight: bold;
+}
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
index 3919c37bbcd9d42d1a415eedca3cecd5bd34c293..d330f6a442ad207b242bac790d1dce62e2d12a68 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
@@ -14,6 +14,7 @@ import { Rescale } from '../../../../models/rescale';
import { QuestionWallKeyEventSupport } from '../QuestionWallKeyEventSupport';
import { CorrectWrong } from '../../../../models/correct-wrong.enum';
import { MatSliderChange } from '@angular/material/slider';
+import { Period } from '../../comment-list/comment-list.component';
@Component({
selector: 'app-question-wall',
@@ -27,6 +28,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
roomId: string;
room: Room;
comments: QuestionWallComment[] = [];
+ commentsFilteredByTime: QuestionWallComment[] = [];
commentsFilter: QuestionWallComment[] = [];
commentFocus: QuestionWallComment;
unreadComments = 0;
@@ -38,11 +40,14 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
filterDesc = '';
filterIcon = '';
isSvgIcon = false;
+ filterFunction: (x: QuestionWallComment) => boolean;
userMap: Map<number, number> = new Map<number, number>();
userList = [];
userSelection = false;
tags;
fontSize = 250;
+ periodsList = Object.values(Period);
+ period: Period = Period.ALL;
public wrap<E>(e: E, action: (e: E) => void) {
action(e);
@@ -80,6 +85,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
e.forEach(c => {
const comment = new QuestionWallComment(c, true);
this.comments.push(comment);
+ this.setTimePeriod(this.period);
});
});
this.roomService.getRoom(this.roomId).subscribe(e => {
@@ -147,16 +153,16 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
}
moveComment(fx: number) {
- if (this.comments.length === 0) {
+ if (this.commentsFilteredByTime.length === 0) {
return;
} else if (!this.commentFocus) {
- this.focusComment(this.comments[0]);
+ this.focusComment(this.commentsFilteredByTime[0]);
} else {
const cursor = this.getCommentFocusIndex();
- if (cursor + fx >= this.comments.length || cursor + fx < 0) {
+ if (cursor + fx >= this.commentsFilteredByTime.length || cursor + fx < 0) {
return;
} else {
- this.focusComment(this.comments[cursor + fx]);
+ this.focusComment(this.commentsFilteredByTime[cursor + fx]);
}
}
}
@@ -164,6 +170,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
pushIncommingComment(comment: Comment): QuestionWallComment {
const qwComment = new QuestionWallComment(comment, false);
this.comments = [qwComment, ...this.comments];
+ this.setTimePeriod(this.period);
this.unreadComments++;
return qwComment;
}
@@ -186,7 +193,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
createUserMap() {
this.userMap = new Map();
- this.comments.forEach(c => {
+ this.commentsFilteredByTime.forEach(c => {
if (!this.userMap.has(c.comment.userNumber)) {
this.userMap.set(c.comment.userNumber, 0);
}
@@ -252,7 +259,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
if (this.hasFilter) {
return this.commentsFilter;
} else {
- return this.comments;
+ return this.commentsFilteredByTime;
}
}
@@ -294,7 +301,8 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.isSvgIcon = isSvgIcon;
this.filterTitle = title;
this.filterDesc = desc;
- this.commentsFilter = this.comments.filter(filter);
+ this.filterFunction = filter;
+ this.commentsFilter = this.commentsFilteredByTime.filter(this.filterFunction);
this.hasFilter = true;
setTimeout(() => this.focusFirstComment(), 0);
}
@@ -307,6 +315,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
deactivateFilter() {
this.hasFilter = false;
+ this.filterFunction = null;
}
toggleFilter() {
@@ -317,4 +326,33 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
this.fontSize = evt.value;
}
+ setTimePeriod(period: Period) {
+ this.period = period;
+ const currentTime = new Date();
+ const hourInSeconds = 3600000;
+ let periodInSeconds;
+ if (period !== Period.ALL) {
+ switch (period) {
+ case Period.ONEHOUR:
+ periodInSeconds = hourInSeconds;
+ break;
+ case Period.THREEHOURS:
+ periodInSeconds = hourInSeconds * 2;
+ break;
+ case Period.ONEDAY:
+ periodInSeconds = hourInSeconds * 24;
+ break;
+ case Period.ONEWEEK:
+ periodInSeconds = hourInSeconds * 168;
+ }
+ this.commentsFilteredByTime = this.comments
+ .filter(c => new Date(c.date).getTime() >= (currentTime.getTime() - periodInSeconds));
+ } else {
+ this.commentsFilteredByTime = this.comments;
+ }
+ if (this.filterFunction) {
+ this.filter(this.filterIcon, this.isSvgIcon, this.filterTitle, this.filterDesc, this.filterFunction);
+ }
+ }
+
}
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index 6e9a4daf75f38172c94bf96bee352acb29e0e36d..359e58f50ed61897db82057cf473bcd9975ee1e0 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -15,6 +15,12 @@
"a11y-not_interested": "Filtert alle verneinten Fragen",
"a11y-search_box": "Gib deine Frage ein",
"a11y-swap_vert": "Option Fragen zu sortieren",
+ "a11y-select-time": "Option den Zeitraum für die anzuzeigenden Kommentare einzustellen",
+ "a11y-select-time-1h": "Zeige alle Kommentare der letzten Stunde an",
+ "a11y-select-time-3h": "Zeige alle Kommentare der letzten 3 Stunden an",
+ "a11y-select-time-1d": "Zeige alle Kommentare der letzten 24 Stunden an",
+ "a11y-select-time-1w": "Zeige alle kommentare der letzten 7 Tage an",
+ "a11y-select-time-all": "Zeige alle Kommentare an",
"add-comment": "Frage oder Mitteilung ans Publikum schreiben",
"answered": "Beantwortete Fragen",
"pause-comments": "Neue Fragen und Bewertungen anhalten, Sortierung stoppen. Hilft dir, Fragen in Ruhe zu lesen oder zu präsentieren.",
@@ -47,7 +53,13 @@
"vote-desc": "Absteigende Bewertungen",
"wrong": "Fragen, die der Vortragende oder Moderator als falsch markiert hat",
"switch-to-comment-list": "Zur öffentlichen Fragenliste",
- "switch-to-moderation-list": "Zum Index"
+ "switch-to-moderation-list": "Zum Index",
+ "select-time": "Zeitraum auswählen",
+ "select-time-1h": "Letzte Stunde",
+ "select-time-3h": "Letzte 2 Stunden",
+ "select-time-1d": "Letzte 24 Stunden",
+ "select-time-1w": "Letzte 7 Tage",
+ "select-time-all": "Unbegrenzt"
},
"comment-page": {
"a11y-comment_delete": "Löscht diese Frage",
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index c294cc992199937925c0aebe41091d9d010daed0..319bac9164fa758afb859796709da2a88d8ffe37 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -15,6 +15,12 @@
"a11y-not_interested": "Filters all questions marked as wrong",
"a11y-search_box": "Enter your question",
"a11y-swap_vert": "Option to sort questions",
+ "a11y-select-time": "Option to set the period for the comments to be displayed",
+ "a11y-select-time-1h": "Show all comments of the last hour",
+ "a11y-select-time-3h": "Show all comments of the last 3 hours",
+ "a11y-select-time-1d": "Show all comments of the last day",
+ "a11y-select-time-1w": "Show all comments of the last week",
+ "a11y-select-time-all": "Show all comments",
"answered": "Answered questions",
"add-comment": "Ask a question or write a message to the audience.",
"pause-comments": "Pause the question stream",
@@ -48,7 +54,13 @@
"vote-desc": "Descending votes",
"wrong": "Marked as wrong or critical",
"switch-to-comment-list": "Switch to public question board",
- "switch-to-moderation-list": "Switch to index"
+ "switch-to-moderation-list": "Switch to index",
+ "select-time": "Select time period",
+ "select-time-1h": "Last hour",
+ "select-time-3h": "Last 2 hours",
+ "select-time-1d": "Last 24 hours",
+ "select-time-1w": "Last 7 days",
+ "select-time-all": "Unlimited"
},
"comment-page": {
"a11y-comment_delete": "Deletes this question",
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 9e2f3ae5fe77abc2049d7ed44303a233ad644578..20fd566dbd642ed02dc53caa3fff0e409f0cd51c 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -15,6 +15,12 @@
"a11y-not_interested": "Filtert alle verneinten Fragen",
"a11y-search_box": "Gib die gewünschte Frage ein",
"a11y-swap_vert": "Option Fragen zu sortieren",
+ "a11y-select-time": "Option den Zeitraum für die anzuzeigenden Kommentare einzustellen",
+ "a11y-select-time-1h": "Zeige alle Kommentare der letzten Stunde an",
+ "a11y-select-time-3h": "Zeige alle Kommentare der letzten 3 Stunden an",
+ "a11y-select-time-1d": "Zeige alle Kommentare der letzten 24 Stunden an",
+ "a11y-select-time-1w": "Zeige alle kommentare der letzten 7 Tage an",
+ "a11y-select-time-all": "Zeige alle Kommentare an",
"answered": "Beantwortete Fragen",
"add-comment": "Stell deine Frage!",
"pause-comments": "Neue Fragen und Bewertungen anhalten, Sortierung stoppen. Hilft, um Fragen in Ruhe zu lesen.",
@@ -48,7 +54,13 @@
"vote-asc": "Aufsteigende Bewertungen",
"vote-desc": "Absteigende Bewertungen",
"wrong": "Verneint",
- "really-delete": "Willst du die Frage wirklich löschen?"
+ "really-delete": "Willst du die Frage wirklich löschen?",
+ "select-time": "Zeitraum auswählen",
+ "select-time-1h": "Letzte Stunde",
+ "select-time-3h": "Letzte 2 Stunden",
+ "select-time-1d": "Letzte 24 Stunden",
+ "select-time-1w": "Letzte 7 Tage",
+ "select-time-all": "Unbegrenzt"
},
"content": {
"cancel": "Abbrechen",
@@ -151,6 +163,8 @@
"filter-disapproved": "Verneint",
"filter-remove": "Filter entfernen",
"filter-tag": "Kategorie",
+ "time-period": "Zeitraum",
+ "filter-time": "Nach Zeitraum filtern",
"no-result": "",
"filter-user-count": "Anzahl der Kommentare",
"back-lbl": "Zurück zur vorherigen Seite",
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index b3332195f4a0ef43608cbdb7f327e44e368c0531..9d374322d721458492ddb2337814f14562aadfa9 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -25,6 +25,12 @@
"a11y-not_interested": "Filters all questions marked as wrong",
"a11y-search_box": "Enter the desired question",
"a11y-swap_vert": "Option to sort questions",
+ "a11y-select-time": "Option to set the period for the comments to be displayed",
+ "a11y-select-time-1h": "Show all comments of the last hour",
+ "a11y-select-time-3h": "Show all comments of the last 3 hours",
+ "a11y-select-time-1d": "Show all comments of the last day",
+ "a11y-select-time-1w": "Show all comments of the last week",
+ "a11y-select-time-all": "Show all comments",
"answered": "Answered questions",
"add-comment": "Ask a question!",
"pause-comments": "Pause the question stream",
@@ -58,7 +64,13 @@
"vote-desc": "Descending votes",
"vote-asc": "Ascending votes",
"wrong": "Marked as wrong or critical",
- "really-delete": "Do you really want to delete this question?"
+ "really-delete": "Do you really want to delete this question?",
+ "select-time": "Select time period",
+ "select-time-1h": "Last hour",
+ "select-time-3h": "Last 2 hours",
+ "select-time-1d": "Last 24 hours",
+ "select-time-1w": "Last 7 days",
+ "select-time-all": "Unlimited"
},
"content": {
"cancel": "Cancel",
@@ -159,6 +171,8 @@
"filter-disapproved": "Negated",
"filter-remove": "Remove Filter",
"filter-tag": "Category",
+ "time-period": "Time Period",
+ "filter-time": "Filter by time period",
"no-result": "",
"filter-user-count": "Number of comments",
"back-lbl": "Back to the previous page",