Split out new-post modal and post-menu template and code

This commit is contained in:
Morgan McMillian 2018-10-07 07:36:07 -07:00
parent 347ba44bd1
commit f34216213f
6 changed files with 306 additions and 315 deletions

View file

@ -4,7 +4,9 @@ import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { StreamPage, NewPostModal, PostMenu } from '../pages/stream/stream';
import { StreamPage } from '../pages/stream/stream';
import { PostMenu } from '../pages/stream/post-menu';
import { NewPostModal } from '../pages/stream/new-post';
import { ThreadPage } from '../pages/thread/thread';
import { SettingsPage } from '../pages/settings/settings';

View file

@ -1,20 +1,48 @@
<ion-header>
<ion-toolbar>
<ion-title>New Post</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Cancel</span>
<ion-icon name="md-close" showWhen="android,windows"></ion-icon>
<span ion-text color="primary">Cancel</span>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button>
<span ion-text color="primary" showWhen="ios">Post</span>
<ion-icon name="send" showWhen="android,windows"></ion-icon>
</ion-buttons>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p>Blarp</p>
<ion-card>
<ion-card-content>
<ion-item>
<ion-textarea [(ngModel)]="ptext" autocomplete="true" spellcheck="true" clearInput="true" rows="8"></ion-textarea>
</ion-item>
</ion-card-content>
<ion-row justify-content-end>
<ion-col offset-0>
<button ion-button (click)="attachImage()">
<ion-icon name="attach"></ion-icon>
</button>
</ion-col>
<ion-col col-2><div text-center>{{textCount()}}</div></ion-col>
<ion-col col-2>
<button ion-button (click)="send()">
<ion-icon name="send"></ion-icon>
</button>
</ion-col>
</ion-row>
<progress id='p' *ngIf="showProgress"></progress>
<ion-list>
<ion-item *ngFor="let f of files">
<ion-thumbnail item-start>
<img src="{{ f.link }}">
</ion-thumbnail>
<p>{{ f.name }}</p>
<button ion-button color="dark" clear item-end (click)="unattach(f.id)">
<ion-icon name="remove-circle"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-card>
</ion-content>

View file

