implements contacts component

src/chatle/Views/Home/Index.cshtml

@@ -80,13 +80,12 @@
     </script>
 
 	<script>
-		$(document).ready(function () {
-			chatLe.userName = '@User.Identity.Name';
-			chatLe.chatAPI = '@Url.Action("Get", "Chat")'
-			chatLe.convAPI = '@Url.Action("CreateConversation", "Chat")'
-			chatLe.userAPI = '@Url.Action("Get", "User")'
-
-			chatLe.init(true);
-		});
+        window['chatleSetting'] = {
+            userName: '@User.Identity.Name',
+            chatAPI: '@Url.Action("Get", "Chat")',
+            convAPI: '@Url.Action("CreateConversation", "Chat")',
+            userAPI: '@Url.Action("Get", "User")',
+            debug: true
+        };
 	</script>
 }

src/chatle/app/app.component.spec.ts

@@ -1,8 +1,26 @@
-import { AppComponent } from "./app.component";
+import { Injector } from '@angular/core';
+import { TestBed, inject } from '@angular/core/testing';
+import { HttpModule, Http, XHRBackend } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
+
+import { AppComponent } from './app.component';
+import { ChatService } from './shared/chat.service';
+import { Settings } from './shared/settings';
 
 describe('AppComponent', () => {
-    it("app component should exist", () => {
-        let component = new AppComponent();
-        expect(component).toBeDefined();
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpModule],
+            providers: [
+                { provide: XHRBackend, useClass: MockBackend },
+                { provide: Settings, useClass: Settings }                
+            ]
+        });
     });
+
+    it("app component should exist", inject([ChatService], (service: ChatService) => {
+        let component = new AppComponent(service);
+        expect(component).toBeDefined();
+    }));
 });

src/chatle/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ChatService, ConnectionState} from './shared/chat.service'
+import { ChatService, ConnectionState } from './shared/chat.service'
+import { Settings } from './shared/settings'
 
 @Component({
   selector: 'chatle',

src/chatle/app/app.module.ts

@@ -1,15 +1,17 @@
-import { NgModule }      from '@angular/core';
+import { NgModule, provide }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 import { HttpModule }     from '@angular/http';
 
 import { AppComponent }  from './app.component';
 import { ContactComponent }  from './contacts/contact.component';
 import { ContactsComponent }  from './contacts/contacts.component';
+import { Settings } from './shared/settings';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule, HttpModule ],
   declarations: [ AppComponent, ContactComponent, ContactsComponent ],
-  bootstrap:    [ AppComponent ]
+  bootstrap: [AppComponent],
+  providers: [{ provide: Settings, useFactory: () => window['chatleSetting'] }]
 })
 export class AppModule { }

src/chatle/app/contacts/contact.component.ts

@@ -1,8 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+
+import { User } from '../shared/user';
 
 @Component({
   selector: 'contact',
-  template: '<h1>Contact</h1>'
+  templateUrl: 'contact.html'
 })
 
-export class ContactComponent { }
+export class ContactComponent {
+    @Input()
+    user: User;
+
+    onClick() {
+
+    }
+}

src/chatle/app/contacts/contact.html

@@ -0,0 +1 @@
+<a href="#" (click)="onClick()">{{user.Id}}</a>

src/chatle/app/contacts/contacts.component.ts

