polling messages

ZipTeamOrange-ionic-UI/ionic.config.json

 {
   "name": "ionic-ZipTeamOrange",
-  "app_id": "",
-  "type": "ionic-angular",
   "integrations": {
     "cordova": {}
-  }
-}
+  },
+  "type": "ionic-angular"
+}

ZipTeamOrange-ionic-UI/package.json

     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "3.1.10",
+    "@ionic/app-scripts": "^3.1.10",
     "typescript": "~2.6.2"
   },
   "description": "An Ionic project"

ZipTeamOrange-ionic-UI/src/Classes/Messsage.ts

 import { Chat } from "./Chat";
 import { User } from "./user";
 
-export class Message{
+export class Message {
     id: number;
     message: String;
     private chat: Chat;

ZipTeamOrange-ionic-UI/src/pages/chat/chat.html

 <!-- *ngFor="let m of msg">{{ m }} -->
 
 <ion-content padding >
-  <div *ngFor="let m of msg">
-    {{ m.message }}
+  <div *ngFor="let m of msg" class="message-wrapper">
+    <div class="name">Nhu <span class="timestamp">4/10</span></div>
+    <div class="message">{{m.message}}</div>
   </div>
 
   <form  #test1="ngForm" ng-submit="send(test1.value)">
-    <ion-textarea  type="text" name="message" [(ngModel)]="test" ></ion-textarea>
-    <button ion-button (click)="send(test1.value)"(click)="getMessages()">send</button>
+    <ion-textarea  type="text" name="message" [(ngModel)]="test" class="user-message"></ion-textarea>
+    <button ion-button (click)="send(test1.value)" >send</button>
   </form>
 </ion-content>

ZipTeamOrange-ionic-UI/src/pages/chat/chat.scss

 page-chat {
+    .user-message {
+        border: 1px solid #CCC;
+    }
 
+    
 }

ZipTeamOrange-ionic-UI/src/pages/chat/chat.ts

-import { Component } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { NgForm } from '../../../node_modules/@angular/forms';
 import { MessageServiceProvider } from '../../providers/message-service/message-service';
 import { Message } from '../../../node_modules/@angular/compiler/src/i18n/i18n_ast';
+// import {OnInit} from '@angular/core';
+// import { interval } from '../../../node_modules/rxjs/observable/interval';
+// import { startWith } from '../../../node_modules/rxjs/operators';
+// import { switchMap } from '../../../node_modules/rxjs/operator/switchMap';
 
-/**
- * Generated class for the ChatPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
 
 @IonicPage()
 @Component({
 export class ChatPage {
   test: any;
   msg: any;
+  @Input()
   messages: Message [];
+  mApi: any;
+
   constructor(public navCtrl: NavController, public navParams: NavParams, public messageApi: MessageServiceProvider) {
+  this.mApi = messageApi;
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad ChatPage');
-    this.getMessages();
+    this.getMessages(this);
   }
 
   send(createAccountInfo: NgForm){
     console.log("clicked");
     console.log(createAccountInfo)
     this.messageApi.saveMessage(createAccountInfo).subscribe(console.log);
-    this.getMessages()
+    this.test = '';
+    this.getMessages(this);
   }
 
-  getMessages(){
-    this.messageApi.getMessages().subscribe(data => {
-      this.msg = data
-      console.log(data)
+  getMessages(chatPage){
+    chatPage.messageApi.getMessages().subscribe(data => {
+      this.msg = data;
+      console.log(this.msg);
     });
-    this.test = this.messageApi.getCurrentMessage();
+ }
+
+  ngOnInit() {
+    setInterval(() => {this.getMessages(this)}, 500);
   }
 
+
+
+
+
 }

ZipTeamOrange-ionic-UI/src/providers/message-service/message-service.ts

     return this.http.post(`http://localhost:8080/message/add`, createAccountInfo);
   }
 
-}
+}

ZipTeamOrange-ionic-UI/www/build/main.css

   min-height: calc(46px + constant(safe-area-inset-bottom));
   min-height: calc(46px + env(safe-area-inset-bottom));
 }
+
+page-chat .user-message {
+  border: 1px solid #CCC;
+}

ZipTeamOrange-ionic-UI/www/build/main.js

 
 
 
-/**
- * Generated class for the ChatPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
+// import {OnInit} from '@angular/core';
+// import { interval } from '../../../node_modules/rxjs/observable/interval';
+// import { startWith } from '../../../node_modules/rxjs/operators';
+// import { switchMap } from '../../../node_modules/rxjs/operator/switchMap';
 var ChatPage = /** @class */ (function () {
     function ChatPage(navCtrl, navParams, messageApi) {
         this.navCtrl = navCtrl;
         this.navParams = navParams;
         this.messageApi = messageApi;
+        this.mApi = messageApi;
     }
     ChatPage.prototype.ionViewDidLoad = function () {
         console.log('ionViewDidLoad ChatPage');
-        this.getMessages();
+        this.getMessages(this);
     };
     ChatPage.prototype.send = function (createAccountInfo) {
         console.log("clicked");
         console.log(createAccountInfo);
         this.messageApi.saveMessage(createAccountInfo).subscribe(console.log);
-        this.getMessages();
+        this.test = '';
+        this.getMessages(this);
     };
-    ChatPage.prototype.getMessages = function () {
+    ChatPage.prototype.getMessages = function (chatPage) {
         var _this = this;
-        this.messageApi.getMessages().subscribe(function (data) {
+        chatPage.messageApi.getMessages().subscribe(function (data) {
             _this.msg = data;
-            console.log(data);
+            console.log(_this.msg);
         });
-        this.test = this.messageApi.getCurrentMessage();
     };
+    ChatPage.prototype.ngOnInit = function () {
+        var _this = this;
+        setInterval(function () { _this.getMessages(_this); }, 500);
+    };
+    __decorate([
+        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
+        __metadata("design:type", Array)
+    ], ChatPage.prototype, "messages", void 0);
     ChatPage = __decorate([
         Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({
-            selector: 'page-chat',template:/*ion-inline-start:"/Users/alizalang/Desktop/ZipTeam/ZipTeamOrange-ionic-UI/src/pages/chat/chat.html"*/'<!--\n  Generated template for the ChatPage page.\n\n  See http://ionicframework.com/docs/components/#navigation for more info on\n  Ionic pages and navigation.\n-->\n<ion-header>\n\n  <ion-navbar>\n    <ion-title>chatPage</ion-title>\n  </ion-navbar>\n\n</ion-header>\n<!-- *ngFor="let m of msg">{{ m }} -->\n\n<ion-content padding >\n  <div *ngFor="let m of msg">\n    {{ m.message }}\n  </div>\n\n  <form  #test1="ngForm" ng-submit="send(test1.value)">\n    <ion-textarea  type="text" name="message" [(ngModel)]="test" ></ion-textarea>\n    <button ion-button (click)="send(test1.value)"(click)="getMessages()">send</button>\n  </form>\n</ion-content>\n'/*ion-inline-end:"/Users/alizalang/Desktop/ZipTeam/ZipTeamOrange-ionic-UI/src/pages/chat/chat.html"*/,
+            selector: 'page-chat',template:/*ion-inline-start:"/Users/alizalang/Desktop/ZipTeam/ZipTeamOrange-ionic-UI/src/pages/chat/chat.html"*/'<!--\n  Generated template for the ChatPage page.\n\n  See http://ionicframework.com/docs/components/#navigation for more info on\n  Ionic pages and navigation.\n-->\n<ion-header>\n\n  <ion-navbar>\n    <ion-title>chatPage</ion-title>\n  </ion-navbar>\n\n</ion-header>\n<!-- *ngFor="let m of msg">{{ m }} -->\n\n<ion-content padding >\n  <div *ngFor="let m of msg" class="message-wrapper">\n    <div class="name">Nhu <span class="timestamp">4/10</span></div>\n    <div class="message">{{m.message}}</div>\n  </div>\n\n  <form  #test1="ngForm" ng-submit="send(test1.value)">\n    <ion-textarea  type="text" name="message" [(ngModel)]="test" class="user-message"></ion-textarea>\n    <button ion-button (click)="send(test1.value)" >send</button>\n  </form>\n</ion-content>\n'/*ion-inline-end:"/Users/alizalang/Desktop/ZipTeam/ZipTeamOrange-ionic-UI/src/pages/chat/chat.html"*/,
         }),
-        __metadata("design:paramtypes", [typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["e" /* NavController */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["e" /* NavController */]) === "function" && _a || Object, typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavParams */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavParams */]) === "function" && _b || Object, typeof (_c = typeof __WEBPACK_IMPORTED_MODULE_2__providers_message_service_message_service__["a" /* MessageServiceProvider */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_2__providers_message_service_message_service__["a" /* MessageServiceProvider */]) === "function" && _c || Object])
+        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["e" /* NavController */], __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavParams */], __WEBPACK_IMPORTED_MODULE_2__providers_message_service_message_service__["a" /* MessageServiceProvider */]])
     ], ChatPage);
     return ChatPage;
-    var _a, _b, _c;
 }());
 
 //# sourceMappingURL=chat.js.map
     };
     MessageServiceProvider = __decorate([
         Object(__WEBPACK_IMPORTED_MODULE_1__angular_core__["A" /* Injectable */])(),
-        __metadata("design:paramtypes", [typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_0__angular_common_http__["a" /* HttpClient */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_0__angular_common_http__["a" /* HttpClient */]) === "function" && _a || Object])
+        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_0__angular_common_http__["a" /* HttpClient */]])
     ], MessageServiceProvider);
     return MessageServiceProvider;
-    var _a;
 }());
 
 //# sourceMappingURL=message-service.js.map