├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.css
    │   ├── registration
    │   │   ├── registration.component.css
    │   │   ├── registration.component.spec.ts
    │   │   ├── registration.component.ts
    │   │   └── registration.component.html
    │   ├── chating
    │   │   ├── chating.component.css
    │   │   ├── chating.component.spec.ts
    │   │   ├── chating.component.html
    │   │   └── chating.component.ts
    │   ├── app.component.html
    │   ├── login
    │   │   ├── login.component.css
    │   │   ├── login.component.spec.ts
    │   │   ├── login.component.html
    │   │   └── login.component.ts
    │   ├── app.component.ts
    │   ├── home
    │   │   ├── home.component.css
    │   │   ├── home.component.spec.ts
    │   │   ├── home.component.html
    │   │   └── home.component.ts
    │   ├── app.component.spec.ts
    │   └── app.module.ts
    ├── favicon.ico
    ├── styles.css
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── main.ts
    ├── tsconfig.json
    ├── polyfills.ts
    ├── index.html
    └── test.ts
├── e2e
    ├── app.po.ts
    ├── app.e2e-spec.ts
    └── tsconfig.json
├── .editorconfig
├── .gitignore
├── protractor.conf.js
├── README.md
├── karma.conf.js
├── angular-cli.json
├── package.json
└── tslint.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/registration/registration.component.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/chating/chating.component.css:
--------------------------------------------------------------------------------
1 | /*li{
2 |     background: wheat
3 | }*/


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdul-majid-ashrafi/ChatAppNg2/master/src/favicon.ico


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <!--<h1>
2 |   {{title}}
3 | </h1>
4 | <a routerLink="/login" routerLinkActive="active">Login Account</a>-->
5 | 
6 | <router-outlet></router-outlet>
7 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.css:
--------------------------------------------------------------------------------
 1 | 
 2 | h1{
 3 |     color: darkcyan
 4 | }
 5 | .container_table{
 6 |     position: absolute;
 7 |     right: 200px;
 8 |     top: 105px
 9 | }
10 | 
11 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, element, by } from 'protractor';
 2 | 
 3 | export class ParkingSystemPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.css']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'app works!';
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { ParkingSystemPage } from './app.po';
 2 | 
 3 | describe('parking-system App', function() {
 4 |   let page: ParkingSystemPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new ParkingSystemPage();
 8 |   });
 9 | 
