Commit a87d2b0f authored by Zéfling's avatar Zéfling 🎨
Browse files

Add new filters: text only, images, videos

parent 533b72bc
......@@ -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"
......
......@@ -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) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment