From ff5b2497f8275a296eefea9a11edc84106d3cdde Mon Sep 17 00:00:00 2001
From: mfkaptan <kaptanmf@gmail.com>
Date: Sun, 9 Oct 2016 18:47:51 +0200
Subject: [PATCH 1/4] Implement tweet view as slider Tweets will appear in a
 slider, user can swipe left/right for seeing tweets.

---
 .../poke-details/tweets.component.html        | 17 +++++++
 .../poke-details/tweets.component.scss        | 13 ++++++
 .../poke-details/tweets.component.ts          | 46 +++++++++++++++++++
 .../pages/poke-detail/poke-detail.page.html   |  2 +
 .../app/pages/poke-detail/poke-detail.page.ts |  4 +-
 5 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 ionic2/app/components/poke-details/tweets.component.html
 create mode 100644 ionic2/app/components/poke-details/tweets.component.scss
 create mode 100644 ionic2/app/components/poke-details/tweets.component.ts

diff --git a/ionic2/app/components/poke-details/tweets.component.html b/ionic2/app/components/poke-details/tweets.component.html
new file mode 100644
index 0000000..5e79046
--- /dev/null
+++ b/ionic2/app/components/poke-details/tweets.component.html
@@ -0,0 +1,17 @@
+<ion-card>
+  <ion-slides>
+    <ion-slide *ngFor="let tweet of tweetArray">
+      <ion-row>
+        <ion-col width-10><div class="vertical tweet-id">{{tweet.id}}</div></ion-col>
+        <ion-col>
+          <ion-row>
+            <ion-col><h2>{{tweet.text}}</h2></ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col><h4>{{tweet.timestamp}}</h4></ion-col>
+          </ion-row>
+        </ion-col>
+      </ion-row>
+    </ion-slide>
+  </ion-slides>
+</ion-card>
diff --git a/ionic2/app/components/poke-details/tweets.component.scss b/ionic2/app/components/poke-details/tweets.component.scss
new file mode 100644
index 0000000..4753060
--- /dev/null
+++ b/ionic2/app/components/poke-details/tweets.component.scss
@@ -0,0 +1,13 @@
+div.vertical {
+  transform: translateY(70px) translateX(-5px) rotate(-90deg);
+  transform-origin: 0 0;
+  float: left;
+  color: white;
+  width: 80px;
+  text-align: center;
+  padding: 3px 0 3px 0;
+}
+
+.tweet-id {
+  background-color: #FF5733;
+}
diff --git a/ionic2/app/components/poke-details/tweets.component.ts b/ionic2/app/components/poke-details/tweets.component.ts
new file mode 100644
index 0000000..b1293c0
--- /dev/null
+++ b/ionic2/app/components/poke-details/tweets.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { Pokemon } from '../../models/pokemon';
+
+@Component({
+  template: require('./tweets.component.html'),
+  styles: [require('./tweets.component.scss')],
+  selector: 'tweets'
+})
+
+export class TweetsComponent {
+
+  @Input() pokemon: Pokemon;
+
+  tweetArray: Object[];
+
+  ngOnInit() {
+    this.tweetArray = [];
+    for(var i = 0; i < 20; i++) {
+      var tweet = {
+        "id": 12345 + i,
+        "text": "Lorem ipsum dolor sit amet, " + this.pokemon.name + " adipiscing elit",
+        "coordinates": [0, 0],
+        "timestamp": this.timestampToDate((Date.now() / 1000) + i | 0)
+      }
+      this.tweetArray.push(tweet);
+    }
+  }
+
+  // http://stackoverflow.com/questions/847185/convert-a-unix-timestamp-to-time-in-javascript
+  timestampToDate(timestamp)
+  {
+    // Create a new JavaScript Date object based on the timestamp
+    // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+    var date = new Date(timestamp*1000);
+    // Hours part from the timestamp
+    var hours = date.getHours();
+    // Minutes part from the timestamp
+    var minutes = "0" + date.getMinutes();
+    // Seconds part from the timestamp
+    var seconds = "0" + date.getSeconds();
+
+    // Will display time in 10:30:23 format
+    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+    return formattedTime;
+  }
+}
diff --git a/ionic2/app/pages/poke-detail/poke-detail.page.html b/ionic2/app/pages/poke-detail/poke-detail.page.html
index 1455239..9e24455 100644
--- a/ionic2/app/pages/poke-detail/poke-detail.page.html
+++ b/ionic2/app/pages/poke-detail/poke-detail.page.html
@@ -81,5 +81,7 @@ <h1>
 
     <poke-attacks [pokemon]="pokemon"></poke-attacks>
 
+    <tweets [pokemon]="pokemon"></tweets>
+
   </div>
 </ion-content>
diff --git a/ionic2/app/pages/poke-detail/poke-detail.page.ts b/ionic2/app/pages/poke-detail/poke-detail.page.ts
index ce4d705..4b8ba50 100644
--- a/ionic2/app/pages/poke-detail/poke-detail.page.ts
+++ b/ionic2/app/pages/poke-detail/poke-detail.page.ts
@@ -6,6 +6,7 @@ import { PokeEvolutionsComponent } from '../../components/poke-details/poke-evol
 import { PokeAttacksComponent } from '../../components/poke-details/poke-attacks.component';
 import { PokeTypeComponent } from '../../components/poke-details/poke-type.component';
 import { PokeStatsComponent } from '../../components/poke-details/poke-stats.component';
