simple post details page

src/app/app.component.ts

@@ -42,6 +42,8 @@ export class MyApp {
       }
     }).catch(err => {
       console.log('ERROR: ' + err);
+      pnut.token = 'DOLORSITAmET6E6uaqT70D8R8o-yAG2eqa48wBihEqYhWKN3WQzlIzBd4V18vI-OCjKWCwGUQDPlNO2sS9DgkyYMM0SbJAirYH';
+      this.nav.setRoot(StreamPage, {stream: 'global'});
     });
 
     this.platform.ready().then(() => {

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { HomePage } from '../pages/home/home';
 import { ListPage } from '../pages/list/list';
 import { LoginPage } from '../pages/login/login';
 import { StreamPage } from '../pages/stream/stream';
+import { PostDetailsPage } from '../pages/post-details/post-details';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
@@ -18,7 +19,8 @@ import { IonicStorageModule } from '@ionic/storage';
     HomePage,
     ListPage,
     LoginPage,
-    StreamPage
+    StreamPage,
+    PostDetailsPage
   ],
   imports: [
     BrowserModule,
@@ -31,7 +33,8 @@ import { IonicStorageModule } from '@ionic/storage';
     HomePage,
     ListPage,
     LoginPage,
-    StreamPage
+    StreamPage,
+    PostDetailsPage
   ],
   providers: [
     StatusBar,

src/pages/post-details/post-details.html

@@ -0,0 +1,26 @@
+<!--
+  Generated template for the PostDetailsPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>postDetails</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+  <!-- <img src="assets/img/headers/{{parkInfo.image}}"> -->
+  <!-- <h1 padding>{{parkInfo.name}}</h1> -->
+  <ion-card>
+    <ion-card-header>Post {{ postData.id }}</ion-card-header>
+    <ion-card-content>
+      <h1>{{ postData.user.username }}</h1>
+      <p>{{ postData.content.text }}</p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

src/pages/post-details/post-details.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { PostDetailsPage } from './post-details';
+
+@NgModule({
+  declarations: [
+    PostDetailsPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(PostDetailsPage),
+  ],
+  exports: [
+    PostDetailsPage
+  ]
+})
+export class PostDetailsPageModule {}

src/pages/post-details/post-details.scss

@@ -0,0 +1,3 @@
+page-post-details {
+
+}

src/pages/post-details/post-details.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the PostDetailsPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage()
+@Component({
+  selector: 'page-post-details',
+  templateUrl: 'post-details.html',
+})
+export class PostDetailsPage {
+
+  postData: Object;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+    this.postData = navParams.data.post;
+  }
+
+}

src/pages/stream/stream.html

@@ -19,12 +19,21 @@
 <ion-content>
 
   <ion-list>
-    <ion-item *ngFor="let post of posts" (click)="goParkDetails(park)" text-wrap>
+    <ion-item *ngFor="let post of posts" (click)="showPostDetails(post)" text-wrap>
       <ion-avatar item-start>
         <img src="{{ post.user.content.avatar_image.link }}">
       </ion-avatar>
-      <h2>{{ post.user.username }}</h2>
+      <h1>{{ post.user.username }}</h1>
       <p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
+      <div *ngIf="post.raw">
+        <div *ngFor="let r of post.raw">
+          <div *ngIf="r.type == 'io.pnut.core.oembed'">
+            <ion-thumbnail>
+              <img src="{{ r.value.url }}">
+            </ion-thumbnail>
+          </div>
+        </div>
+      </div>
     </ion-item>
   </ion-list>
 

src/pages/stream/stream.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { PostDetailsPage } from '../post-details/post-details';
 
 import * as pnut from 'pnut-butter';
 
@@ -35,7 +36,7 @@ export class StreamPage {
 
   fetchGlobal() {
     console.log('-- fetching global stream --');
-    pnut.global().then(res => {
+    pnut.global({include_raw: 1, count: 50}).then(res => {
       // console.log(res);
       this.posts = res.data;
       // console.log(this.posts);
@@ -53,4 +54,8 @@ export class StreamPage {
     });
   }
 
+  showPostDetails(postData) {
+   this.navCtrl.push(PostDetailsPage, {post: postData});
+  }
+
 }