10 |   it('should display message saying app works', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('app works!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import './polyfills.ts';
 2 | 
 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 4 | import { enableProdMode } from '@angular/core';
 5 | import { environment } from './environments/environment';
 6 | import { AppModule } from './app/app.module';
 7 | 
 8 | if (environment.production) {
 9 |   enableProdMode();
10 | }
11 | 
12 | platformBrowserDynamic().bootstrapModule(AppModule);
13 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "declaration": false,
 5 |     "emitDecoratorMetadata": true,
 6 |     "experimentalDecorators": true,
 7 |     "module": "commonjs",
 8 |     "moduleResolution": "node",
 9 |     "outDir": "../dist/out-tsc-e2e",
10 |     "sourceMap": true,
11 |     "target": "es5",
12 |     "typeRoots": [
13 |       "../node_modules/@types"
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "",
 4 |     "declaration": false,
 5 |     "emitDecoratorMetadata": true,
 6 |     "experimentalDecorators": true,
 7 |     "lib": ["es6", "dom"],
 8 |     "mapRoot": "./",
 9 |     "module": "es6",
10 |     "moduleResolution": "node",
11 |     "outDir": "../dist/out-tsc",
12 |     "sourceMap": true,
13 |     "target": "es5",
14 |     "typeRoots": [
15 |       "../node_modules/@types"
16 |     ]
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
 1 | .page-header , h4 ,p{
 2 |     color: darkcyan
 3 | }
 4 | 
 5 | .card {
 6 |     margin: 10px;
 7 |     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 8 |     transition: 0.3s;
 9 |     width: 20%;
10 |     border-radius: 5px;
11 | }
12 | 
13 | .card:hover {
14 |     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
15 | }
16 | 
17 | img {
18 |     border-radius: 5px 5px 0 0;
19 | }
20 | 
21 | .container2 {
22 |     padding: 2px 14px;
23 | }
24 | 
25 | .container2 ,.card,h4{
26 |     display: inline-block
27 | }
28 | button{
29 |     margin: 20px;
30 |     float: right
31 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | 
 7 | # dependencies
 8 | /node_modules
 9 | 
10 | # IDEs and editors
11 | /.idea
12 | .project
13 | .classpath
14 | .c9/
15 | *.launch
16 | .settings/
17 | 
18 | # IDE - VSCode
19 | .vscode/*
20 | !.vscode/settings.json
21 | !.vscode/tasks.json
22 | !.vscode/launch.json
23 | !.vscode/extensions.json
24 | 
25 | # misc
26 | /.sass-cache
27 | /connect.lock
28 | /coverage/*
29 | /libpeerconnection.log
30 | npm-debug.log
31 | testem.log
32 | /typings
33 | 
34 | # e2e
35 | /e2e/*.js
36 | /e2e/*.map
37 | 
38 | #System Files
39 | .DS_Store
40 | Thumbs.db
41 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | // This file includes polyfills needed by Angular and is loaded before
 2 | // the app. You can add your own extra polyfills to this file.
 3 | import 'core-js/es6/symbol';
 4 | import 'core-js/es6/object';
 5 | import 'core-js/es6/function';
 6 | import 'core-js/es6/parse-int';
 7 | import 'core-js/es6/parse-float';
 8 | import 'core-js/es6/number';
 9 | import 'core-js/es6/math';
10 | import 'core-js/es6/string';
11 | import 'core-js/es6/date';
12 | import 'core-js/es6/array';
13 | import 'core-js/es6/regexp';
14 | import 'core-js/es6/map';
15 | import 'core-js/es6/set';
16 | import 'core-js/es6/reflect';
17 | 
18 | import 'core-js/es7/reflect';
19 | import 'zone.js/dist/zone';
20 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>Chat app</title>
 7 |     <base href="/">
 8 | 
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
10 |     <link rel="icon" type="image/x-icon" href="https://bettercaring.com.au/wp-content/uploads/icon-chat-orange.png">
11 |     <meta charset="utf-8">
12 |     <meta name="viewport" content="width=device-width, initial-scale=1">
13 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
14 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
15 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
16 | </head>
17 | 
18 | </head>
19 | 
20 | <body>
21 |     <app-root>Loading...</app-root>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { HomeComponent } from './home.component';
 7 | 
 8 | describe('HomeComponent', () => {
 9 |   let component: HomeComponent;
10 |   let fixture: ComponentFixture<HomeComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ HomeComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(HomeComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { LoginComponent } from './login.component';
 7 | 
 8 | describe('LoginComponent', () => {
 9 |   let component: LoginComponent;
10 |   let fixture: ComponentFixture<LoginComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ LoginComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(LoginComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | /*global jasmine */
 5 | var SpecReporter = require('jasmine-spec-reporter');
 6 | 
 7 | exports.config = {
 8 |   allScriptsTimeout: 11000,
 9 |   specs: [
10 |     './e2e/**/*.e2e-spec.ts'
11 |   ],
12 |   capabilities: {
13 |     'browserName': 'chrome'
14 |   },
15 |   directConnect: true,
16 |   baseUrl: 'http://localhost:4200/',
17 |   framework: 'jasmine',
18 |   jasmineNodeOpts: {
19 |     showColors: true,
20 |     defaultTimeoutInterval: 30000,
21 |     print: function() {}
22 |   },
23 |   useAllAngular2AppRoots: true,
24 |   beforeLaunch: function() {
25 |     require('ts-node').register({
26 |       project: 'e2e'
27 |     });
28 |   },
29 |   onPrepare: function() {
30 |     jasmine.getEnv().addReporter(new SpecReporter());
31 |   }
32 | };
33 | 


--------------------------------------------------------------------------------
/src/app/chating/chating.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { ChatingComponent } from './chating.component';
 7 | 
 8 | describe('ChatingComponent', () => {
 9 |   let component: ChatingComponent;
10 |   let fixture: ComponentFixture<ChatingComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ ChatingComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(ChatingComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/registration/registration.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | import { By } from '@angular/platform-browser';
 4 | import { DebugElement } from '@angular/core';
 5 | 
 6 | import { RegistrationComponent } from './registration.component';
 7 | 
 8 | describe('RegistrationComponent', () => {
 9 |   let component: RegistrationComponent;
10 |   let fixture: ComponentFixture<RegistrationComponent>;
11 | 
12 |   beforeEach(async(() => {
13 |     TestBed.configureTestingModule({
14 |       declarations: [ RegistrationComponent ]
15 |     })
16 |     .compileComponents();
17 |   }));
18 | 
19 |   beforeEach(() => {
20 |     fixture = TestBed.createComponent(RegistrationComponent);
21 |     component = fixture.componentInstance;
22 |     fixture.detectChanges();
23 |   });
24 | 
25 |   it('should create', () => {
26 |     expect(component).toBeTruthy();
27 |   });
28 | });
29 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
 1 |     <button type="button" class="btn btn-info" (click)="logOut()">Log out</button>
 2 | 
 3 | <div class="container">
 4 |     <div class="page-header">
 5 |         <h1> Welcome: {{current}}</h1>
 6 |     </div>
 7 | </div>
 8 | 
 9 | 
10 | <!--<div class="card">
11 |   <img src="https://www.clickdesk.com/assets/images/press/clickdesk-chat-bubbles-different-formats.png.pagespeed.ce.FCjjoyGLBF.png" alt="Avatar" style="width:100%">
12 |   <div class="container">
13 |     <h4><b>Jane Doe</b></h4> 
14 |     <p>Interior Designer</p> 
15 |   </div>
16 | </div>-->
17 | 
18 | <div class="card" *ngFor="let item of users; let i = index">
19 |   <img src="http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Chat-icon.png" alt="Avatar" style="width:80%">
20 |   <div class="container2">
21 |     <h4><b>{{item.FirstName}} {{item.LastName}}</b></h4> 
22 |     <p>{{item.Email}}</p> 
23 |   </div>
24 |   <button type="button" class="btn btn-success" (click)="go(item,i)">Chat</button>
25 | </div>


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | /* tslint:disable:no-unused-variable */
 2 | 
 3 | import { TestBed, async } from '@angular/core/testing';
 4 | import { AppComponent } from './app.component';
 5 | 
 6 | describe('AppComponent', () => {
 7 |   beforeEach(() => {
 8 |     TestBed.configureTestingModule({
 9 |       declarations: [
10 |         AppComponent
11 |       ],
12 |     });
13 |     TestBed.compileComponents();
14 |   });
15 | 
16 |   it('should create the app', async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app).toBeTruthy();
20 |   }));
21 | 
22 |   it(`should have as title 'app works!'`, async(() => {
23 |     const fixture = TestBed.createComponent(AppComponent);
24 |     const app = fixture.debugElement.componentInstance;
25 |     expect(app.title).toEqual('app works!');
26 |   }));
27 | 
28 |   it('should render title in a h1 tag', async(() => {
29 |     const fixture = TestBed.createComponent(AppComponent);
30 |     fixture.detectChanges();
31 |     const compiled = fixture.debugElement.nativeElement;
32 |     expect(compiled.querySelector('h1').textContent).toContain('app works!');
33 |   }));
34 | });
35 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import './polyfills.ts';
 4 | 
 5 | import 'zone.js/dist/long-stack-trace-zone';
 6 | import 'zone.js/dist/proxy.js';
 7 | import 'zone.js/dist/sync-test';
 8 | import 'zone.js/dist/jasmine-patch';
 9 | import 'zone.js/dist/async-test';
10 | import 'zone.js/dist/fake-async-test';
11 | import { getTestBed } from '@angular/core/testing';
12 | import {
13 |   BrowserDynamicTestingModule,
14 |   platformBrowserDynamicTesting
15 | } from '@angular/platform-browser-dynamic/testing';
16 | 
17 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
18 | declare var __karma__: any;
19 | declare var require: any;
20 | 
21 | // Prevent Karma from running prematurely.
22 | __karma__.loaded = function () {};
23 | 
24 | // First, initialize the Angular testing environment.
25 | getTestBed().initTestEnvironment(
26 |   BrowserDynamicTestingModule,
27 |   platformBrowserDynamicTesting()
28 | );
29 | // Then we find all the tests.
30 | const context = require.context('./', true, /\.spec\.ts$/);
31 | // And load the modules.
32 | context.keys().map(context);
33 | // Finally, start Karma to run the tests.
34 | __karma__.start();
35 | 


--------------------------------------------------------------------------------
/src/app/chating/chating.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <div class="page-header">
 3 |         <h1>Chat</h1>
 4 |     </div>
 5 | </div>
 6 | 
 7 | <br/>
 8 | <ul class="list-group">
 9 |     <!--*ngIf="getKey === 'qzUuEmtZ17bZfuvk0J7NImaw4w72'"-->
10 |     <li class="list-group-item" *ngFor="let item of chats;let i = index;">
11 |         {{item.chat}}
12 |         <br>
13 |         <b *ngIf="item.img">
14 |        <img [src]="item.img" alt="" width="100" height="100">
15 |        </b>
16 |     </li>
17 | </ul>
18 | 
19 | <ul class="list-group">
20 |     <!--*ngIf="getKey === 'qzUuEmtZ17bZfuvk0J7NImaw4w72'"-->
21 |     <li class="list-group-item" *ngFor="let item of chat2;let i = index;">
22 |         {{item.chat}}
23 |         <br>
24 |         <b *ngIf="item.img">
25 |        <img [src]="item.img" alt="" width="100" height="100">
26 |        </b>
27 |     </li>
28 | </ul>
29 | <form action="" id="loginForm">
30 |     <div class="form-group">
31 |         <label for="pwd">Write Something:</label>
32 |         <input type="text" class="form-control" #msg id="pwd">
33 |     </div>
34 |     <button type="submit" class="btn btn-success" (click)='send(msg.value)'>Send</button>
35 | </form>
36 | 
37 | <input type="file" id="userUploadedFile" (change)="upload()">


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ParkingSystem
 2 | 
 3 | This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.26.
 4 | 
 5 | ## Development server
 6 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 7 | 
 8 | ## Code scaffolding
 9 | 
10 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
11 | 
12 | ## Build
13 | 
14 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
15 | 
16 | ## Running unit tests
17 | 
18 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
19 | 
20 | ## Running end-to-end tests
21 | 
22 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
23 | Before running the tests make sure you are serving the app via `ng serve`.
24 | 
25 | ## Deploying to GitHub Pages
26 | 
27 | Run `ng github-pages:deploy` to deploy to GitHub Pages.
28 | 
29 | ## Further help
30 | 
31 | To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
32 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', 'angular-cli'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-remap-istanbul'),
12 |       require('angular-cli/plugins/karma')
13 |     ],
14 |     files: [
15 |       { pattern: './src/test.ts', watched: false }
16 |     ],
17 |     preprocessors: {
18 |       './src/test.ts': ['angular-cli']
19 |     },
20 |     mime: {
21 |       'text/x-typescript': ['ts','tsx']
22 |     },
23 |     remapIstanbulReporter: {
24 |       reports: {
25 |         html: 'coverage',
26 |         lcovonly: './coverage/coverage.lcov'
27 |       }
28 |     },
29 |     angularCli: {
30 |       config: './angular-cli.json',
31 |       environment: 'dev'
32 |     },
33 |     reporters: config.angularCli && config.angularCli.codeCoverage
34 |               ? ['progress', 'karma-remap-istanbul']
35 |               : ['progress'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false
42 |   });
43 | };
44 | 