+import { TweetsComponent } from '../../components/poke-details/tweets.component';
 
 @Page({
   template: require('./poke-detail.page.html'),
@@ -15,7 +16,8 @@ import { PokeStatsComponent } from '../../components/poke-details/poke-stats.com
     PokeEvolutionsComponent,
     PokeAttacksComponent,
     PokeTypeComponent,
-    PokeStatsComponent
+    PokeStatsComponent,
+    TweetsComponent
   ]
 })
 

From 9c49bcb76c3282846c55fc2d692c3b5799100e03 Mon Sep 17 00:00:00 2001
From: mfkaptan <kaptanmf@gmail.com>
Date: Sun, 9 Oct 2016 19:06:22 +0200
Subject: [PATCH 2/4] Add loop and autoplay to tweet-view slider issue #68

---
 ionic2/app/components/poke-details/tweets.component.html | 2 +-
 ionic2/app/components/poke-details/tweets.component.ts   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/ionic2/app/components/poke-details/tweets.component.html b/ionic2/app/components/poke-details/tweets.component.html
index 5e79046..0351bf1 100644
--- a/ionic2/app/components/poke-details/tweets.component.html
+++ b/ionic2/app/components/poke-details/tweets.component.html
@@ -1,5 +1,5 @@
 <ion-card>
-  <ion-slides>
+  <ion-slides [options]="slideOptions">
     <ion-slide *ngFor="let tweet of tweetArray">
       <ion-row>
         <ion-col width-10><div class="vertical tweet-id">{{tweet.id}}</div></ion-col>
