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

Add calendar on right panel

Add BakuJs Lib
parent dc80ccff
......@@ -30,7 +30,9 @@
"styles": [
"src/styles.scss"
],
"scripts": []
"scripts": [
"node_modules/bakujs/baku.min.js"
]
},
"configurations": {
"production": {
......
This diff is collapsed.
......@@ -47,4 +47,4 @@
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}
\ No newline at end of file
}
......@@ -18,6 +18,7 @@ import { MouthPipe } from './pipes/mouth';
import { SafePipe } from './pipes/safe';
import { NumFormatPipe } from './pipes/numformat';
import { FileSizePipe } from './pipes/filesize';
import { ReplacePipe } from './pipes/replace';
const appRoutes: Routes = [
......@@ -47,7 +48,8 @@ const appRoutes: Routes = [
MouthPipe,
SafePipe,
NumFormatPipe,
FileSizePipe
FileSizePipe,
ReplacePipe
],
imports: [
BrowserModule,
......
......@@ -16,7 +16,9 @@ export const pattern = {
win: /^win[^\s]* = /,
RTTest: /^RT @([^:]+):\s*/,
RTReplace: /^RT @[^:]+:\s*/,
finalURL: /https:\/\/t.co\/[^\s]*/
finalURL: /https:\/\/t.co\/[^\s]*/,
mediaImage: /.*\/media\/.*/,
mediaVideo: /.*\/(tweet_video_thumb|ext_tw_video_thumb)\/.*/
};
export class Utils {
......
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({ name: 'replace' })
export class ReplacePipe implements PipeTransform {
transform(data: string, searchValue: string, erplaceValue: string): string {
if (typeof data !== 'string') {
return data;
}
return data.replace(searchValue, erplaceValue);
}
}
......@@ -85,9 +85,28 @@
</div>
</form>
<div class="month-calendar">
<div class="month-calendar"
*ngIf="calendar && !search.active">
<div>Go to:</div>
<div>
<!-- TODO : caldendar -->
</div>
<table>
<tr>
<th></th>
<th title="Monday">M</th>
<th title="Tuesday">T</th>
<th title="Wednesday">W</th>
<th title="Thursday">T</th>
<th title="Friday">F</th>
<th title="Saturday">S</th>
<th title="Sunday">S</th>
</tr>
<tr *ngFor="let week of (calendar | ngForObject)">
<th>{{week.key | replace:'w':''}}</th>
<td *ngFor="let day of week.value"
[class.current]="day.current"
[class.with-tweets]="day.tweets"
[title]="day.title">
{{day.date}}
</td>
</tr>
</table>
</div>
\ No newline at end of file
......@@ -178,5 +178,26 @@
background-color: var(--panel-bg-color);
border: 1px solid var(--panel-bd-color);
margin: 5px;
display: none;
table {
width: 100%;
text-align: center;
}
th {
width: calc(100% / 8);
}
th:first-child {
text-align: right;
}
td:not(.current) {
color: #AAA;
}
td.with-tweets {
background: #AAA;
cursor: pointer;
}
}
\ No newline at end of file
......@@ -11,6 +11,7 @@ import { UserService, TypeData } from '../user/user.service';
import { Tweets, TweetsCalendar, TweetMedia, Tweet } from './tweet';
import { TweetsService } from './tweets.service';
import { AppService } from '../app.service';
import { pattern } from '../common/utils';
@Component({
selector: 'tweets-calendar',
......@@ -24,7 +25,7 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
listener: Subscription[] = [];
calandar: { [week: string]: string[] } = {};
calendar: { [week: number]: any[] };
search: { active: boolean, label: string, total: number, tweets: Tweet[] } = {
active: false,
label: '',
......@@ -83,10 +84,58 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
this.month.selected = true;
// construct mount calandar
// TODO
this.mountCalandar(month);
// lightbox album
this.lightboxAlbum(month);
}
mountCalandar(month: TweetsCalendar) {
this.calendar = {};
const date = new Date(`${month.year}-${month.month + 1 < 10 ? '0' : ''}${month.month + 1}-01`);
date.setDate(date.getDate() - this.mountCalandarGetDay(date) + 1);
console.log('month.month', month.month, (month.month + 1) % 12);
while (
(date.getMonth() !== (month.month + 1) % 12) ||
(date.getMonth() === (month.month + 1) % 12 && this.mountCalandarGetDay(date) - 1)
) {
let week = 'w' + date['_getWeek']();
if (!this.calendar[week]) {
this.calendar[week] = [];
} else if (this.calendar[week].length === 7) {
// fix calcul error with date._getWeek()
week = 'w' + (date['_getWeek']() + 1);
this.calendar[week] = [];
}
let tweets = 0;
const current = date.getMonth() === month.month;
const dateYear = date['_getDayOfYear']();
if (current) {
const list = this.month.tweets.filter(t => t.created_date['_getDayOfYear']() === dateYear);
tweets = list ? list.length : 0;
}
this.calendar[week].push({
current: current,
date: `${date.getDate()}`,
tweets: tweets > 0,
title: `${tweets} tweet${tweets > 1 ? 's' : ''}`
});
date.setDate(date.getDate() + 1);
}
console.log(this.calendar);
}
mountCalandarGetDay(date: Date) {
return date.getDay() === 0 ? 7 : date.getDay();
}
lightboxAlbum(month: TweetsCalendar) {
this.album = [];
for (const tweet of month.tweets) {
if (this.testImage(tweet.entities.media)) {
......@@ -102,6 +151,7 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
}
}
/**
* open lightbox
* @param media TweetMedia
......@@ -126,11 +176,11 @@ export class TweetsCalendarComponent implements OnInit, OnDestroy {
}
testImage(medias: TweetMedia[]): boolean {
return medias && medias[0].media_url_https.match(/.*\/media\/.*/) !== null;
return medias && medias[0].media_url_https.match(pattern.mediaImage) !== null;
}
testVideo(medias: TweetMedia[]): boolean {
return medias && medias[0].media_url_https.match(/.*\/(tweet_video_thumb|ext_tw_video_thumb)\/.*/) !== null;
return medias && medias[0].media_url_https.match(pattern.mediaVideo) !== null;
}
onSubmit() {
......
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