--------------------------------------------------------------------------------
/angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "project": {
 3 |     "version": "1.0.0-beta.26",
 4 |     "name": "parking-system"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "test": "test.ts",
17 |       "tsconfig": "tsconfig.json",
18 |       "prefix": "app",
19 |       "mobile": false,
20 |       "styles": [
21 |         "styles.css"
22 |       ],
23 |       "scripts": [],
24 |       "environments": {
25 |         "source": "environments/environment.ts",
26 |         "dev": "environments/environment.ts",
27 |         "prod": "environments/environment.prod.ts"
28 |       }
29 |     }
30 |   ],
31 |   "e2e": {
32 |     "protractor": {
33 |       "config": "./protractor.conf.js"
34 |     }
35 |   },
36 |   "test": {
37 |     "karma": {
38 |       "config": "./karma.conf.js"
39 |     }
40 |   },
41 |   "defaults": {
42 |     "styleExt": "css",
43 |     "prefixInterfaces": false,
44 |     "inline": {
45 |       "style": false,
46 |       "template": false
47 |     },
48 |     "spec": {
49 |       "class": false,
50 |       "component": true,
51 |       "directive": true,
52 |       "module": false,
53 |       "pipe": true,
54 |       "service": true
55 |     }
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/app/registration/registration.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AngularFire, FirebaseListObservable, AuthProviders, AuthMethods } from 'angularfire2';
 3 | import { Router } from '@angular/router';
 4 | import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
 5 | 
 6 | 
 7 | @Component({
 8 |     selector: 'app-registration',
 9 |     templateUrl: './registration.component.html',
10 |     styleUrls: ['./registration.component.css']
11 | })
12 | export class RegistrationComponent implements OnInit {
13 | 
14 |     myForm: FormGroup;
15 |     constructor(public af: AngularFire, public router: Router, private fb: FormBuilder) {
16 |         this.myForm = fb.group({
17 |             'FirstName': [''],
18 |             'LastName': [''],
19 |             'Email': [''],
20 |             'Password': [''],
21 |             'Phone': [''],
22 |             'Age': ['']
23 |         });
24 |     }
25 | 
26 |     ngOnInit() {
27 |     }
28 |     signUp(value: any): void {
29 |         this.af.auth.createUser({ email: value.Email, password: value.Password })
30 |             .catch((error: any) => {
31 |                 console.log(error);
32 |             })
33 |             .then((users: any) => {
34 |                 delete value.Password;
35 |                 this.af.database.object('/users/' + users.uid).set(value);
36 |                 localStorage.setItem("key", users.uid)
37 |                 this.router.navigate(['/home']);
38 |             });
39 |     }
40 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parking-system",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "angular-cli": {},
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
10 |     "test": "ng test",
11 |     "pree2e": "webdriver-manager update --standalone false --gecko false",
12 |     "e2e": "protractor"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/common": "^2.3.1",
17 |     "@angular/compiler": "^2.3.1",
18 |     "@angular/core": "^2.3.1",
19 |     "@angular/forms": "^2.3.1",
20 |     "@angular/http": "^2.3.1",
21 |     "@angular/platform-browser": "^2.3.1",
22 |     "@angular/platform-browser-dynamic": "^2.3.1",
23 |     "@angular/router": "^3.3.1",
24 |     "angularfire2": "^2.0.0-beta.7",
25 |     "core-js": "^2.4.1",
26 |     "firebase": "^3.6.7",
27 |     "rxjs": "^5.0.1",
28 |     "ts-helpers": "^1.1.1",
29 |     "zone.js": "^0.7.2"
30 |   },
31 |   "devDependencies": {
32 |     "@angular/compiler-cli": "^2.3.1",
33 |     "@types/jasmine": "2.5.38",
34 |     "@types/node": "^6.0.42",
35 |     "angular-cli": "1.0.0-beta.26",
36 |     "codelyzer": "~2.0.0-beta.1",
37 |     "jasmine-core": "2.5.2",
38 |     "jasmine-spec-reporter": "2.5.0",
39 |     "karma": "1.2.0",
40 |     "karma-chrome-launcher": "^2.0.0",
41 |     "karma-cli": "^1.0.1",
42 |     "karma-jasmine": "^1.0.2",
43 |     "karma-remap-istanbul": "^0.2.1",
44 |     "protractor": "~4.0.13",
45 |     "ts-node": "1.2.1",
46 |     "tslint": "^4.3.0",
47 |     "typescript": "~2.0.3"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/app/login/login.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <div class="page-header">
 3 |         <h1>Project Level 2: Chat app</h1>
 4 |     </div>
 5 | </div>
 6 | <div class="container">
 7 |     <div class="col-sm-4 col-md-4">
 8 |         <form action="" id="loginForm">
 9 |             <div class="form-group input-group">
10 |                 <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
11 |                 <input class="form-control" type="text" name='Email' [formControl]="myForm.controls['Email']" placeholder="Email" />
12 |             </div>
13 |             <div class="form-group input-group">
14 |                 <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
15 |                 <input class="form-control" type="password"  [formControl]="myForm.controls['Password']"  name='password' placeholder="password"
16 |                 />
17 |             </div>
18 |             <div class="form-group">
19 |                 <button type="button" class="btn btn-info btn-block" (click)="login(myForm.value)">Login</button>
20 |             </div>
21 | 
22 |         </form>
23 |         <a routerLink="/register/account" routerLinkActive="active">Create Account</a>
24 |     </div>
25 | </div>
26 | 
27 | <div class="container_table">
28 |     <table class="table" style="color:darkcyan">
29 |         <thead>
30 |             <tr>
31 |                 <th>Email</th>
32 |                 <th>Password</th>
33 |             </tr>
34 |         </thead>
35 |         <tbody>
36 |             <tr>
37 |                 <td>majid@gmail.com</td>
38 |                 <td>123456</td>
39 |             </tr>
40 |             <tr>
41 |                 <td>exam@ple.com</td>
42 |                 <td>112233</td>
43 |             </tr>
44 |         </tbody>
45 |     </table>
46 | </div>
47 | 
48 | 
49 | <div id="err">   </div>


--------------------------------------------------------------------------------
/src/app/login/login.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AngularFire, FirebaseListObservable, AuthProviders, AuthMethods } from 'angularfire2';
 3 | import { Router } from '@angular/router';
 4 | import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
 5 | 
 6 | 
 7 | @Component({
 8 |     selector: 'app-login',
 9 |     templateUrl: './login.component.html',
10 |     styleUrls: ['./login.component.css']
11 | })
12 | export class LoginComponent implements OnInit {
13 | 
14 |     myForm: FormGroup;
15 |     constructor(public af: AngularFire, public router: Router, private fb: FormBuilder) {
16 |         this.myForm = fb.group({
17 |             'Email': [''],
18 |             'Password': ['']
19 |         });
20 |     }
21 | 
22 |     ngOnInit() {
23 |     }
24 | 
25 |     login(value: any): void {
26 |         this.af.auth.login({
27 |             email: value.Email,
28 |             password: value.Password
29 |         },
30 |             {
31 |                 provider: AuthProviders.Password,
32 |                 method: AuthMethods.Password
33 |             })
34 |             .catch((error: any) => {
35 |                 console.log(error);
36 |                 document.getElementById('err').innerHTML = `
37 |                  <div class="alert alert-success alert-dismissible">
38 |             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
39 |                 <strong>Error!</strong> 
40 |                 The password is invalid or the user does not have a password.
41 |                       </div>`
42 |             })
43 |             .then((user: any) => {
44 |                 if (user) {
45 |                     // console.log(user)
46 |                     localStorage.setItem("key", user.uid)
47 |                     this.router.navigate(['/home']);
48 |                 }
49 |             });
50 |     }
51 | }


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AngularFire, FirebaseListObservable, AuthProviders, AuthMethods } from 'angularfire2';
 3 | import { Router } from '@angular/router';
 4 | 
 5 | @Component({
 6 |     selector: 'app-home',
 7 |     templateUrl: './home.component.html',
 8 |     styleUrls: ['./home.component.css']
 9 | })
