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

Add filter for personal tweet and retweet

parent 4a8d5636
......@@ -5,7 +5,7 @@ import { FormControl, FormGroup, Validators, ValidatorFn, AbstractControlOptions
export interface Validation {
id: string;
value?: any;
type?: 'label';
type?: 'label' | 'ckeckbox';
required?: boolean;
}
......@@ -35,6 +35,8 @@ export class ControlService {
}
switch (validation.type) {
case 'ckeckbox':
break;
case 'label':
default:
control.push(Validators.pattern('[^\t\n\r]*'));
......
......@@ -107,6 +107,7 @@ export interface Tweet {
user_screen_name: string;
user_name: string;
html_text: string;
retweet: boolean;
}
export class TweetsCalendar {
......
......@@ -29,49 +29,51 @@
<ng-container *ngIf="month && !search.active">
<div class="tweets-month">
<span>
{{month.month | mouth}} {{month.year}} - {{month.total | numFormat}} tweet{{month.total > 0 ? 's' : ''}}
{{month.month | mouth}} {{month.year}} - {{total | numFormat}} tweet{{total > 0 ? 's' : ''}}
</span>
</div>
</ng-container>
<ng-container *ngIf="search.active">
<div class="tweets-search">
<span>
Search: {{search.label}} - {{search.total | numFormat}} tweet{{search.total > 0 ? 's' : ''}}
Search: {{search.label}} - {{total | numFormat}} tweet{{v > 0 ? 's' : ''}}
</span>
</div>
</ng-container>
<div *ngIf="month || search.active"
class="tweets">
<section *ngFor="let tweet of (!search.active ? month.tweets : search.tweets)"
[class.tweet]="true"
[class.retweet]="false"
[id]="tweet.id">
<div class="tweet-infos">
<a href="https://twitter.com/{{tweet.user_screen_name}}">{{tweet.user_name}}</a>
<time class="tweet-date">{{tweet.created_date | date:'yyyy-MM-dd HH:mm:ss'}}</time>
</div>
<div class="tweet-text"
[innerHTML]="tweet.html_text | safe"></div>
<div class="tweet-media"
*ngIf="testImage(tweet.entities.media)">
<img *ngFor="let media of tweet.entities.media"
[src]="imageUrl(tweet, media)"
[alt]="media.id"
(click)="openImage(media)">
</div>
<div class="tweet-media"
*ngIf="testVideo(tweet.entities.media)">
<video controls
*ngFor="let media of tweet.entities.media"
[src]="videoUrl(tweet, media)"></video>
</div>
<div class="tweet-actions">
<span *ngIf="tweet.retweeted">retweeted: {{tweet.retweet_count}}</span>
<span *ngIf="tweet.favorited">favorited: {{tweet.favorite_count}}</span>
<a href="https://twitter.com/{{tweet.user_screen_name}}/status/{{tweet.id}}">See on Twitter</a>
</div>
</section>
<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"
[class.tweet]="true"
[class.retweet]="tweet.retweet"
[id]="tweet.id">
<div class="tweet-infos">
<a href="https://twitter.com/{{tweet.user_screen_name}}">{{tweet.user_name}}</a>
<time class="tweet-date">{{tweet.created_date | date:'yyyy-MM-dd HH:mm:ss'}}</time>
</div>
<div class="tweet-text"
[innerHTML]="tweet.html_text | safe"></div>
<div class="tweet-media"
*ngIf="testImage(tweet.entities.media)">
<img *ngFor="let media of tweet.entities.media"
[src]="imageUrl(tweet, media)"
[alt]="media.id"
(click)="openImage(media)">
</div>
<div class="tweet-media"
*ngIf="testVideo(tweet.entities.media)">
<video controls
*ngFor="let media of tweet.entities.media"
[src]="videoUrl(tweet, media)"></video>
</div>
<div class="tweet-actions">
<span *ngIf="tweet.retweeted">retweeted: {{tweet.retweet_count}}</span>
<span *ngIf="tweet.favorited">favorited: {{tweet.favorite_count}}</span>
<a href="https://twitter.com/{{tweet.user_screen_name}}/status/{{tweet.id}}">See on Twitter</a>
</div>
</section>
</ng-container>
</div>
<form class="search"
......@@ -86,6 +88,28 @@
</div>
</form>
<form class="filter"
[formGroup]="filterForm">
<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>
</form>
<div class="month-calendar"
*ngIf="calendar && !search.active">
<div>Go to:</div>
......
......@@ -5,6 +5,7 @@
display:grid;
grid-template: [header-left] "a c ." 30px [header-right]
[main-left] "b d e" auto [main-right]
[main-left] "b d g" auto [main-right]
[main-left] "b d f" 1fr [main-right]
[footer-left] "b d f" 30px [footer-right] / 250px 1fr 250px;
max-width: 100%;
......@@ -202,4 +203,14 @@
background: #AAA;
cursor: pointer;
}
}
.filter {
grid-area: g;
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
margin: 5px;
}
\ No newline at end of file
......@@ -30,17 +30,28 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
// all tweets data for the current mount selected
month: TweetsCalendar;
// total tweet in the list
total: number;
// current mount selected calendar
calendar: { [week: number]: any[] };
// search form control group
filterForm: FormGroup;
// filter status
filter: { personal: boolean, retweet: boolean } = {
personal: true,
retweet: true
};
// search form control group
tweetsForm: FormGroup;
// search results
search: { active: boolean, label: string, total: number, tweets: Tweet[] } = {
search: { active: boolean, label: string, tweets: Tweet[] } = {
active: false,
label: '',
total: 0,
tweets: []
};
......@@ -57,6 +68,25 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
private controlService: ControlService,
private activatedRoute: ActivatedRoute
) {
this.tweetsForm = this.controlService.createForm([{
id: 'search',
type: 'label',
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.listener.push(
this.tweetsService.onDataLoaded.subscribe((tweets: Tweets) => {
this.tweets = tweets;
......@@ -74,21 +104,20 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
this.appService.updateData.subscribe(() => {
this.ngOnInit();
}),
this.activatedRoute.params.subscribe((params: Params) => {
if (params['date']) {
const paramDate = params['date'].match(pattern.paramDate);
if (paramDate && this.updateCurrentMount(paramDate[1], paramDate[2] - 1)) {
this.select();
}
}
this.filterForm.valueChanges.subscribe((values: { personal: boolean, retweet: boolean }) => {
this.filter = values;
this.totalUpdate();
})
);
this.tweetsForm = this.controlService.createForm([{
id: 'search',
type: 'label',
required: false
}]);
this.activatedRoute.params.subscribe((params: Params) => {
if (params['date']) {
const paramDate = params['date'].match(pattern.paramDate);
if (paramDate && this.updateCurrentMount(paramDate[1], paramDate[2] - 1)) {
this.select();
}
}
});
}
ngOnInit() {
......@@ -127,6 +156,7 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
this.unselectCurrentMouth();
this.month = month;
this.month.selected = true;
this.totalUpdate();
// construct mount calandar
this.monthCalandar(month);
......@@ -180,6 +210,18 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
}
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
);
}
monthCalandarGetDay(date: Date) {
return date.getDay() === 0 ? 7 : date.getDay();
}
......@@ -240,9 +282,9 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
this.search = {
active: true,
label: value,
tweets: tweets,
total: tweets.length
tweets: tweets
};
this.totalUpdate();
} else {
this.search.active = false;
}
......
......@@ -142,12 +142,16 @@ export class TweetsService {
// retweet
const retweetUser = tweet.html_text.match(pattern.RTTest);
tweet.retweet = false;
if (retweetUser && tweet.entities.user_mentions) {
const user = tweet.entities.user_mentions.find(u => u.screen_name === retweetUser[1]);
if (user) {
tweet.user_name = user.name;
tweet.user_screen_name = user.screen_name;
tweet.html_text = tweet.html_text.replace(pattern.RTReplace, '');
tweet.retweet = pattern.RTReplace.test(tweet.html_text);
if (tweet.retweet) {
tweet.html_text = tweet.html_text.replace(pattern.RTReplace, '');
}
}
}
......
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