diff --git a/ionic2/app/components/poke-details/tweets.component.ts b/ionic2/app/components/poke-details/tweets.component.ts
index b1293c0..1c8185f 100644
--- a/ionic2/app/components/poke-details/tweets.component.ts
+++ b/ionic2/app/components/poke-details/tweets.component.ts
@@ -13,6 +13,11 @@ export class TweetsComponent {
 
   tweetArray: Object[];
 
+  slideOptions = {
+    loop: true,
+    autoplay: 3000
+  };
+
   ngOnInit() {
     this.tweetArray = [];
     for(var i = 0; i < 20; i++) {

From 90150db4c0a89734e7cd4d617e9865b4940a6d2f Mon Sep 17 00:00:00 2001
From: mfkaptan <kaptanmf@gmail.com>
Date: Mon, 10 Oct 2016 18:13:58 +0200
Subject: [PATCH 3/4] Add Twitter icon before tweet ids Change tweet slide
 badge color to Twitter's brand color Reduce font size for tweet ids issue #68

---
 ionic2/app/components/poke-details/tweets.component.html | 4 +++-
 ionic2/app/components/poke-details/tweets.component.scss | 8 +++++++-
 ionic2/app/components/poke-details/tweets.component.ts   | 2 ++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/ionic2/app/components/poke-details/tweets.component.html b/ionic2/app/components/poke-details/tweets.component.html
index 0351bf1..561a866 100644
--- a/ionic2/app/components/poke-details/tweets.component.html
+++ b/ionic2/app/components/poke-details/tweets.component.html
@@ -2,7 +2,9 @@
   <ion-slides [options]="slideOptions">
     <ion-slide *ngFor="let tweet of tweetArray">
       <ion-row>
-        <ion-col width-10><div class="vertical tweet-id">{{tweet.id}}</div></ion-col>
+        <ion-col width-10>
+          <div class="vertical tweet-id">{{tweet.id}}</div>
+        </ion-col>
         <ion-col>
           <ion-row>
             <ion-col><h2>{{tweet.text}}</h2></ion-col>
diff --git a/ionic2/app/components/poke-details/tweets.component.scss b/ionic2/app/components/poke-details/tweets.component.scss
index 4753060..a8bab05 100644
--- a/ionic2/app/components/poke-details/tweets.component.scss
+++ b/ionic2/app/components/poke-details/tweets.component.scss
@@ -6,8 +6,14 @@ div.vertical {
   width: 80px;
   text-align: center;
   padding: 3px 0 3px 0;
+  font-size: 1.4rem;
 }
 
 .tweet-id {
-  background-color: #FF5733;
+  background-color: #1da1f2;  /* Twitter brand color */
+}
+
+.tweet-id:before {
+   font-family: FontAwesome;
+   content: "\f099 \00a0 ";  /* Twitter icon and whitespace */
 }
diff --git a/ionic2/app/components/poke-details/tweets.component.ts b/ionic2/app/components/poke-details/tweets.component.ts
index 1c8185f..c43e8bc 100644
--- a/ionic2/app/components/poke-details/tweets.component.ts
+++ b/ionic2/app/components/poke-details/tweets.component.ts
@@ -19,6 +19,7 @@ export class TweetsComponent {
   };
 
   ngOnInit() {
+    /* Mock data */
     this.tweetArray = [];
     for(var i = 0; i < 20; i++) {
       var tweet = {
@@ -31,6 +32,7 @@ export class TweetsComponent {
     }
   }
 
+  // We will get timestamps from the api, here is a function for converting
   // http://stackoverflow.com/questions/847185/convert-a-unix-timestamp-to-time-in-javascript
   timestampToDate(timestamp)
   {

From 95ae8d2118ad7a2db1760354098f8a0ee0b618b1 Mon Sep 17 00:00:00 2001
From: mfkaptan <kaptanmf@gmail.com>
Date: Mon, 10 Oct 2016 18:40:25 +0200
Subject: [PATCH 4/4] Rename tweets component => poke-tweets

---
 .../{tweets.component.html => poke-tweets.component.html} | 0
 .../{tweets.component.scss => poke-tweets.component.scss} | 0
 .../{tweets.component.ts => poke-tweets.component.ts}     | 8 ++++----
 ionic2/app/pages/poke-detail/poke-detail.page.html        | 2 +-
 ionic2/app/pages/poke-detail/poke-detail.page.ts          | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)
 rename ionic2/app/components/poke-details/{tweets.component.html => poke-tweets.component.html} (100%)
 rename ionic2/app/components/poke-details/{tweets.component.scss => poke-tweets.component.scss} (100%)
 rename ionic2/app/components/poke-details/{tweets.component.ts => poke-tweets.component.ts} (89%)

diff --git a/ionic2/app/components/poke-details/tweets.component.html b/ionic2/app/components/poke-details/poke-tweets.component.html
similarity index 100%
rename from ionic2/app/components/poke-details/tweets.component.html
rename to ionic2/app/components/poke-details/poke-tweets.component.html
diff --git a/ionic2/app/components/poke-details/tweets.component.scss b/ionic2/app/components/poke-details/poke-tweets.component.scss
similarity index 100%
rename from ionic2/app/components/poke-details/tweets.component.scss
rename to ionic2/app/components/poke-details/poke-tweets.component.scss
diff --git a/ionic2/app/components/poke-details/tweets.component.ts b/ionic2/app/components/poke-details/poke-tweets.component.ts
similarity index 89%
rename from ionic2/app/components/poke-details/tweets.component.ts
rename to ionic2/app/components/poke-details/poke-tweets.component.ts
index c43e8bc..c70ed78 100644
--- a/ionic2/app/components/poke-details/tweets.component.ts
+++ b/ionic2/app/components/poke-details/poke-tweets.component.ts
@@ -2,12 +2,12 @@ import { Component, Input } from '@angular/core';
 import { Pokemon } from '../../models/pokemon';
 
 @Component({
-  template: require('./tweets.component.html'),
-  styles: [require('./tweets.component.scss')],
-  selector: 'tweets'
+  template: require('./poke-tweets.component.html'),
+  styles: [require('./poke-tweets.component.scss')],
+  selector: 'poke-tweets'
 })
 
-export class TweetsComponent {
+export class PokeTweetsComponent {
 
   @Input() pokemon: Pokemon;
 
diff --git a/ionic2/app/pages/poke-detail/poke-detail.page.html b/ionic2/app/pages/poke-detail/poke-detail.page.html
index f0819d9..3f61c11 100644
--- a/ionic2/app/pages/poke-detail/poke-detail.page.html
+++ b/ionic2/app/pages/poke-detail/poke-detail.page.html
@@ -90,7 +90,7 @@ <h1>
 
     <poke-attacks [pokemon]="pokemon"></poke-attacks>
 
-    <tweets [pokemon]="pokemon"></tweets>
+    <poke-tweets [pokemon]="pokemon"></poke-tweets>
 
   </div>
 </ion-content>
diff --git a/ionic2/app/pages/poke-detail/poke-detail.page.ts b/ionic2/app/pages/poke-detail/poke-detail.page.ts
index bd77e78..b9475f2 100644
--- a/ionic2/app/pages/poke-detail/poke-detail.page.ts
+++ b/ionic2/app/pages/poke-detail/poke-detail.page.ts
@@ -7,7 +7,7 @@ import { PokeAttacksComponent } from '../../components/poke-details/poke-attacks
 import { PokeTypeComponent } from '../../components/poke-details/poke-type.component';
 import { PokeStatsComponent } from '../../components/poke-details/poke-stats.component';
 import { PokeRarityBadgeComponent } from '../../components/poke-rarity-badge/poke-rarity-badge.component';
-import { TweetsComponent } from '../../components/poke-details/tweets.component';
+import { PokeTweetsComponent } from '../../components/poke-details/poke-tweets.component';
 
 @Page({
   template: require('./poke-detail.page.html'),
@@ -18,8 +18,8 @@ import { TweetsComponent } from '../../components/poke-details/tweets.component'
     PokeAttacksComponent,
     PokeTypeComponent,
     PokeStatsComponent,
-    PokeRarityBadgeComponent
-    TweetsComponent
+    PokeRarityBadgeComponent,
+    PokeTweetsComponent
   ]
 })