10 | export class HomeComponent implements OnInit {
11 | 
12 |     getKey: any;
13 |     fb: any
14 |     users: any;
15 |     current: any;
16 |     constructor(private af: AngularFire, public router: Router) {
17 |         this.getKey = localStorage.getItem("key")
18 |         this.fb = this.af.database.list('/users')
19 |         // this.getKey = localStorage.getItem("key")
20 |         // this.items = af.database.object(`/users/${this.getKey}`);
21 |         // this.items.subscribe(item => {
22 |         //     this.obj = {
23 |         //         name: item.FirstName + " " + item.LastName,
24 |         //         mail: item.Email,
25 |         //         type: item.Type
26 |         //     }
27 |         //     // console.log(this.obj.type)
28 |         // })
29 |     }
30 | 
31 |     ngOnInit() {
32 |         // let feedBacks = this.af.database.list('/feedBacks')
33 |         this.fb.subscribe(item => {
34 |             this.users = item
35 |             console.log(item)
36 |             for (let i = 0; i < item.length; i++) {
37 |                 if (item[i].$key === this.getKey) {
38 |                     this.current = item[i].FirstName + " " + item[i].LastName
39 |                     // console.log(this.current)
40 |                 }
41 |             }
42 |         })
43 |     }
44 | 
45 | 
46 |     logOut() {
47 |         this.af.auth.logout();
48 |         localStorage.removeItem("key")
49 |         this.router.navigate(['/login']);
50 |     }
51 | 
52 | 
53 |     go(a, b) {
54 |         console.log("a", a.$key)
55 |         console.log('b', b)
56 |         this.router.navigate(['/chat', { key: a.$key, index: b }]);
57 |     }
58 | }


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 4 | import { HttpModule } from '@angular/http';
 5 | import { RouterModule, Router, Routes } from '@angular/router';
 6 | import { AngularFireModule } from 'angularfire2';
 7 | 
 8 | import { AppComponent } from './app.component';
 9 | import { RegistrationComponent } from './registration/registration.component';
