Skip to content

Commit bac02b9

Browse files
lancelilanceli
committed
feat(message): add message page
1 parent 0c874b9 commit bac02b9

File tree

17 files changed

+347
-69
lines changed

17 files changed

+347
-69
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@ionic-native/splash-screen": "3.4.2",
2424
"@ionic-native/status-bar": "3.4.2",
2525
"@ionic/storage": "2.0.1",
26+
"angular2-moment": "^1.3.3",
2627
"ionic-angular": "3.0.1",
2728
"ionicons": "3.0.0",
2829
"rxjs": "5.1.1",

‎src/app/app.component.ts‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@ import { Component, ViewChild } from '@angular/core';
22
import { Nav, Platform, AlertController } from 'ionic-angular';
33
import { StatusBar } from '@ionic-native/status-bar';
44
import { SplashScreen } from '@ionic-native/splash-screen';
5+
56
import { TabsService } from '../providers/tabs-service';
67
import { UserService } from '../providers/user-service';
8+
import { MessageService } from '../providers/message-service';
79
import { Tab } from '../classes/tab';
10+
import { User } from '../classes/user';
811

912

1013
@Component({
1114
templateUrl: 'app.html',
12-
providers: [TabsService, UserService]
15+
providers: [
16+
TabsService,
17+
UserService,
18+
MessageService
19+
]
1320
})
1421
export class MyApp {
1522
@ViewChild(Nav) nav: Nav;
@@ -18,7 +25,18 @@ export class MyApp {
1825

1926
tabs: Tab[];
2027

21-
constructor(public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private tabsService: TabsService, private userService: UserService, private alertCtrl: AlertController) {
28+
user: User;
29+
messagesCount: 0;
30+
31+
constructor(
32+
public platform: Platform,
33+
statusBar: StatusBar,
34+
splashScreen: SplashScreen,
35+
private tabsService: TabsService,
36+
private userService: UserService,
37+
private messageService: MessageService,
38+
private alertCtrl: AlertController
39+
) {
2240
platform.ready().then(() => {
2341
// Okay, so the platform is ready and our plugins are available.
2442
// Here you can do any higher level native things you might need.
@@ -32,6 +50,7 @@ export class MyApp {
3250

3351
ngAfterViewInit() {
3452
console.log('ng after view init');
53+
3554
this.tabs = this.tabsService.getTabs();
3655
}
3756

@@ -42,6 +61,32 @@ export class MyApp {
4261
});
4362
}
4463

64+
gotoUserPage(loginName: String) {
65+
console.log('goto user', loginName);
66+
this.nav.setRoot('user', {loginName: loginName})
67+
}
68+
69+
gotoMessagePage() {
70+
console.log('go to message page')
71+
this.nav.setRoot('message');
72+
}
73+
74+
getMessageCount() {
75+
this.messageService.getMessageCount().then((response) => {
76+
this.messagesCount = response.data;
77+
//setBadge($scope.messagesCount);
78+
}, function(response) {
79+
//$log.log('get messages count fail', response);
80+
});
81+
};
82+
83+
// login action callback
84+
loginCallback(user: User) {
85+
console.log('login callback', arguments);
86+
this.user = user;
87+
this.getMessageCount();
88+
}
89+
4590
login() {
4691
console.log('login');
4792
let alert = this.alertCtrl.create({
@@ -67,10 +112,9 @@ export class MyApp {
67112
console.log(data);
68113
if (data.token) {
69114
this.userService.login(data.token).then((response) => {
70-
console.log('done')
115+
this.loginCallback(response);
71116
});
72117
}
73-
74118
}
75119
}
76120
]

‎src/app/app.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,22 @@
77

88
<ion-content>
99
<ion-list>
10-
<ion-item (click)="login()" *ngIf="loginName == null">
10+
<ion-item *ngIf="user" menuClose (click)="gotoUserPage(user.loginname)">
11+
<ion-icon name="person" item-left></ion-icon>
12+
{{user.loginname}}
13+
</ion-item>
14+
<ion-item *ngIf="user" menuClose (click)="gotoMessagePage()">
15+
<ion-icon name="mail" item-left></ion-icon>
16+
我的消息
17+
</ion-item>
18+
<ion-item (click)="login()" *ngIf="user == null">
1119
登录
1220
<i class="icon ion-looping" ng-if="processing"></i>
1321
</ion-item>
14-
<ion-item class="item-divider">
22+
23+
<ion-item-divider color="light">
1524
板块
16-
</ion-item>
25+
</ion-item-divider>
1726
<ion-item *ngFor="let tab of tabs" (click)="openTab(tab)" menuClose>
1827
{{tab.label}}
1928
</ion-item>

‎src/app/app.module.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@ import { NgModule, ErrorHandler } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { HttpModule } from '@angular/http';
44
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
5-
import { MyApp } from './app.component';
5+
import { MomentModule } from 'angular2-moment';
66

77
import { StatusBar } from '@ionic-native/status-bar';
88
import { SplashScreen } from '@ionic-native/splash-screen';
9+
10+
import { MyApp } from './app.component';
11+
912
@NgModule({
1013
declarations: [
1114
MyApp
1215
],
1316
imports: [
1417
BrowserModule,
1518
HttpModule,
19+
MomentModule,
1620
IonicModule.forRoot(MyApp, {
1721
locationStrategy: 'hash'
1822
})

‎src/classes/message.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export class Message {
2+
id: string;
3+
}
4+
export class Messages {
5+
has_read_messages: Message[];
6+
hasnot_read_messages: Message[];
7+
}

‎src/pages/message/message.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!--
2+
Generated template for the Message page.
3+
4+
See http://ionicframework.com/docs/components/#navigation for more info on
5+
Ionic pages and navigation.
6+
-->
7+
<ion-header>
8+
9+
<ion-navbar>
10+
<ion-title>Message</ion-title>
11+
</ion-navbar>
12+
13+
</ion-header>
14+
15+
16+
<ion-content padding>
17+
<ion-list>
18+
<ion-item class="item-divider">
19+
未读消息
20+
</ion-item>
21+
<ng-container *ngIf="!!messages">
22+
<ion-item *ngFor="let message of messages.hasnot_read_messages">
23+
<a (click)="gotoUserPage(message.author.loginname)">{{message.author.loginname}}</a>
24+
<ng-container *ngIf="message.type == 'at'">
25+
回复了
26+
</ng-container>
27+
<ng-container *ngIf="message.type == 'reply'">
28+
在
29+
</ng-container>
30+
<a (click)="gotoTopicPage(message.topic.id)">{{message.topic.title}}</a>
31+
<ng-container *ngIf="message.type == 'reply'">
32+
中@了你
33+
</ng-container>
34+
</ion-item>
35+
</ng-container>
36+
<ion-item class="item-divider">
37+
已读消息
38+
</ion-item>
39+
<ng-container *ngIf="!!messages">
40+
<ion-item *ngFor="let message of messages.has_read_messages">
41+
<a (click)="gotoUserPage(message.author.loginname)">{{message.author.loginname}}</a>
42+
<ng-container *ngIf="message.type == 'at'">
43+
回复了
44+
</ng-container>
45+
<ng-container *ngIf="message.type == 'reply'">
46+
在
47+
</ng-container>
48+
<a (click)="gotoTopicPage(message.topic.id)">{{message.topic.title}}</a>
49+
<ng-container *ngIf="message.type == 'reply'">
50+
中@了你
51+
</ng-container>
52+
</ion-item>
53+
</ng-container>
54+
</ion-list>
55+
</ion-content>

‎src/pages/message/message.module.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { MessagePage } from './message';
4+
5+
@NgModule({
6+
declarations: [
7+
MessagePage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(MessagePage),
11+
],
12+
exports: [
13+
MessagePage
14+
]
15+
})
16+
export class MessageModule {}

‎src/pages/message/message.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-message {
2+
3+
}

‎src/pages/message/message.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
4+
import { Message, Messages } from '../../classes/message';
5+
import { MessageService } from '../../providers/message-service';
6+
/**
7+
* Generated class for the MessagePage page.
8+
*
9+
* See http://ionicframework.com/docs/components/#navigation for more info
10+
* on Ionic pages and navigation.
11+
*/
12+
@IonicPage({
13+
name: 'message',
14+
segment: 'message'
15+
})
16+
@Component({
17+
selector: 'page-message',
18+
templateUrl: 'message.html',
19+
providers: [MessageService]
20+
})
21+
export class MessagePage {
22+
23+
messages: Messages;
24+
25+
constructor(
26+
public navCtrl: NavController,
27+
public navParams: NavParams,
28+
private messageService: MessageService
29+
) {
30+
}
31+
32+
ionViewDidLoad() {
33+
console.log('ionViewDidLoad MessagePage');
34+
}
35+
36+
ngOnInit(): void {
37+
this.loadMessage();
38+
}
39+
40+
loadMessage() {
41+
this.messageService.getMessages().then((messages) => {
42+
console.log(messages);
43+
this.messages = messages;
44+
console.log(this);
45+
});
46+
}
47+
48+
gotoUserPage(loginName: String): void {
49+
console.log('goto user', loginName);
50+
this.navCtrl.push('user', {loginName: loginName});
51+
}
52+
53+
gotoTopicPage(id: String): void {
54+
console.log('goto topic', id);
55+
this.navCtrl.push('topic', {id: id});
56+
}
57+
58+
59+
}

‎src/pages/topic/topic.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@
2323
<h4 class="title">{{topic.title}}</h4>
2424
<div class="summary">
2525
<strong>
26-
<a (click)="gotoUser(topic.author.loginname)">
26+
<a (click)="gotoUserPage(topic.author.loginname)">
2727
<img [src]="topic.author.avatar_url" class="avatar">
2828
{{topic.author.loginname}}</a>
2929
</strong>
30-
<span class="item-note" am-time-ago="topic.last_reply_at"></span>
30+
<span class="item-note">
31+
{{ topic.last_reply_at | amTimeAgo }}
32+
</span>
3133
</div>
3234
<div class="topic-content" [innerHTML]="topic.content">
3335
</div>
@@ -38,6 +40,9 @@ <h4 class="title">{{topic.title}}</h4>
3840
<ion-item *ngFor="let reply of topic.replies">
3941
{{reply.author.loginname}}
4042
<div class="reply-content" [innerHTML]="reply.content"></div>
43+
<span class="item-note">
44+
{{ reply.create_at | amTimeAgo }}
45+
</span>
4146
<span class="item-note cnode" *ngIf="reply.ups.length > 0">
4247
<i class="icon ion-thumbsup"></i>
4348
{{reply.ups.length}}

0 commit comments

Comments
 (0)