added chat table

app/shared/components/chat.component.html

@@ -10,29 +10,29 @@
             <td><span class="teamName">{{match.Id}}</span></td>
             <td><span class="teamScore"> {{match.Host}} vs {{match.Guest}} </span></td>
         </tr>
-        <!--<tr>
+        <tr>
             <td colspan="2">
                 <div class="feed-table">
                     <table class="table table-striped">
                         <thead>
                             <tr>
                                 <th></th>
-                                <th>Update</th>
+                                <th>Message</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr *ngFor="let feed of match.Feeds" feedHighlight>
+                            <tr *ngFor="let message of messages" feedHighlight>
                                 <td>
-                                    <span class="feed-time">{{feed.CreatedAt | date:'shortTime' }}</span>
+                                    <span class="feed-time">{{message.CreatedAt | date:'shortTime' }} [{{message.MatchId}}]</span>
                                 </td>
                                 <td class="filterable-cell">
-                                    <span class="feed-update"> {{feed.Description}} </span>
+                                    <span class="feed-update"> {{message.Text}} </span>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </td>
-        </tr>-->
+        </tr>
     </tbody>
 </table>

app/shared/components/chat.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { Match } from '../interfaces';
+import { ChatMessage, Match } from '../interfaces';
+import { FeedService } from '../services/feed.service';
 
 @Component({
     selector: 'chat',
@@ -9,8 +10,21 @@ import { Match } from '../interfaces';
 export class ChatComponent implements OnInit {
 
     @Input() matches: Match[];
+    messages: ChatMessage[];
 
-    constructor() { }
+    constructor(private feedService: FeedService) { }
 
-    ngOnInit() { }
+    ngOnInit() {
+        let self = this;
+
+        self.feedService.addChatMessage.subscribe(
+            message => {
+                console.log('received..');
+                console.log(message);
+                if(!self.messages)
+                    self.messages = new Array<ChatMessage>();
+                self.messages.unshift(message);
+            }
+        )
+     }
 }

app/shared/components/match.component.html

@@ -28,8 +28,8 @@
             </td>
         </tr>
         <tr *ngIf="subscribed">
-            <td><button type="button" class="btn btn-default btn-md">Send</button></td>
-            <td><input type="text" class="form-control" placeholder="Type message.." /></td>
+            <td><button type="button" class="btn btn-default btn-md" (click)="addChatMessage()">Send</button></td>
+            <td><input type="text" class="form-control" placeholder="Type message.." [(ngModel)]="chatMessage" /></td>
         </tr>
         <tr>
             <td colspan="2">

app/shared/components/match.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { Match } from '../interfaces';
+import { ChatMessage, Match } from '../interfaces';
 import { FeedService } from '../services/feed.service';
+import { DataService } from '../services/data.service';
 
 @Component({
     selector: 'match',
@@ -11,8 +12,10 @@ export class MatchComponent implements OnInit {
 
     @Input() match: Match;
     subscribed: boolean;
+    chatMessage: string = '';
 
-    constructor(private feedService: FeedService) { }
+    constructor(private feedService: FeedService,
+                private dataService: DataService) { }
 
     ngOnInit() {  }
 
@@ -26,4 +29,23 @@ export class MatchComponent implements OnInit {
         this.subscribed = false;
         this.feedService.unsubscribeToFeed(this.match.Id);
     }
+
+    addChatMessage() {
+        let self = this;
+        let messageToSend: ChatMessage = { 
+            MatchId : self.match.Id, 
+            Text : self.chatMessage,
+            CreatedAt : new Date(Date.now())
+         };
+
+        this.dataService.addChatMessage(messageToSend)
+            .subscribe(() => {
+                console.log('message sent..');
+            },
+            error => {
+                console.log(error);
+            });
+
+        self.chatMessage = '';
+    }
 }