Add new filters: text only, images, videos

src/app/tweets/tweets-calendar.component.html

@@ -44,7 +44,7 @@
 <div *ngIf="month || search.active"
      class="tweets">
   <ng-container *ngFor="let tweet of (!search.active ? month.tweets : search.tweets)">
-    <section *ngIf="filter.retweet && tweet.retweet === filter.retweet || filter.personal && tweet.retweet !== filter.personal"
+    <section *ngIf="isShowTweet(tweet)"
              [class.tweet]="true"
              [class.retweet]="tweet.retweet"
              [id]="tweet.id">
@@ -94,21 +94,45 @@
   <div>
     Filters:
   </div>
-  <label>
-    <input id="personal"
-           type="checkbox"
-           formControlName="personal"
-           [value]="true">
-    <span>Personal</span>
-  </label>
-  <label>
-    <input id="retweet"
-           type="checkbox"
-           formControlName="retweet"
-           [value]="true">
-    <span>Retweet</span>
-  </label>
-
+  <div>
+    <label>
+      <input id="personal"
+             type="checkbox"
+             formControlName="personal"
+             [value]="true">
+      <span>Personal</span>
+    </label>
+    <label>
+      <input id="retweet"
+             type="checkbox"
+             formControlName="retweet"
+             [value]="true">
+      <span>Retweet</span>
+    </label>
+  </div>
+  <div>
+    <label>
+      <input id="text-only"
+             type="checkbox"
+             formControlName="textOnly"
+             [value]="true">
+      <span>Text Only</span>
+    </label>
+    <label>
+      <input id="with-images"
+             type="checkbox"
+             formControlName="withImages"
+             [value]="true">
+      <span>Images</span>
+    </label>
+    <label>
+      <input id="with-video"
+             type="checkbox"
+             formControlName="withVideo"
+             [value]="true">
+      <span>Videos/GIF</span>
+    </label>
+  </div>
 </form>
 
 <div class="month-calendar"

src/app/tweets/tweets-calendar.component.ts

@@ -14,6 +14,14 @@ import { AppService } from '../app.service';
 import { TweetsService } from './tweets.service';
 import { Tweets, TweetsCalendar, TweetMedia, Tweet } from './tweet';
 
+export interface FilterForm {
+    personal: boolean;
+    retweet: boolean;
+    textOnly: boolean;
+    withImages: boolean;
+    withVideo: boolean;
+}
+
 @Component({
     selector: 'tweets-calendar',
     templateUrl: './tweets-calendar.component.html',
@@ -40,9 +48,12 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
     filterForm: FormGroup;
 
     // filter status
-    filter: { personal: boolean, retweet: boolean } = {
+    filter: FilterForm = {
         personal: true,
-        retweet: true
+        retweet: true,
+        textOnly: true,
+        withImages: true,
+        withVideo: true
     };
 
     // search form control group
@@ -75,17 +86,34 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
             required: false
         }]);
 
-        this.filterForm = this.controlService.createForm([{
-            id: 'personal',
-            type: 'ckeckbox',
-            required: false,
-            value: this.filter.personal
-        }, {
-            id: 'retweet',
-            type: 'ckeckbox',
-            required: false,
-            value: this.filter.retweet
-        }]);
+        this.filterForm = this.controlService.createForm([
+            {
+                id: 'personal',
+                type: 'ckeckbox',
+                required: false,
+                value: this.filter.personal
+            }, {
+                id: 'retweet',
+                type: 'ckeckbox',
+                required: false,
+                value: this.filter.retweet
+            }, {
+                id: 'textOnly',
+                type: 'ckeckbox',
+                required: false,
+                value: this.filter.textOnly
+            }, {
+                id: 'withImages',
+                type: 'ckeckbox',
+                required: false,
+                value: this.filter.withImages
+            }, {
+                id: 'withVideo',
+                type: 'ckeckbox',
+                required: false,
+                value: this.filter.withVideo
+            }
+        ]);
 
         this.listener.push(
             this.tweetsService.onDataLoaded.subscribe((tweets: Tweets) => {
@@ -104,7 +132,7 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
             this.appService.updateData.subscribe(() => {
                 this.ngOnInit();
             }),
-            this.filterForm.valueChanges.subscribe((values: { personal: boolean, retweet: boolean }) => {
+            this.filterForm.valueChanges.subscribe((values: FilterForm) => {
                 this.filter = values;
                 this.totalUpdate();
             })
@@ -210,16 +238,22 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
 
     }
 
+    isShowTweet(tweet: Tweet): boolean {
+        let show = this.filter.retweet && tweet.retweet === this.filter.retweet
+            || this.filter.personal && tweet.retweet !== this.filter.personal;
+        if (show) {
+            show = this.filter.textOnly && !this.testVideo(tweet.entities.media)
+                && !this.testImage(tweet.entities.media)
+                || this.filter.withImages && this.testImage(tweet.entities.media)
+                || this.filter.withVideo && this.testVideo(tweet.entities.media);
+        }
+        return show;
+    }
+
     totalUpdate() {
-        const values = this.filter;
         const list = !this.search.active ? this.month.tweets : this.search.tweets;
         this.total = 0;
-
-        list.forEach(e =>
-            values.retweet && e.retweet === values.retweet || values.personal && e.retweet !== values.personal
-                ? this.total++
-                : null
-        );
+        list.forEach(tweet => this.isShowTweet(tweet) ? this.total++ : null);
     }
 
     monthCalandarGetDay(date: Date) {