@ -0,0 +1,193 @@
import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ViewController, NavController, NavParams, ModalController, Content, ToastController, PopoverController, Events } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { FileChooser } from '@ionic-native/file-chooser';
import { FilePath } from '@ionic-native/file-path';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
@Component({
selector: 'modal-newpost',
templateUrl: 'new-post.html',
})
export class NewPostModal {
title: string;
replyid: string;
ptext: string = "";
showProgress: boolean = false;
files: Array<Object> = [];
fname: string = "";
fpath: string = "";
options: Object = {};
myUsername: string;
authToken: string;
longpost: Object = {};
raw: {type: string, value: Object}[] = [];
constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
private fileChooser: FileChooser, private storage: Storage, public events: Events, private filePath: FilePath,
private transfer: FileTransfer) {
console.log(JSON.stringify(this.navParams));
this.myUsername = navParams.data.me;
if (navParams.data.type === 'reply') {
this.replyid = navParams.data.post.id;
this.options = {replyTo: this.replyid};
if (navParams.data.post.user.username !== this.myUsername) {
this.ptext = "@" + navParams.data.post.user.username + " ";
} else {
this.ptext = ""
}
if (navParams.data.post.content.entities) {
if (navParams.data.post.content.entities.mentions.length > 0) {
this.ptext = this.ptext + this.parseMentions(navParams.data.post.content.entities.mentions);
}
}
this.title = "Reply to " + navParams.data.post.user.username
} else if (navParams.data.type === 'quote') {
this.ptext = " >> @" + navParams.data.post.user.username + ": " + navParams.data.post.content.text;
this.title = "New Post";
} else {
this.title = "New Post";
}
this.storage.get('token').then((val) => {
this.authToken = val;
});
}
dismiss() {
this.viewCtrl.dismiss();
}
send() {
if (this.ptext.length > 254) {
this.longpost = {
'title': '',
'body': this.ptext,
'tstamp': new Date().valueOf()
}
this.ptext = this.ptext.substr(0, 40) + "... - http://chimpnut.nl/u/";
this.ptext = this.ptext + this.navParams.data.me + "/lp/{object_id} - #longpost";
this.raw.push({
type: "nl.chimpnut.blog.post",
value: this.longpost
});
}
this.options['raw'] = this.raw;
pnut.createPost(this.ptext, this.options).then(res => {
console.log('-success-');
console.log(JSON.stringify(res));
this.presentToast("Status posted.");
this.events.publish('stream:reload', {});
}).catch(err => {
console.log('-error posting-');
console.log(JSON.stringify(err));
});
this.viewCtrl.dismiss();
}
presentToast(text) {
let toast = this.toastCtrl.create({
position: 'top',
message: text,
duration: 2000
});
toast.present();
}
parseMentions(mentions) {
let mtext = ""
for(var i = 0; i < mentions.length; i++) {
let mu = mentions[i].text;
if (mu !== this.myUsername) {
mtext += "@" + mu + " ";
}
}
if (mtext.length > 0) {
if (this.navParams.data.cc) {
mtext = "\n/" + mtext;
}
return mtext;
} else {
return "";
}
}
textCount() {
let counttext = ""
let count = 254 - this.ptext.length
if (count < 1) {
counttext = "longpost"
} else {
counttext = String(count)
}
return counttext
}
attachImage() {
// console.log('file chooser');
const fileTransfer: FileTransferObject = this.transfer.create();
this.fileChooser.open().then(uri => {
console.log('File URI: ' + uri);
this.filePath.resolveNativePath(uri).then(filePath => {
this.fpath = filePath;
this.fname = filePath.split('/').pop();
let options: FileUploadOptions = {
fileKey: 'content',
fileName: this.fname,
params: {
name: this.fname,
type: 'com.monkeystew.goober_m',
is_public: true
},
headers: {'Authorization': 'Bearer ' + this.authToken}
}
this.showProgress = true;
fileTransfer.upload(this.fpath, 'https://api.pnut.io/v0/files', options).then((response) => {
let rdata = JSON.parse(response.response);
let oembed = {
'+io.pnut.core.file': {
file_id: rdata.data.id,
file_token: rdata.data.file_token,
format: 'oembed'
}
}
// console.log(JSON.stringify(oembed));
this.raw.push({
type: "io.pnut.core.oembed",
value: oembed
});
this.files.push({
name: this.fname,
link: rdata.data.link,
id: this.raw.length - 1
});
this.showProgress = false;
}).catch((err) => {
this.showProgress = false;
let edata = JSON.parse(err.body);
this.presentToast(edata.meta.error_message);
});
}).catch(err => {
console.log('-error getting filepath-');
console.log(err);
});
}).catch(err => {
console.log(err);
});
}
unattach(id) {
console.log('removing item ' + id);
this.raw.splice(id, 1);
this.files.splice(id, 1);
}
}

View file

@ -0,0 +1,69 @@
import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ViewController, NavController, NavParams, ModalController, Content, ToastController, PopoverController } from 'ionic-angular';
import { Events } from 'ionic-angular';
import * as pnut from 'pnut-butter';
@Component({
template: `
<ion-list>
<button ion-item (click)="browse()">Open in Browser</button>
<button ion-item (click)="share()">Share</button>
<button ion-item *ngIf="showDelBtn" (click)="delete()">Delete</button>
</ion-list>
`
})
export class PostMenu {
showDelBtn: boolean = false;
constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
public events: Events) {
if (navParams.data.me == navParams.data.post.user.username) {
this.showDelBtn = true;
} else {
this.showDelBtn = false;
}
}
browse() {
window.open('https://posts.pnut.io/' + this.navParams.data.post.id, '_system');
this.close();
}
share() {
(<any>window).shareContentPlugin.share(this.navParams.data.post.content.text, function(e) {
console.log('sharing post:');
console.log(JSON.stringify(e));
}, function(e) {
console.log('sharing failed:');
console.log(JSON.stringify(e));
});
this.close();
}
delete() {
pnut.deletePost(this.navParams.data.post.id).then(res => {
console.log(res);
this.presentToast('Post Deleted');
this.events.publish('stream:reload', {});
}).catch( err => {
console.log('-error-');
console.log(err);
});
this.close()
}
presentToast(text) {
let toast = this.toastCtrl.create({
position: 'top',
message: text,
duration: 2000
});
toast.present();
}
close() {
this.viewCtrl.dismiss();
}
}

