implemented chat 'send' button, and simple data flow

smukov · Jun 30, 2016 · d45845a · d45845a
1 parent 28aea16
commit d45845a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/Ionic/app/pages/chatPage/chatPage.html b/Ionic/app/pages/chatPage/chatPage.html
@@ -5,7 +5,7 @@
   </ion-title>
 </ion-navbar>
 
-<ion-content padding class="chatPage">
+<ion-content #content padding class="chatPage">
 
   <ion-list no-lines>
     <ion-item *ngFor="let msg of messages" >
@@ -21,12 +21,12 @@
     <ion-item>
       <ion-label style="margin:0px;"></ion-label>
       <div item-content style="width:100%;">
-        <elastic-textarea placeholder="Type to compose" lineHeight="22"></elastic-textarea>
+        <elastic-textarea #txtChat placeholder="Type to compose" lineHeight="22"></elastic-textarea>
       </div>
     </ion-item>
 
     <ion-buttons right>
-      <button style="min-width:45px;">
+      <button style="min-width:45px;" (click)="sendMessage()">
         <ion-icon name="send"></ion-icon>
       </button>
     </ion-buttons>

diff --git a/Ionic/app/pages/chatPage/chatPage.js b/Ionic/app/pages/chatPage/chatPage.js
@@ -1,12 +1,16 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {NavController, NavParams} from 'ionic-angular';
 
 import {ChatBubble} from '../components/chatBubble/chatBubble';
 import {ElasticTextarea} from '../components/elasticTextarea';
 
 @Component({
   templateUrl: 'build/pages/chatPage/chatPage.html',
-  directives: [ChatBubble, ElasticTextarea]
+  directives: [ChatBubble, ElasticTextarea],
+  queries: {
+    txtChat: new ViewChild('txtChat'),
+    content: new ViewChild('content')
+  }
 })
 export class ChatPage {
   static get parameters() {
@@ -44,4 +48,24 @@ export class ChatPage {
     ];
   }
 
+  sendMessage(){
+    this.messages.push({
+      img: 'build/img/hugh.png',
+      position: 'right',
+      content: this.txtChat.content,
+      senderName: 'Me',
+      time: new Date().toLocaleTimeString()
+    });
+
+    console.log(this.txtChat.content);
+    this.txtChat.clearInput();
+
+    //without this timout the list scrolls
+    //to the second to last element.
+    //It's some kind of race condition
+    setTimeout(() => {
+      this.content.scrollToBottom(300);//300ms animation speed
+    });
+  }
+
 }
diff --git a/Ionic/app/pages/components/chatBubble/chatBubble.scss b/Ionic/app/pages/components/chatBubble/chatBubble.scss
@@ -25,7 +25,7 @@
   .message {
     font-size: medium;
     word-wrap: break-word;
-    white-space: normal;
+    white-space: pre-wrap;
   }
 
   .message-detail {

diff --git a/Ionic/app/pages/components/elasticTextarea.js b/Ionic/app/pages/components/elasticTextarea.js
@@ -29,4 +29,9 @@ export class ElasticTextarea {
     this.txtArea.style.height = this.lineHeight + "px";
     this.txtArea.style.height =  this.txtArea.scrollHeight + "px";
   }
+
+  clearInput(){
+    this.content = "";
+    this.txtArea.style.height = this.lineHeight + "px";
+  }
 }
diff --git a/Ionic/app/pages/loginPage/loginPage.js b/Ionic/app/pages/loginPage/loginPage.js
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {NavController} from 'ionic-angular';
 import {ProfilePage} from '../profilePage/profilePage';
-import {ContactPage} from '../contactPage/contactPage';
 
 
 @Component({
@@ -19,7 +18,6 @@ export class LoginPage {
   }
 
   login(){
-    //TODO just for testing
-    this.nav.setRoot(ContactPage);//ProfilePage);
+    this.nav.setRoot(ProfilePage);
   }
 }