@@ -5,10 +5,10 @@ import { User } from '../shared/user'
 
 @Component({
   selector: 'contacts',
-  template: `<h1>Contacts</h1>
+  template: `<h6>CONNECTED</h6>
     <ul>
       <li *ngFor="let user of users">
-        <span>{{user.id}}</span> {{user.name}}
+        <contact [user]="user"></contact>
       </li>
     </ul>`
 })

src/chatle/app/contacts/contacts.html

@@ -0,0 +1,6 @@
+<h6>CONNECTED</h6>
+<ul>
+    <li *ngFor="let user of users">
+        <contact [user]="user"></contact>
+    </li>
+</ul>

src/chatle/app/main.ts

@@ -1,3 +1,4 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app.module';
 platformBrowserDynamic().bootstrapModule(AppModule);

src/chatle/app/shared/chat.service.spec.ts

@@ -11,18 +11,20 @@ import { Message } from './message';
 import { Conversation } from './conversation';
 
 describe('ChatService', () => {
+    TestBed.resetTestEnvironment();
 
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [HttpModule],
             providers: [
-                { provide: XHRBackend, useClass: MockBackend }
+                { provide: XHRBackend, useClass: MockBackend },
+                { provide: Settings, useClass: Settings }
             ]
         });
     });
 
-    it("start should return connectionState observable", inject([Settings, Http], (settings: Settings, http: Http) => {
-        let service = new ChatService(settings, http);
+    it("start should return connectionState observable", inject([Http, Settings], (http: Http, settings: Settings) => {
+        let service = new ChatService(http, settings);
         let connectionState: ConnectionState;
 
         service.start(true)

src/chatle/app/shared/chat.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { Http } from '@angular/http';
 
 import 'rxjs/add/operator/toPromise';
@@ -46,9 +46,8 @@ export class ChatService {
     private userDisconnectedSubject = new Subject<string>();
     private messageReceivedSubject = new Subject<Message>();
     private joinConversationSubject = new Subject<Conversation>();
-    private settings = new Settings();
 
-    constructor(private http: Http) {
+    constructor(private http: Http, private settings: Settings) {
         this.connectionState = this.connectionStateSubject.asObservable();
         this.messageReceived = this.messageReceivedSubject.asObservable();
         this.userConnected = this.userConnectedSubject.asObservable();

src/chatle/gulpfile.js

@@ -35,6 +35,8 @@ paths.rxjs = paths.node_modules + "rxjs/**/*.js";
 paths.jasminejs = paths.node_modules + "jasmine-core/lib/jasmine-core/*.*";
 
 paths.app = "app/**/*.js";
+paths.appTemplates = "app/**/*.html"
+paths.appmaps = "app/**/*.map"
 paths.appDest = paths.webroot + "js/app";
 gulp.task("clean:js", function (cb) {
 	return rimraf(paths.concatJsDest, cb);
@@ -104,7 +106,7 @@ gulp.task("copy:rxjs", function () {
 });
 
 gulp.task("copy:app", function () {
-	return gulp.src(paths.app + "*")
+    return gulp.src([paths.app, paths.appmaps, paths.appTemplates])
 			.pipe(gulp.dest(paths.appDest));
 });
 
@@ -125,7 +127,7 @@ gulp.task("dependencies", [ "copy:angular",
 					"copy:app" ]);
 
 gulp.task("watch", function() {
-	return watch(paths.app + "*")
+	return watch(paths.app)
 			.pipe(gulp.dest(paths.appDest))
 });
 

src/chatle/wwwroot/_references.js

@@ -5,10 +5,9 @@
 /// <reference path="../app/contacts/contact.component.js" />
 /// <reference path="../app/contacts/contacts.component.js" />
 /// <reference path="../app/main.js" />
-/// <reference path="../app/shared/attendee.js" />
 /// <reference path="../app/shared/chat.service.js" />
+/// <reference path="../app/shared/chat.service.spec.js" />
 /// <reference path="../app/shared/conversation.js" />
-/// <reference path="../app/shared/data.service.js" />
 /// <reference path="../app/shared/message.js" />
 /// <reference path="../app/shared/settings.js" />
 /// <reference path="../app/shared/user.js" />
@@ -19,6 +18,9 @@
 /// <reference path="js/app/contacts/contact.component.js" />
 /// <reference path="js/app/contacts/contacts.component.js" />
 /// <reference path="js/app/main.js" />
+/// <reference path="js/app/shared/chat.service.js" />
+/// <reference path="js/app/shared/chat.service.spec.js" />
+/// <reference path="js/app/shared/user.js" />
 /// <reference path="js/chat.js" />
 /// <reference path="js/systemjs.config.js" />
 /// <reference path="lib/bootstrap/dist/js/bootstrap.js" />