View file

@ -2,11 +2,10 @@ import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ViewController, NavController, NavParams, ModalController, Content, ToastController, PopoverController } from 'ionic-angular';
import { ThreadPage } from '../thread/thread';
import { Storage } from '@ionic/storage';
import { FileChooser } from '@ionic-native/file-chooser';
import { FilePath } from '@ionic-native/file-path';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { Events } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { PostMenu } from '../stream/post-menu';
import { NewPostModal } from '../stream/new-post';
import * as pnut from 'pnut-butter';
@ -326,304 +325,3 @@ export class StreamPage {
}
}
@Component({
// templateUrl: 'new-post.html'
selector: 'modal-newpost',
template: `
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span ion-text color="primary">Cancel</span>
</button>
</ion-buttons>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>
<ion-item>
<ion-textarea [(ngModel)]="ptext" autocomplete="true" spellcheck="true" clearInput="true" rows="8"></ion-textarea>
</ion-item>
</ion-card-content>
<ion-row justify-content-end>
<ion-col offset-0>
<button ion-button (click)="attachImage()">
<ion-icon name="attach"></ion-icon>
</button>
</ion-col>
<ion-col col-2><div text-center>{{textCount()}}</div></ion-col>
<ion-col col-2>
<button ion-button (click)="send()">
<ion-icon name="send"></ion-icon>
</button>
</ion-col>
</ion-row>
<progress id='p' *ngIf="showProgress"></progress>
<ion-list>
<ion-item *ngFor="let f of files">
<ion-thumbnail item-start>
<img src="{{ f.link }}">
</ion-thumbnail>
<p>{{ f.name }}</p>
<button ion-button color="dark" clear item-end (click)="unattach(f.id)">
<ion-icon name="remove-circle"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
`
})
export class NewPostModal {
title: string;
replyid: string;
ptext: string = "";
showProgress: boolean = false;
files: Array<Object> = [];
fname: string = "";
fpath: string = "";
options: Object = {};
myUsername: string;
authToken: string;
longpost: Object = {};
raw: {type: string, value: Object}[] = [];
constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
private fileChooser: FileChooser, private storage: Storage, public events: Events, private filePath: FilePath,
private transfer: FileTransfer) {
console.log(JSON.stringify(this.navParams));
this.myUsername = navParams.data.me;
if (navParams.data.type === 'reply') {
this.replyid = navParams.data.post.id;
this.options = {replyTo: this.replyid};
if (navParams.data.post.user.username !== this.myUsername) {
this.ptext = "@" + navParams.data.post.user.username + " ";
} else {
this.ptext = ""
}
if (navParams.data.post.content.entities) {
if (navParams.data.post.content.entities.mentions.length > 0) {
this.ptext = this.ptext + this.parseMentions(navParams.data.post.content.entities.mentions);
}
}
this.title = "Reply to " + navParams.data.post.user.username
} else if (navParams.data.type === 'quote') {
this.ptext = " >> @" + navParams.data.post.user.username + ": " + navParams.data.post.content.text;
this.title = "New Post";
} else {
this.title = "New Post";
}
this.storage.get('token').then((val) => {
this.authToken = val;
});
}
dismiss() {
this.viewCtrl.dismiss();
}
send() {
if (this.ptext.length > 254) {
this.longpost = {
'title': '',
'body': this.ptext,
'tstamp': new Date().valueOf()
}
this.ptext = this.ptext.substr(0, 40) + "... - http://chimpnut.nl/u/";
this.ptext = this.ptext + this.navParams.data.me + "/lp/{object_id} - #longpost";
this.raw.push({
type: "nl.chimpnut.blog.post",
value: this.longpost
});
}
this.options['raw'] = this.raw;
pnut.createPost(this.ptext, this.options).then(res => {
console.log('-success-');
console.log(JSON.stringify(res));
this.presentToast("Status posted.");
this.events.publish('stream:reload', {});
}).catch(err => {
console.log('-error posting-');
console.log(JSON.stringify(err));
});
this.viewCtrl.dismiss();
}
presentToast(text) {
let toast = this.toastCtrl.create({
position: 'top',
message: text,
duration: 2000
});
toast.present();
}
parseMentions(mentions) {
let mtext = ""
for(var i = 0; i < mentions.length; i++) {
let mu = mentions[i].text;
if (mu !== this.myUsername) {
mtext += "@" + mu + " ";
}
}
if (mtext.length > 0) {
if (this.navParams.data.cc) {
mtext = "\n/" + mtext;
}
return mtext;
} else {
return "";
}
}
textCount() {
let counttext = ""
let count = 254 - this.ptext.length
if (count < 1) {
counttext = "longpost"
} else {
counttext = String(count)
}
return counttext
}
attachImage() {
// console.log('file chooser');
const fileTransfer: FileTransferObject = this.transfer.create();
this.fileChooser.open().then(uri => {
console.log('File URI: ' + uri);
this.filePath.resolveNativePath(uri).then(filePath => {
this.fpath = filePath;
this.fname = filePath.split('/').pop();
let options: FileUploadOptions = {
fileKey: 'content',
fileName: this.fname,
params: {
name: this.fname,
type: 'com.monkeystew.goober_m',
is_public: true
},
headers: {'Authorization': 'Bearer ' + this.authToken}
}
this.showProgress = true;
fileTransfer.upload(this.fpath, 'https://api.pnut.io/v0/files', options).then((response) => {
let rdata = JSON.parse(response.response);
let oembed = {
'+io.pnut.core.file': {
file_id: rdata.data.id,
file_token: rdata.data.file_token,
format: 'oembed'
}
}
// console.log(JSON.stringify(oembed));
this.raw.push({
type: "io.pnut.core.oembed",
value: oembed
});
this.files.push({
name: this.fname,
link: rdata.data.link,
id: this.raw.length - 1
});
this.showProgress = false;
}).catch((err) => {
this.showProgress = false;
let edata = JSON.parse(err.body);
this.presentToast(edata.meta.error_message);
});
}).catch(err => {
console.log('-error getting filepath-');
console.log(err);
});
}).catch(err => {
console.log(err);
});
}
unattach(id) {
console.log('removing item ' + id);
this.raw.splice(id, 1);
this.files.splice(id, 1);
}
}
@Component({
template: `
<ion-list>
<button ion-item (click)="browse()">Open in Browser</button>
<button ion-item (click)="share()">Share</button>
<button ion-item *ngIf="showDelBtn" (click)="delete()">Delete</button>
</ion-list>
`
})
export class PostMenu {
showDelBtn: boolean = false;
constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
public events: Events) {
if (navParams.data.me == navParams.data.post.user.username) {
this.showDelBtn = true;
} else {
this.showDelBtn = false;
}
}
browse() {
window.open('https://posts.pnut.io/' + this.navParams.data.post.id, '_system');
this.close();
}
share() {
(<any>window).shareContentPlugin.share(this.navParams.data.post.content.text, function(e) {
console.log('sharing post:');
console.log(JSON.stringify(e));
}, function(e) {
console.log('sharing failed:');
console.log(JSON.stringify(e));
});
this.close();
}
delete() {
pnut.deletePost(this.navParams.data.post.id).then(res => {
console.log(res);
this.presentToast('Post Deleted');
this.events.publish('stream:reload', {});
}).catch( err => {
console.log('-error-');
console.log(err);
});
this.close()
}
presentToast(text) {
let toast = this.toastCtrl.create({
position: 'top',
message: text,
duration: 2000
});
toast.present();
}
close() {
this.viewCtrl.dismiss();
}
}

View file

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, ToastController, PopoverController } from 'ionic-angular';
import { NewPostModal, PostMenu } from '../stream/stream';
import { NewPostModal } from '../stream/stream';
import { PostMenu } from '../stream/post-menu';
import * as pnut from 'pnut-butter';