Add calendar on right panel

Add BakuJs Lib

angular.json

@@ -30,7 +30,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/bakujs/baku.min.js"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -47,4 +47,4 @@
     "tslint": "~5.11.0",
     "typescript": "~3.1.1"
   }
-}
\ No newline at end of file
+}

src/app/app.module.ts

@@ -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,

src/app/common/utils.ts

@@ -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 {

src/app/pipes/replace.ts

+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);
+    }
+
+}

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

@@ -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

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

@@ -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

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

@@ -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() {