10 | import { LoginComponent } from './login/login.component';
11 | import { HomeComponent } from './home/home.component';
12 | import { ChatingComponent } from './chating/chating.component';
13 | // import { AdminFeedBackComponent } from './admin-feed-back/admin-feed-back.component';
14 | // import { AdminFeedBackComponent } from './admin-feed-back/admin-feed-back.component';
15 | 
16 | 
17 | // Must export the config for firebase
18 | export const firebaseConfig = {
19 |     apiKey: "AIzaSyCuEUXEjn9pLPp08Vude3qmyDS5gYiO2zE",
20 |     authDomain: "chatappangular2-c6a39.firebaseapp.com",
21 |     databaseURL: "https://chatappangular2-c6a39.firebaseio.com",
22 |     storageBucket: "chatappangular2-c6a39.appspot.com",
23 |     messagingSenderId: "9799719803"
24 | };
25 | 
26 | // for routing
27 | const routes: Routes = [
28 |     { path: 'login', component: LoginComponent },
29 |     { path: 'register/account', component: RegistrationComponent },
30 |     { path: 'home', component: HomeComponent },
31 |     { path: 'chat', component: ChatingComponent },
32 |     // { path: 'admin/feedback', component: AdminFeedBackComponent },
33 |     { path: '**', component: LoginComponent } // for redirect
34 | ];
35 | 
36 | 
37 | @NgModule({
38 |     declarations: [
39 |         AppComponent,
40 |         RegistrationComponent,
41 |         LoginComponent,
42 |         HomeComponent,
43 |         ChatingComponent
44 |         // AdminFeedBackComponent
45 |     ],
46 |     imports: [
47 |         BrowserModule,
48 |         RouterModule.forRoot(routes),
49 |         AngularFireModule.initializeApp(firebaseConfig),
50 |         FormsModule,
51 |         ReactiveFormsModule,
52 |         HttpModule
53 |     ],
54 |     providers: [],
55 |     bootstrap: [AppComponent]
56 | })
57 | export class AppModule {
58 |     constructor(private router: Router) {
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/app/registration/registration.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |     <div class="page-header">
 3 |         <h1>Registeration</h1>
 4 |     </div>
 5 | </div>
 6 | <div class="container">
 7 |     <div class="col-sm-6 col-md-4">
 8 |         <form action="" id="loginForm" [formGroup]="myForm">
 9 |             <div class="form-group input-group">
10 |                 <span class="input-group-addon"></span>
11 |                 <input class="form-control" type="text" name='FirstName' [formControl]="myForm.controls['FirstName']" placeholder="First Name"
12 |                 />
13 |             </div>
14 | 
15 |             <div class="form-group input-group">
16 |                 <span class="input-group-addon"></span>
17 |                 <input class="form-control" type="text" name='LastName' [formControl]="myForm.controls['LastName']" placeholder="Last Name"
18 |                 />
19 |             </div>
20 | 
21 |             <div class="form-group input-group">
22 |                 <span class="input-group-addon"> </span>
23 |                 <input class="form-control" type="email" [formControl]="myForm.controls['Email']" name='Email' placeholder="Email" />
24 |             </div>
25 | 
26 |             <div class="form-group input-group">
27 |                 <span class="input-group-addon"></span>
28 |                 <input class="form-control" type="password" name='Password' [formControl]="myForm.controls['Password']" placeholder="Password"
29 |                 />
30 |             </div>
31 | 
32 |             <div class="form-group input-group">
33 |                 <span class="input-group-addon"></span>
34 |                 <input class="form-control" type="number" name='Age' [formControl]="myForm.controls['Age']" placeholder="Age" />
35 |             </div>
36 | 
37 |             <div class="form-group input-group">
38 |                 <span class="input-group-addon"></span>
39 |                 <input class="form-control" type="number" name='Phone' [formControl]="myForm.controls['Phone']" placeholder="Phone" />
40 |             </div>
41 | 
42 |             <div class="form-group">
43 |                 <button type="button" class="btn btn-info btn-block" (click)="signUp(myForm.value)">Submit</button>
44 |             </div>
45 |         </form>
46 |         <a routerLink="/login" routerLinkActive="active">Login</a>
47 |     </div>
48 | </div>


--------------------------------------------------------------------------------
/src/app/chating/chating.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router, ActivatedRoute, Params } from '@angular/router';
 3 | import { AngularFire, FirebaseListObservable, AuthProviders, AuthMethods } from 'angularfire2';
 4 | import * as firebase from 'firebase';
 5 | 
 6 | @Component({
 7 |     selector: 'app-chating',
 8 |     templateUrl: './chating.component.html',
 9 |     styleUrls: ['./chating.component.css']
10 | })
11 | export class ChatingComponent implements OnInit {
12 |     paramsType: any;
13 |     getKey: any;
14 |     fb: any;
15 |     chats: any = [];
16 |     storage: any;
17 |     chat2: any = []
18 |     constructor(private ActivatedRoute: ActivatedRoute, private af: AngularFire) {
19 |         this.getKey = localStorage.getItem("key")
20 |         this.fb = this.af.database.list('/chating')
21 |         this.storage = firebase.storage().ref()
22 |     }
23 | 
24 |     ngOnInit() {
25 |         this.ActivatedRoute.params.subscribe((data: any) => {
26 |             this.paramsType = data
27 |             // console.log(this.paramsType)
28 |             // let slots = this.af.database.list('/park/' + this.paramsType.type)
29 |             // slots.subscribe(item => {
30 |             // this.slots = item
31 |             // })
32 |         });
33 | 
34 |         this.fb.subscribe(item => {
35 |             this.chats = []
36 |             for (let i = 0; i < item.length; i++) {
37 |                 if (item[i].from === this.getKey) {
38 |                     // console.log(item[i])
39 |                     this.chats.push(item[i])
40 |                 } else if (item[i].for === this.getKey) {
41 |                     this.chat2.push(item[i])
42 |                 }
43 |             }
44 |         })
45 |         console.log(this.chats)
46 |     }
47 | 
48 | 
49 | 
50 | 
51 |     upload() {
52 |         console.log("test");
53 |         for (let selectedFile of [(<HTMLInputElement>document.getElementById('userUploadedFile')).files[0]]) {
54 |             if (selectedFile) {
55 |                 var thisRef = this.storage.child(selectedFile.name);
56 |                 thisRef.put(selectedFile).then((snapshot) => {
57 |                     console.log("image uplad ", snapshot.downloadURL);
58 |                     thisRef.getDownloadURL().then(url => {
59 |                         console.log("image url after = " + url);
60 |                         let obj = {
61 |                             from: this.getKey,
62 |                             img: url,
63 |                             for: this.paramsType.key
64 |                         }
65 |                         this.fb.push(obj)
66 |                     })
67 |                 }, (err) => {
68 |                     console.log("Error", err);
69 |                 });
70 |             }
71 |         }
72 |     }
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 |     send(msg) {
81 |         let obj = {
82 |             from: this.getKey,
83 |             chat: msg,
84 |             for: this.paramsType.key
85 |         }
86 |         this.fb.push(obj)
87 |         // firebase.storage().ref().child('http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg')
88 |         // firebase.storage();
89 |         // console.log(obj)
90 |     }
91 | 
92 | }
93 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "callable-types": true,
  7 |     "class-name": true,
  8 |     "comment-format": [
  9 |       true,
 10 |       "check-space"
 11 |     ],
 12 |     "curly": true,
 13 |     "eofline": true,
 14 |     "forin": true,
 15 |     "import-blacklist": [true, "rxjs"],
 16 |     "import-spacing": true,
 17 |     "indent": [
 18 |       true,
 19 |       "spaces"
 20 |     ],
 21 |     "interface-over-type-literal": true,
 22 |     "label-position": true,
 23 |     "max-line-length": [
 24 |       true,
 25 |       140
 26 |     ],
 27 |     "member-access": false,
 28 |     "member-ordering": [
 29 |       true,
 30 |       "static-before-instance",
 31 |       "variables-before-functions"
 32 |     ],
 33 |     "no-arg": true,
 34 |     "no-bitwise": true,
 35 |     "no-console": [
 36 |       true,
 37 |       "debug",
 38 |       "info",
 39 |       "time",
 40 |       "timeEnd",
 41 |       "trace"
 42 |     ],
 43 |     "no-construct": true,
 44 |     "no-debugger": true,
 45 |     "no-duplicate-variable": true,
 46 |     "no-empty": false,
 47 |     "no-empty-interface": true,
 48 |     "no-eval": true,
 49 |     "no-inferrable-types": true,
 50 |     "no-shadowed-variable": true,
 51 |     "no-string-literal": false,
 52 |     "no-string-throw": true,
 53 |     "no-switch-case-fall-through": true,
 54 |     "no-trailing-whitespace": true,
 55 |     "no-unused-expression": true,
 56 |     "no-use-before-declare": true,
 57 |     "no-var-keyword": true,
 58 |     "object-literal-sort-keys": false,
 59 |     "one-line": [
 60 |       true,
 61 |       "check-open-brace",
 62 |       "check-catch",
 63 |       "check-else",
 64 |       "check-whitespace"
 65 |     ],
 66 |     "prefer-const": true,
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "radix": true,
 72 |     "semicolon": [
 73 |       "always"
 74 |     ],
 75 |     "triple-equals": [
 76 |       true,
 77 |       "allow-null-check"
 78 |     ],
 79 |     "typedef-whitespace": [
 80 |       true,
 81 |       {
 82 |         "call-signature": "nospace",
 83 |         "index-signature": "nospace",
 84 |         "parameter": "nospace",
 85 |         "property-declaration": "nospace",
 86 |         "variable-declaration": "nospace"
 87 |       }
 88 |     ],
 89 |     "typeof-compare": true,
 90 |     "unified-signatures": true,
 91 |     "variable-name": false,
 92 |     "whitespace": [
 93 |       true,
 94 |       "check-branch",
 95 |       "check-decl",
 96 |       "check-operator",
 97 |       "check-separator",
 98 |       "check-type"
 99 |     ],
100 | 
101 |     "directive-selector": [true, "attribute", "app", "camelCase"],
102 |     "component-selector": [true, "element", "app", "kebab-case"],
103 |     "use-input-property-decorator": true,
104 |     "use-output-property-decorator": true,
105 |     "use-host-property-decorator": true,
106 |     "no-input-rename": true,
107 |     "no-output-rename": true,
108 |     "use-life-cycle-interface": true,
109 |     "use-pipe-transform-interface": true,
110 |     "component-class-suffix": true,
111 |     "directive-class-suffix": true,
112 |     "no-access-missing-member": true,
113 |     "templates-use-public": true,
114 |     "invoke-injectable": true
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------