Add new time period filter 'from now'

Users are now able to filter the comments from now. If an user has selected this option all comments disappear and only comments created from now will be displayed.
If the user selects another time period or the 'from now' option again, the period will reset so that the comments will disappear again.

src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts

@@ -57,6 +57,7 @@ export class ModeratorCommentListComponent implements OnInit {
   searchPlaceholder = '';
   periodsList = Object.values(Period);
   period: Period = Period.TWOWEEKS;
+  fromNow: number;
 
   constructor(
     private commentService: CommentService,
@@ -290,14 +291,21 @@ export class ModeratorCommentListComponent implements OnInit {
     }
     this.router.navigate([`/${role}/room/${this.room.shortId}/comments`]);
   }
-
-  setTimePeriod(period: Period) {
-    this.period = period;
+  setTimePeriod(period?: Period) {
+    if (period) {
+      this.period = period;
+      this.fromNow = null;
+    }
     const currentTime = new Date();
     const hourInSeconds = 3600000;
     let periodInSeconds;
-    if (period !== Period.ALL) {
-      switch (period) {
+    if (this.period !== Period.ALL) {
+      switch (this.period) {
+        case Period.FROMNOW:
+          if (!this.fromNow) {
+            this.fromNow = new Date().getTime();
+          }
+          break;
         case Period.ONEHOUR:
           periodInSeconds = hourInSeconds;
           break;
@@ -309,9 +317,14 @@ export class ModeratorCommentListComponent implements OnInit {
           break;
         case Period.ONEWEEK:
           periodInSeconds = hourInSeconds * 168;
+          break;
+        case Period.TWOWEEKS:
+          periodInSeconds = hourInSeconds * 336;
+          break;
       }
       this.commentsFilteredByTime = this.comments
-        .filter(c => new Date(c.timestamp).getTime() >= (currentTime.getTime() - periodInSeconds));
+        .filter(c => new Date(c.timestamp).getTime() >=
+          (this.period === Period.FROMNOW ? this.fromNow : (currentTime.getTime() - periodInSeconds)));
     } else {
       this.commentsFilteredByTime = this.comments;
     }

src/app/components/shared/comment-list/comment-list.component.ts

@@ -25,6 +25,7 @@ import { Title } from '@angular/platform-browser';
 import { TitleService } from '../../../services/util/title.service';
 
 export enum Period {
+  FROMNOW = 'from-now',
   ONEHOUR = 'time-1h',
   THREEHOURS = 'time-3h',
   ONEDAY = 'time-1d',
@@ -84,6 +85,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   commentStream: Subscription;
   periodsList = Object.values(Period);
   period: Period = Period.TWOWEEKS;
+  fromNow: number;
 
   constructor(
     private commentService: CommentService,
@@ -208,7 +210,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
         this.setComments(this.comments.filter(x => x.score >= commentThreshold));
       }
     }
-    this.setTimePeriod(this.period);
+    this.setTimePeriod();
   }
 
   getVote(comment: Comment): Vote {
@@ -271,7 +273,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
                     this.comments = this.comments.filter(function (el) {
                       return el.id !== payload.id;
                     });
-                    this.setTimePeriod(this.period);
+                    this.setTimePeriod();
                   }
                   break;
                 case this.tag:
@@ -301,7 +303,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
         }
         break;
     }
-    this.setTimePeriod(this.period);
+    this.setTimePeriod();
     if (this.hideCommentsList) {
       this.searchComments();
     }
@@ -478,13 +480,21 @@ export class CommentListComponent implements OnInit, OnDestroy {
     }, 450);
   }
 
-  setTimePeriod(period: Period) {
-    this.period = period;
+  public setTimePeriod(period?: Period) {
+    if (period) {
+      this.period = period;
+      this.fromNow = null;
+    }
     const currentTime = new Date();
     const hourInSeconds = 3600000;
     let periodInSeconds;
-    if (period !== Period.ALL) {
-      switch (period) {
+    if (this.period !== Period.ALL) {
+      switch (this.period) {
+        case Period.FROMNOW:
+          if (!this.fromNow) {
+            this.fromNow = new Date().getTime();
+          }
+          break;
         case Period.ONEHOUR:
           periodInSeconds = hourInSeconds;
           break;
@@ -502,7 +512,8 @@ export class CommentListComponent implements OnInit, OnDestroy {
           break;
       }
       this.commentsFilteredByTime = this.comments
-        .filter(c => new Date(c.timestamp).getTime() >= (currentTime.getTime() - periodInSeconds));
+        .filter(c => new Date(c.timestamp).getTime() >=
+          (this.period === Period.FROMNOW ? this.fromNow : (currentTime.getTime() - periodInSeconds)));
     } else {
       this.commentsFilteredByTime = this.comments;
     }

src/assets/i18n/creator/de.json

@@ -57,6 +57,7 @@
     "switch-to-comment-list": "Zur öffentlichen Fragenliste",
     "switch-to-moderation-list": "Zum Index",
     "select-time": "Zeitraum auswählen",
+    "select-from-now": "Ab jetzt",
     "select-time-1h": "Letzte Stunde",
     "select-time-3h": "Letzte 2 Stunden",
     "select-time-1d": "Letzte 24 Stunden",

src/assets/i18n/creator/en.json

@@ -58,6 +58,7 @@
     "switch-to-comment-list": "Switch to public question board",
     "switch-to-moderation-list": "Switch to index",
     "select-time": "Select time period",
+    "select-from-now": "From now",
     "select-time-1h": "Last hour",
     "select-time-3h": "Last 2 hours",
     "select-time-1d": "Last 24 hours",

src/assets/i18n/participant/de.json

@@ -58,6 +58,7 @@
     "wrong": "Verneint",
     "really-delete": "Willst du die Frage wirklich löschen?",
     "select-time": "Zeitraum auswählen",
+    "select-from-now": "Ab jetzt",
     "select-time-1h": "Letzte Stunde",
     "select-time-3h": "Letzte 2 Stunden",
     "select-time-1d": "Letzte 24 Stunden",

src/assets/i18n/participant/en.json

@@ -68,6 +68,7 @@
     "wrong": "Marked as wrong",
     "really-delete": "Do you really want to delete this question?",
     "select-time": "Select time period",
+    "select-from-now": "From now",
     "select-time-1h": "Last hour",
     "select-time-3h": "Last 2 hours",
     "select-time-1d": "Last 24 hours",