added conversation view

This commit is contained in:
Morgan McMillian 2017-06-11 07:22:49 -07:00
parent 204b8e490d
commit 13ef6c588f
6 changed files with 133 additions and 7 deletions

View file

@ -7,7 +7,7 @@ import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list'; import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login'; import { LoginPage } from '../pages/login/login';
import { StreamPage, NewPostModal } from '../pages/stream/stream'; import { StreamPage, NewPostModal } from '../pages/stream/stream';
import { PostDetailsPage } from '../pages/post-details/post-details'; import { ThreadPage } from '../pages/thread/thread';
import { StatusBar } from '@ionic-native/status-bar'; import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen'; import { SplashScreen } from '@ionic-native/splash-screen';
@ -21,7 +21,7 @@ import { TimeagoPipe } from '../pipes/timeago/timeago';
ListPage, ListPage,
LoginPage, LoginPage,
StreamPage, StreamPage,
PostDetailsPage, ThreadPage,
TimeagoPipe, TimeagoPipe,
NewPostModal NewPostModal
], ],
@ -37,7 +37,7 @@ import { TimeagoPipe } from '../pipes/timeago/timeago';
ListPage, ListPage,
LoginPage, LoginPage,
StreamPage, StreamPage,
PostDetailsPage, ThreadPage,
NewPostModal NewPostModal
], ],
providers: [ providers: [

View file

@ -69,7 +69,7 @@
</button> </button>
</ion-col> </ion-col>
<ion-col> <ion-col>
<button ion-button icon-left clear small block> <button ion-button icon-left clear small block (click)="fetchThread(post.thread_id)">
<ion-icon name="chatboxes"></ion-icon> <ion-icon name="chatboxes"></ion-icon>
<div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div> <div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
</button> </button>

View file

@ -1,6 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ViewController, NavController, NavParams, ModalController } from 'ionic-angular'; import { ViewController, NavController, NavParams, ModalController } from 'ionic-angular';
import { PostDetailsPage } from '../post-details/post-details'; import { ThreadPage } from '../thread/thread';
import * as pnut from 'pnut-butter'; import * as pnut from 'pnut-butter';
@ -79,8 +79,12 @@ export class StreamPage {
}); });
} }
showPostDetails(postData) { fetchThread(threadid) {
this.navCtrl.push(PostDetailsPage, {post: postData}); pnut.thread(threadid).then(res => {
this.navCtrl.push(ThreadPage, {posts: res.data});
}).catch(err => {
console.log(err);
});
} }
bookmark(postid, bookmarked) { bookmark(postid, bookmarked) {

View file

@ -0,0 +1,82 @@
<!--
Generated template for the ThreadPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Conversation</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-card *ngFor="let post of posts">
<ion-item>
<ion-avatar item-start>
<img src="{{ post.user.content.avatar_image.link }}">
</ion-avatar>
<h2>{{ post.user.name }}</h2>
<p>@{{ post.user.username }}</p>
<ion-note item-end right>
{{ post.created_at | timeago }}<br/>
{{ post.source.name }}
</ion-note>
</ion-item>
<ion-card-content>
<p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
</ion-card-content>
<div *ngIf="post.raw">
<div *ngFor="let r of post.raw">
<div *ngIf="r.type == 'io.pnut.core.oembed'">
<img src="{{ r.value.url }}">
</div>
</div>
</div>
<ion-row>
<ion-col>
<button ion-button icon-left clear small block (click)="showReplyPost(post)">
<ion-icon name="text"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small block (click)="showQuotedPost(post)">
<ion-icon name="quote"></ion-icon>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small block (click)="bookmark(post.id, post.you_bookmarked)">
<ion-icon name="star"></ion-icon>
<div *ngIf="post.counts.bookmarks > 0">{{ post.counts.bookmarks }}</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small block (click)="repost(post.id, post.you_reposted)">
<ion-icon name="repeat"></ion-icon>
<div *ngIf="post.counts.reposts > 0">{{ post.counts.reposts }}</div>
</button>
</ion-col>
<!-- <ion-col>
<button ion-button icon-left clear small block>
<ion-icon name="chatboxes"></ion-icon>
<div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
</button>
</ion-col> -->
<!-- <ion-col>
<button ion-button icon-left clear small block>
<ion-icon name="more"></ion-icon>
</button>
</ion-col> -->
</ion-row>
</ion-card>
</ion-list>
</ion-content>

View file

@ -0,0 +1,3 @@
page-thread {
}

View file

@ -0,0 +1,37 @@
import { Component } from '@angular/core';
import { NavController, NavParams, ModalController } from 'ionic-angular';
import { NewPostModal } from '../stream/stream';
// import * as pnut from 'pnut-butter';
/**
* Generated class for the ThreadPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-thread',
templateUrl: 'thread.html',
})
export class ThreadPage {
title: string;
posts: Array<Object> = [];
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
this.posts = this.navParams.data.posts;
}
showReplyPost(postData) {
let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'reply', post: postData});
newPostModal.present();
}
showQuotedPost(postData) {
console.log(postData);
let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'quote', post: postData});
newPostModal.present();
}
}