From 801ea3c908f79a74e196e691041ad6dcec2935c8 Mon Sep 17 00:00:00 2001 From: david Date: Mon, 13 Nov 2017 14:42:22 +0200 Subject: [PATCH 1/7] cool --- .gitignore | 48 +++--- angular-chat-client/.angular-cli.json | 60 ++++++++ angular-chat-client/.editorconfig | 13 ++ angular-chat-client/.gitignore | 42 ++++++ angular-chat-client/README.md | 27 ++++ angular-chat-client/e2e/app.e2e-spec.ts | 14 ++ angular-chat-client/e2e/app.po.ts | 11 ++ angular-chat-client/e2e/tsconfig.e2e.json | 14 ++ angular-chat-client/karma.conf.js | 33 ++++ angular-chat-client/package.json | 51 +++++++ angular-chat-client/protractor.conf.js | 28 ++++ .../src/app/app-routing.module.ts | 16 ++ angular-chat-client/src/app/app.component.css | 0 .../src/app/app.component.html | 4 + .../src/app/app.component.spec.ts | 27 ++++ angular-chat-client/src/app/app.component.ts | 10 ++ angular-chat-client/src/app/app.module.ts | 26 ++++ .../src/app/chat/chat.component.css | 2 + .../src/app/chat/chat.component.html | 24 +++ .../src/app/chat/chat.component.spec.ts | 25 ++++ .../src/app/chat/chat.component.ts | 46 ++++++ .../user-registration.component.css | 2 + .../user-registration.component.html | 15 ++ .../user-registration.component.spec.ts | 25 ++++ .../user-registration.component.ts | 36 +++++ angular-chat-client/src/assets/.gitkeep | 0 .../src/environments/environment.prod.ts | 3 + .../src/environments/environment.ts | 8 + angular-chat-client/src/favicon.ico | Bin 0 -> 5430 bytes angular-chat-client/src/index.html | 14 ++ angular-chat-client/src/main.ts | 12 ++ angular-chat-client/src/polyfills.ts | 76 ++++++++++ angular-chat-client/src/styles.css | 1 + angular-chat-client/src/test.ts | 32 ++++ angular-chat-client/src/tsconfig.app.json | 14 ++ angular-chat-client/src/tsconfig.spec.json | 20 +++ angular-chat-client/src/typings.d.ts | 5 + angular-chat-client/tsconfig.json | 19 +++ angular-chat-client/tslint.json | 141 ++++++++++++++++++ 39 files changed, 913 insertions(+), 31 deletions(-) create mode 100644 angular-chat-client/.angular-cli.json create mode 100644 angular-chat-client/.editorconfig create mode 100644 angular-chat-client/.gitignore create mode 100644 angular-chat-client/README.md create mode 100644 angular-chat-client/e2e/app.e2e-spec.ts create mode 100644 angular-chat-client/e2e/app.po.ts create mode 100644 angular-chat-client/e2e/tsconfig.e2e.json create mode 100644 angular-chat-client/karma.conf.js create mode 100644 angular-chat-client/package.json create mode 100644 angular-chat-client/protractor.conf.js create mode 100644 angular-chat-client/src/app/app-routing.module.ts create mode 100644 angular-chat-client/src/app/app.component.css create mode 100644 angular-chat-client/src/app/app.component.html create mode 100644 angular-chat-client/src/app/app.component.spec.ts create mode 100644 angular-chat-client/src/app/app.component.ts create mode 100644 angular-chat-client/src/app/app.module.ts create mode 100644 angular-chat-client/src/app/chat/chat.component.css create mode 100644 angular-chat-client/src/app/chat/chat.component.html create mode 100644 angular-chat-client/src/app/chat/chat.component.spec.ts create mode 100644 angular-chat-client/src/app/chat/chat.component.ts create mode 100644 angular-chat-client/src/app/user-registration/user-registration.component.css create mode 100644 angular-chat-client/src/app/user-registration/user-registration.component.html create mode 100644 angular-chat-client/src/app/user-registration/user-registration.component.spec.ts create mode 100644 angular-chat-client/src/app/user-registration/user-registration.component.ts create mode 100644 angular-chat-client/src/assets/.gitkeep create mode 100644 angular-chat-client/src/environments/environment.prod.ts create mode 100644 angular-chat-client/src/environments/environment.ts create mode 100644 angular-chat-client/src/favicon.ico create mode 100644 angular-chat-client/src/index.html create mode 100644 angular-chat-client/src/main.ts create mode 100644 angular-chat-client/src/polyfills.ts create mode 100644 angular-chat-client/src/styles.css create mode 100644 angular-chat-client/src/test.ts create mode 100644 angular-chat-client/src/tsconfig.app.json create mode 100644 angular-chat-client/src/tsconfig.spec.json create mode 100644 angular-chat-client/src/typings.d.ts create mode 100644 angular-chat-client/tsconfig.json create mode 100644 angular-chat-client/tslint.json diff --git a/.gitignore b/.gitignore index 00cbbdf..48a1cb8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,11 @@ # Logs logs *.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* # Runtime data pids *.pid *.seed -*.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov @@ -17,43 +13,33 @@ lib-cov # Coverage directory used by tools like istanbul coverage -# nyc test coverage -.nyc_output - # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release -# Dependency directories +# Dependency directory +# Commenting this out is preferred by some people, see +# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- node_modules/ -jspm_packages/ - -# Typescript v1 declaration files typings/ -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history +# Users Environment Variables +.lock-wscript +.tsdrc -# Output of 'npm pack' -*.tgz +#IDE configuration files +.idea +.vscode -# Yarn Integrity file -.yarn-integrity -# dotenv environment variables file -.env +.DS_Store +dist +dev +docs +lib +test +tools/typings/tsd +tmp diff --git a/angular-chat-client/.angular-cli.json b/angular-chat-client/.angular-cli.json new file mode 100644 index 0000000..5a1cf08 --- /dev/null +++ b/angular-chat-client/.angular-cli.json @@ -0,0 +1,60 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "project": { + "name": "angular-chat-client" + }, + "apps": [ + { + "root": "src", + "outDir": "dist", + "assets": [ + "assets", + "favicon.ico" + ], + "index": "index.html", + "main": "main.ts", + "polyfills": "polyfills.ts", + "test": "test.ts", + "tsconfig": "tsconfig.app.json", + "testTsconfig": "tsconfig.spec.json", + "prefix": "app", + "styles": [ + "styles.css" + ], + "scripts": [], + "environmentSource": "environments/environment.ts", + "environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" + } + } + ], + "e2e": { + "protractor": { + "config": "./protractor.conf.js" + } + }, + "lint": [ + { + "project": "src/tsconfig.app.json", + "exclude": "**/node_modules/**" + }, + { + "project": "src/tsconfig.spec.json", + "exclude": "**/node_modules/**" + }, + { + "project": "e2e/tsconfig.e2e.json", + "exclude": "**/node_modules/**" + } + ], + "test": { + "karma": { + "config": "./karma.conf.js" + } + }, + "defaults": { + "styleExt": "css", + "component": {} + } +} diff --git a/angular-chat-client/.editorconfig b/angular-chat-client/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/angular-chat-client/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/angular-chat-client/.gitignore b/angular-chat-client/.gitignore new file mode 100644 index 0000000..54bfd20 --- /dev/null +++ b/angular-chat-client/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc + +# dependencies +/node_modules + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +testem.log +/typings + +# e2e +/e2e/*.js +/e2e/*.map + +# System Files +.DS_Store +Thumbs.db diff --git a/angular-chat-client/README.md b/angular-chat-client/README.md new file mode 100644 index 0000000..82e5c97 --- /dev/null +++ b/angular-chat-client/README.md @@ -0,0 +1,27 @@ +# AngularChatClient + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0. + +## Development server + +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. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +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. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). + +## Further help + +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). diff --git a/angular-chat-client/e2e/app.e2e-spec.ts b/angular-chat-client/e2e/app.e2e-spec.ts new file mode 100644 index 0000000..81b5854 --- /dev/null +++ b/angular-chat-client/e2e/app.e2e-spec.ts @@ -0,0 +1,14 @@ +import { AppPage } from './app.po'; + +describe('angular-chat-client App', () => { + let page: AppPage; + + beforeEach(() => { + page = new AppPage(); + }); + + it('should display welcome message', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('Welcome to app!'); + }); +}); diff --git a/angular-chat-client/e2e/app.po.ts b/angular-chat-client/e2e/app.po.ts new file mode 100644 index 0000000..82ea75b --- /dev/null +++ b/angular-chat-client/e2e/app.po.ts @@ -0,0 +1,11 @@ +import { browser, by, element } from 'protractor'; + +export class AppPage { + navigateTo() { + return browser.get('/'); + } + + getParagraphText() { + return element(by.css('app-root h1')).getText(); + } +} diff --git a/angular-chat-client/e2e/tsconfig.e2e.json b/angular-chat-client/e2e/tsconfig.e2e.json new file mode 100644 index 0000000..1d9e5ed --- /dev/null +++ b/angular-chat-client/e2e/tsconfig.e2e.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/e2e", + "baseUrl": "./", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "jasminewd2", + "node" + ] + } +} diff --git a/angular-chat-client/karma.conf.js b/angular-chat-client/karma.conf.js new file mode 100644 index 0000000..af139fa --- /dev/null +++ b/angular-chat-client/karma.conf.js @@ -0,0 +1,33 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular/cli'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular/cli/plugins/karma') + ], + client:{ + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true + }, + angularCli: { + environment: 'dev' + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/angular-chat-client/package.json b/angular-chat-client/package.json new file mode 100644 index 0000000..f02280b --- /dev/null +++ b/angular-chat-client/package.json @@ -0,0 +1,51 @@ +{ + "name": "angular-chat-client", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@angular/animations": "^5.0.0", + "@angular/common": "^5.0.0", + "@angular/compiler": "^5.0.0", + "@angular/core": "^5.0.0", + "@angular/forms": "^5.0.0", + "@angular/http": "^5.0.0", + "@angular/platform-browser": "^5.0.0", + "@angular/platform-browser-dynamic": "^5.0.0", + "@angular/router": "^5.0.0", + "@types/node": "^6.0.90", + "core-js": "^2.4.1", + "rxjs": "^5.5.2", + "socket.io": "^2.0.4", + "zone.js": "^0.8.14" + }, + "devDependencies": { + "@angular/cli": "1.5.0", + "@angular/compiler-cli": "^5.0.0", + "@angular/language-service": "^5.0.0", + "@types/jasmine": "~2.5.53", + "@types/jasminewd2": "~2.0.2", + "@types/node": "~6.0.60", + "codelyzer": "~3.2.0", + "jasmine-core": "~2.6.2", + "jasmine-spec-reporter": "~4.1.0", + "karma": "~1.7.0", + "karma-chrome-launcher": "~2.1.1", + "karma-cli": "~1.0.1", + "karma-coverage-istanbul-reporter": "^1.2.1", + "karma-jasmine": "~1.1.0", + "karma-jasmine-html-reporter": "^0.2.2", + "protractor": "~5.1.2", + "ts-node": "~3.2.0", + "tslint": "~5.7.0", + "typescript": "~2.4.2" + } +} diff --git a/angular-chat-client/protractor.conf.js b/angular-chat-client/protractor.conf.js new file mode 100644 index 0000000..7ee3b5e --- /dev/null +++ b/angular-chat-client/protractor.conf.js @@ -0,0 +1,28 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +const { SpecReporter } = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './e2e/**/*.e2e-spec.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + onPrepare() { + require('ts-node').register({ + project: 'e2e/tsconfig.e2e.json' + }); + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + } +}; diff --git a/angular-chat-client/src/app/app-routing.module.ts b/angular-chat-client/src/app/app-routing.module.ts new file mode 100644 index 0000000..38979a1 --- /dev/null +++ b/angular-chat-client/src/app/app-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { ChatComponent } from './chat/chat.component'; +import { UserRegistrationComponent } from './user-registration/user-registration.component'; + +const routes: Routes = [ + { path: '', redirectTo: '/registration', pathMatch: 'full' }, + { path: 'chat', component: ChatComponent }, + { path: 'registration', component: UserRegistrationComponent } +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] +}) +export class AppRoutingModule {} diff --git a/angular-chat-client/src/app/app.component.css b/angular-chat-client/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular-chat-client/src/app/app.component.html b/angular-chat-client/src/app/app.component.html new file mode 100644 index 0000000..df1170c --- /dev/null +++ b/angular-chat-client/src/app/app.component.html @@ -0,0 +1,4 @@ + + + + diff --git a/angular-chat-client/src/app/app.component.spec.ts b/angular-chat-client/src/app/app.component.spec.ts new file mode 100644 index 0000000..bcbdf36 --- /dev/null +++ b/angular-chat-client/src/app/app.component.spec.ts @@ -0,0 +1,27 @@ +import { TestBed, async } from '@angular/core/testing'; +import { AppComponent } from './app.component'; +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); + })); +}); diff --git a/angular-chat-client/src/app/app.component.ts b/angular-chat-client/src/app/app.component.ts new file mode 100644 index 0000000..7b0f672 --- /dev/null +++ b/angular-chat-client/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = 'app'; +} diff --git a/angular-chat-client/src/app/app.module.ts b/angular-chat-client/src/app/app.module.ts new file mode 100644 index 0000000..4c89a95 --- /dev/null +++ b/angular-chat-client/src/app/app.module.ts @@ -0,0 +1,26 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + + +import { AppComponent } from './app.component'; +import { UserRegistrationComponent } from './user-registration/user-registration.component'; +import { ChatComponent } from './chat/chat.component'; +import { AppRoutingModule } from './/app-routing.module'; +import { FormsModule } from '@angular/forms'; + + +@NgModule({ + declarations: [ + AppComponent, + UserRegistrationComponent, + ChatComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + FormsModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/angular-chat-client/src/app/chat/chat.component.css b/angular-chat-client/src/app/chat/chat.component.css new file mode 100644 index 0000000..bea8b9e --- /dev/null +++ b/angular-chat-client/src/app/chat/chat.component.css @@ -0,0 +1,2 @@ +.userLabel{font-weight:bold;color:#26A69A;margin-right:10px} +.chatContainer{height:85%;padding:15px;overflow-y:auto } diff --git a/angular-chat-client/src/app/chat/chat.component.html b/angular-chat-client/src/app/chat/chat.component.html new file mode 100644 index 0000000..77fd595 --- /dev/null +++ b/angular-chat-client/src/app/chat/chat.component.html @@ -0,0 +1,24 @@ +
+
+
    +
  • +
    + {{msg.userName}}: + {{msg.text}} +
    +
    + {{msg.text}} +
    +
    • +
+
+
+
+ +
+ +
+
diff --git a/angular-chat-client/src/app/chat/chat.component.spec.ts b/angular-chat-client/src/app/chat/chat.component.spec.ts new file mode 100644 index 0000000..1f642f2 --- /dev/null +++ b/angular-chat-client/src/app/chat/chat.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChatComponent } from './chat.component'; + +describe('ChatComponent', () => { + let component: ChatComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ChatComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ChatComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular-chat-client/src/app/chat/chat.component.ts b/angular-chat-client/src/app/chat/chat.component.ts new file mode 100644 index 0000000..76a5edf --- /dev/null +++ b/angular-chat-client/src/app/chat/chat.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { io } from 'socket.io'; + +@Component({ + selector: 'app-chat', + templateUrl: './chat.component.html', + styleUrls: ['./chat.component.css'], + encapsulation: ViewEncapsulation.None +}) +export class ChatComponent implements OnInit { + message = ''; + conversation = []; + socket = null; + + constructor( + private _router: Router){} + + ngOnInit() { + if (sessionStorage.getItem("userName") === null){ + this._router.navigate(['Registration']); + } + this.socket = io('http://localhost:8000'); + this.socket.on('chatUpdate', function(data) { + this.conversation.push(data); + }.bind(this)); + } + + send() { + this.socket.emit('newMessage', { + 'userName': sessionStorage.getItem("userName"), + 'text': this.message + }); + this.message = ''; + } + + keypressHandler(event) { + if (event.keyCode === 13){ + this.send(); + } + } + + isNewUserAlert(data){ + return data.userName === ''; + } +} diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.css b/angular-chat-client/src/app/user-registration/user-registration.component.css new file mode 100644 index 0000000..b354686 --- /dev/null +++ b/angular-chat-client/src/app/user-registration/user-registration.component.css @@ -0,0 +1,2 @@ +.registrationContainer{margin-top:20%;padding:15px;box-shadow: 3px 2px 7px -1px} +.registrationContainer button{float: right;} diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.html b/angular-chat-client/src/app/user-registration/user-registration.component.html new file mode 100644 index 0000000..a87e178 --- /dev/null +++ b/angular-chat-client/src/app/user-registration/user-registration.component.html @@ -0,0 +1,15 @@ +
+
+
+
+ + +
+
+ +
+
+
diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.spec.ts b/angular-chat-client/src/app/user-registration/user-registration.component.spec.ts new file mode 100644 index 0000000..39b3cb3 --- /dev/null +++ b/angular-chat-client/src/app/user-registration/user-registration.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserRegistrationComponent } from './user-registration.component'; + +describe('UserRegistrationComponent', () => { + let component: UserRegistrationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserRegistrationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserRegistrationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.ts b/angular-chat-client/src/app/user-registration/user-registration.component.ts new file mode 100644 index 0000000..90bf7e4 --- /dev/null +++ b/angular-chat-client/src/app/user-registration/user-registration.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { io } from 'socket.io'; + +@Component({ + selector: 'app-user-registration', + templateUrl: './user-registration.component.html', + styleUrls: ['./user-registration.component.css'], + encapsulation: ViewEncapsulation.None +}) +export class UserRegistrationComponent implements OnInit { + + constructor(private _router: Router) { } + + ngOnInit() { + this.socket = io('http://localhost:8000'); + } + + userName = ''; + socket = null; + + login() { + if (this.userName !== null){ + sessionStorage.setItem("userName", this.userName); + this._router.navigate(['Chat']); + this.socket.emit('newUser', this.userName); + } + } + + keypressHandler(event) { + if (event.keyCode === 13){ + this.login(); + } + } + +} diff --git a/angular-chat-client/src/assets/.gitkeep b/angular-chat-client/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/angular-chat-client/src/environments/environment.prod.ts b/angular-chat-client/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/angular-chat-client/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/angular-chat-client/src/environments/environment.ts b/angular-chat-client/src/environments/environment.ts new file mode 100644 index 0000000..b7f639a --- /dev/null +++ b/angular-chat-client/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `.angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/angular-chat-client/src/favicon.ico b/angular-chat-client/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- + + + + AngularChatClient + + + + + + + + + diff --git a/angular-chat-client/src/main.ts b/angular-chat-client/src/main.ts new file mode 100644 index 0000000..91ec6da --- /dev/null +++ b/angular-chat-client/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/angular-chat-client/src/polyfills.ts b/angular-chat-client/src/polyfills.ts new file mode 100644 index 0000000..20d4075 --- /dev/null +++ b/angular-chat-client/src/polyfills.ts @@ -0,0 +1,76 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; + + +/** Evergreen browsers require these. **/ +// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +import 'core-js/es7/reflect'; + + +/** + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/angular-chat-client/src/styles.css b/angular-chat-client/src/styles.css new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/angular-chat-client/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/angular-chat-client/src/test.ts b/angular-chat-client/src/test.ts new file mode 100644 index 0000000..cd612ee --- /dev/null +++ b/angular-chat-client/src/test.ts @@ -0,0 +1,32 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/long-stack-trace-zone'; +import 'zone.js/dist/proxy.js'; +import 'zone.js/dist/sync-test'; +import 'zone.js/dist/jasmine-patch'; +import 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. +declare const __karma__: any; +declare const require: any; + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/angular-chat-client/src/tsconfig.app.json b/angular-chat-client/src/tsconfig.app.json new file mode 100644 index 0000000..f57a1b1 --- /dev/null +++ b/angular-chat-client/src/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "baseUrl": "./", + "module": "es2015", + "experimentalDecorators": true, + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/angular-chat-client/src/tsconfig.spec.json b/angular-chat-client/src/tsconfig.spec.json new file mode 100644 index 0000000..63d89ff --- /dev/null +++ b/angular-chat-client/src/tsconfig.spec.json @@ -0,0 +1,20 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "baseUrl": "./", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/angular-chat-client/src/typings.d.ts b/angular-chat-client/src/typings.d.ts new file mode 100644 index 0000000..ef5c7bd --- /dev/null +++ b/angular-chat-client/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/angular-chat-client/tsconfig.json b/angular-chat-client/tsconfig.json new file mode 100644 index 0000000..a6c016b --- /dev/null +++ b/angular-chat-client/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2017", + "dom" + ] + } +} diff --git a/angular-chat-client/tslint.json b/angular-chat-client/tslint.json new file mode 100644 index 0000000..c24dc29 --- /dev/null +++ b/angular-chat-client/tslint.json @@ -0,0 +1,141 @@ +{ + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "arrow-return-shorthand": true, + "callable-types": true, + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "import-blacklist": [ + true, + "rxjs", + "rxjs/Rx" + ], + "import-spacing": true, + "indent": [ + true, + "spaces" + ], + "interface-over-type-literal": true, + "label-position": true, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-super": true, + "no-empty": false, + "no-empty-interface": true, + "no-eval": true, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-misused-new": true, + "no-non-null-assertion": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-string-throw": true, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unnecessary-initializer": true, + "no-unused-expression": true, + "no-use-before-declare": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "prefer-const": true, + "quotemark": [ + true, + "single" + ], + "radix": true, + "semicolon": [ + true, + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "typeof-compare": true, + "unified-signatures": true, + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ], + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ], + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + "component-class-suffix": true, + "directive-class-suffix": true, + "invoke-injectable": true + } +} From 3e00f520f1817d77f47e56de710a857ddfb9ede5 Mon Sep 17 00:00:00 2001 From: david Date: Mon, 13 Nov 2017 16:30:38 +0200 Subject: [PATCH 2/7] cool --- angular-chat-client/package.json | 1 + angular-chat-client/server/package.json | 18 ++++++++++ angular-chat-client/server/server.js | 34 +++++++++++++++++++ .../src/app/app.component.html | 3 +- .../src/app/chat/chat.component.ts | 6 ++-- .../user-registration.component.html | 6 ++-- .../user-registration.component.ts | 4 +-- 7 files changed, 63 insertions(+), 9 deletions(-) create mode 100644 angular-chat-client/server/package.json create mode 100644 angular-chat-client/server/server.js diff --git a/angular-chat-client/package.json b/angular-chat-client/package.json index f02280b..4f02ab7 100644 --- a/angular-chat-client/package.json +++ b/angular-chat-client/package.json @@ -25,6 +25,7 @@ "core-js": "^2.4.1", "rxjs": "^5.5.2", "socket.io": "^2.0.4", + "socket.io-client": "^2.0.4", "zone.js": "^0.8.14" }, "devDependencies": { diff --git a/angular-chat-client/server/package.json b/angular-chat-client/server/package.json new file mode 100644 index 0000000..8cd344f --- /dev/null +++ b/angular-chat-client/server/package.json @@ -0,0 +1,18 @@ +{ + "name": "chat", + "version": "1.0.0", + "main": "server.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js" + }, + "author": "", + "license": "ISC", + "description": "", + "dependencies": { + "express": "^4.16.2", + "jquery": "^3.2.1", + "path": "^0.12.7", + "socket.io": "^2.0.4" + } +} diff --git a/angular-chat-client/server/server.js b/angular-chat-client/server/server.js new file mode 100644 index 0000000..e15f301 --- /dev/null +++ b/angular-chat-client/server/server.js @@ -0,0 +1,34 @@ +var express = require('express'); +var app = express(); +var http = require('http').Server(app); +var io = require('socket.io')(http); +var path = require('path'); + +var commands = [ + {command: '/setColor', style: 'color: '}, + {command: '/setBold' , style: 'font-weight: bold'}, + {command: '/setItalic' , style: 'font-style: italic;'} +]; + +app.use(express.static(path.join(__dirname, 'public'))); + +// app.get('/', function(req, res){ +// res.sendFile(__dirname + '/public/views/index.html'); +// }); + +io.on('connection', function (socket) { // line 12 + socket.on('newMessage', function (data) { + socket.emit('chatUpdate',data); + socket.broadcast.emit('chatUpdate',data); + }); + socket.on('newUser', function (data) { + socket.emit('chatUpdate', + {'userName':'','text':data+' has entered the room'}); + socket.broadcast.emit('chatUpdate', + {'userName':'','text':data+' has entered the room'}); + }); +}); + +http.listen(3000, function(){ + console.log('listening on *:3000'); +}); diff --git a/angular-chat-client/src/app/app.component.html b/angular-chat-client/src/app/app.component.html index df1170c..33e13e9 100644 --- a/angular-chat-client/src/app/app.component.html +++ b/angular-chat-client/src/app/app.component.html @@ -1,4 +1,5 @@ - + + diff --git a/angular-chat-client/src/app/chat/chat.component.ts b/angular-chat-client/src/app/chat/chat.component.ts index 76a5edf..4fcb44b 100644 --- a/angular-chat-client/src/app/chat/chat.component.ts +++ b/angular-chat-client/src/app/chat/chat.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; -import { io } from 'socket.io'; +import * as io from 'socket.io-client'; @Component({ selector: 'app-chat', @@ -18,9 +18,9 @@ export class ChatComponent implements OnInit { ngOnInit() { if (sessionStorage.getItem("userName") === null){ - this._router.navigate(['Registration']); + this._router.navigate(['registration']); } - this.socket = io('http://localhost:8000'); + this.socket = io('http://localhost:3000'); this.socket.on('chatUpdate', function(data) { this.conversation.push(data); }.bind(this)); diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.html b/angular-chat-client/src/app/user-registration/user-registration.component.html index a87e178..c989127 100644 --- a/angular-chat-client/src/app/user-registration/user-registration.component.html +++ b/angular-chat-client/src/app/user-registration/user-registration.component.html @@ -1,10 +1,10 @@
-
+
- + type="text" (keypress)="keypressHandler($event)" class="validate" + placeholder="Enter your name here">
+
+ +
diff --git a/angular-chat-client/src/app/chat/chat.component.ts b/angular-chat-client/src/app/chat/chat.component.ts index 13b39bb..d28e7f6 100644 --- a/angular-chat-client/src/app/chat/chat.component.ts +++ b/angular-chat-client/src/app/chat/chat.component.ts @@ -13,8 +13,7 @@ export class ChatComponent implements OnInit { conversation = []; socket = null; - constructor( - private _router: Router){} + constructor(private _router: Router){} ngOnInit() { if (sessionStorage.getItem("userName") === null){ @@ -29,7 +28,8 @@ export class ChatComponent implements OnInit { send() { this.socket.emit('newMessage', { 'userName': sessionStorage.getItem("userName"), - 'text': this.message + 'text': this.message, + 'roomName': sessionStorage.getItem("roomName") }); this.message = ''; } @@ -43,4 +43,12 @@ export class ChatComponent implements OnInit { isMineMessage(data){ return data.userName === sessionStorage.getItem("userName"); } + + isNewUserAlert(data){ + return data.userName === ''; + } + + navToRooms() { + this._router.navigate(['rooms']); + } } diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.ts b/angular-chat-client/src/app/user-registration/user-registration.component.ts index 59f6c04..2d0126e 100644 --- a/angular-chat-client/src/app/user-registration/user-registration.component.ts +++ b/angular-chat-client/src/app/user-registration/user-registration.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; -import { io } from 'socket.io'; +import * as io from 'socket.io-client'; @Component({ selector: 'app-user-registration', @@ -22,8 +22,7 @@ export class UserRegistrationComponent implements OnInit { login() { if (this.userName !== null){ sessionStorage.setItem("userName", this.userName); - this._router.navigate(['chat']); - this.socket.emit('newUser', this.userName); + this._router.navigate(['rooms']); } } From 6501c482a21c86e835436406b2190778ca96fd52 Mon Sep 17 00:00:00 2001 From: david Date: Tue, 14 Nov 2017 11:19:22 +0200 Subject: [PATCH 5/7] cool --- .../src/app/room/room.component.css | 4 ++ .../src/app/room/room.component.html | 14 +++++++ .../src/app/room/room.component.spec.ts | 25 +++++++++++ .../src/app/room/room.component.ts | 41 +++++++++++++++++++ 4 files changed, 84 insertions(+) create mode 100644 angular-chat-client/src/app/room/room.component.css create mode 100644 angular-chat-client/src/app/room/room.component.html create mode 100644 angular-chat-client/src/app/room/room.component.spec.ts create mode 100644 angular-chat-client/src/app/room/room.component.ts diff --git a/angular-chat-client/src/app/room/room.component.css b/angular-chat-client/src/app/room/room.component.css new file mode 100644 index 0000000..1b6d3d1 --- /dev/null +++ b/angular-chat-client/src/app/room/room.component.css @@ -0,0 +1,4 @@ +.room-list{ + width: 30%; + margin-top: 10%; +} diff --git a/angular-chat-client/src/app/room/room.component.html b/angular-chat-client/src/app/room/room.component.html new file mode 100644 index 0000000..4dccfe9 --- /dev/null +++ b/angular-chat-client/src/app/room/room.component.html @@ -0,0 +1,14 @@ +
+
    +
  • +
    + +
    +
    +
    {{ room.name }}
    +
    +
    • +
+
+ + diff --git a/angular-chat-client/src/app/room/room.component.spec.ts b/angular-chat-client/src/app/room/room.component.spec.ts new file mode 100644 index 0000000..3f233c3 --- /dev/null +++ b/angular-chat-client/src/app/room/room.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoomsComponent } from './room.component'; + +describe('RoomsComponent', () => { + let component: RoomsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoomsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoomsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular-chat-client/src/app/room/room.component.ts b/angular-chat-client/src/app/room/room.component.ts new file mode 100644 index 0000000..ab08833 --- /dev/null +++ b/angular-chat-client/src/app/room/room.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; +import { ChatComponent } from '../chat/chat.component'; +import * as io from 'socket.io-client'; + +@Component({ + selector: 'app-rooms', + templateUrl: './room.component.html', + styleUrls: ['./room.component.css'], + encapsulation: ViewEncapsulation.None +}) +export class RoomsComponent implements OnInit { + socket = null; + private rooms = [ + { name:'room1', users:[]}, + { name:'room2', users:[]}, + { name:'room3', users:[]} + ]; + + constructor(private _router: Router) { } + + ngOnInit() { + if (sessionStorage.getItem("userName") === null){ + this._router.navigate(['registration']); + } + this.socket = io('http://localhost:3000'); + } + + chooseRoom(room){ + let userName = sessionStorage.getItem("userName"); + let oldRoomName = sessionStorage.getItem("roomName"); + if (oldRoomName){ + this.socket.emit('leaveOldRoom'); + } + sessionStorage.setItem("roomName", room.name); + //room.users.push(userName); + this._router.navigate(['chat']); + this.socket.emit('joinRoom', room.name) + this.socket.emit('newUser', userName); + } +} From 3e790dd830bd2f2fa27bd19e97a86a0893dcaf2b Mon Sep 17 00:00:00 2001 From: david Date: Tue, 14 Nov 2017 15:24:24 +0200 Subject: [PATCH 6/7] cool --- angular-chat-client/server/server.js | 19 ++++----- angular-chat-client/src/app/app.component.css | 1 + angular-chat-client/src/app/app.module.ts | 3 +- .../src/app/chat/chat.component.css | 5 +++ .../src/app/chat/chat.component.html | 27 ++++++++---- .../src/app/chat/chat.component.ts | 19 ++++----- .../src/app/room/room.component.css | 2 +- .../src/app/room/room.component.html | 6 +-- .../src/app/room/room.component.ts | 20 ++++----- .../src/app/sockets.service.spec.ts | 15 +++++++ .../src/app/sockets.service.ts | 42 +++++++++++++++++++ .../user-registration.component.ts | 4 +- 12 files changed, 115 insertions(+), 48 deletions(-) create mode 100644 angular-chat-client/src/app/sockets.service.spec.ts create mode 100644 angular-chat-client/src/app/sockets.service.ts diff --git a/angular-chat-client/server/server.js b/angular-chat-client/server/server.js index 35575c5..5907bfc 100644 --- a/angular-chat-client/server/server.js +++ b/angular-chat-client/server/server.js @@ -7,19 +7,18 @@ var path = require('path'); app.use(express.static(path.join(__dirname, 'public'))); io.on('connection', function (socket) { - socket.on('leaveOldRoom', function (room) { - socket.leave(room); + socket.on('leaveRoom', function (data) { + socket.to(data.roomName).emit('chatUpdate', {'userName':'','text':data.userName+' has left the room'}); + socket.leave(data.roomName); }); - socket.on('joinRoom', function (room) { - socket.join(room); + socket.on('joinRoom', function (data) { + socket.join(data.roomName); + socket.to(data.roomName).emit('chatUpdate', + {'userName':'','text':data.userName+' has joined the room'}); }); socket.on('newMessage',function (data) { - socket.to(data.roomName).emit('chatUpdate',data.slice(2)); - socket.to(data.roomName).broadcast.emit('chatUpdate',data.slice(2)); - }); - socket.on('newUser', function (data) { - socket.broadcast.emit('chatUpdate', - {'userName':'','text':data+' has entered the room'}); + var dataWithoutRoom = {'userName':data.userName,'text':data.text, 'msgDate':data.msgDate} + io.in(data.roomName).emit('chatUpdate',dataWithoutRoom); }); }); diff --git a/angular-chat-client/src/app/app.component.css b/angular-chat-client/src/app/app.component.css index e69de29..8b13789 100644 --- a/angular-chat-client/src/app/app.component.css +++ b/angular-chat-client/src/app/app.component.css @@ -0,0 +1 @@ + diff --git a/angular-chat-client/src/app/app.module.ts b/angular-chat-client/src/app/app.module.ts index ebcd853..2f979e7 100644 --- a/angular-chat-client/src/app/app.module.ts +++ b/angular-chat-client/src/app/app.module.ts @@ -8,6 +8,7 @@ import { ChatComponent } from './chat/chat.component'; import { AppRoutingModule } from './/app-routing.module'; import { FormsModule } from '@angular/forms'; import { RoomsComponent } from './room/room.component'; +import { SocketsService } from './sockets.service'; @NgModule({ @@ -22,7 +23,7 @@ import { RoomsComponent } from './room/room.component'; AppRoutingModule, FormsModule ], - providers: [], + providers: [SocketsService], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/angular-chat-client/src/app/chat/chat.component.css b/angular-chat-client/src/app/chat/chat.component.css index bea8b9e..d641c2d 100644 --- a/angular-chat-client/src/app/chat/chat.component.css +++ b/angular-chat-client/src/app/chat/chat.component.css @@ -1,2 +1,7 @@ .userLabel{font-weight:bold;color:#26A69A;margin-right:10px} .chatContainer{height:85%;padding:15px;overflow-y:auto } +.heading{ + width: 40%;} +.msgDate{ + color: blue; +} diff --git a/angular-chat-client/src/app/chat/chat.component.html b/angular-chat-client/src/app/chat/chat.component.html index d447271..d1d97d2 100644 --- a/angular-chat-client/src/app/chat/chat.component.html +++ b/angular-chat-client/src/app/chat/chat.component.html @@ -1,33 +1,42 @@ -
-
+
+
+

{{roomName}}

+
+
+
+
  • {{msg.userName}}: {{msg.text}} + {{msg.msgDate}}
    {{msg.text}} + {{msg.msgDate}}
    - {{msg.text}} +
    {{msg.text}}
-
+
+ class="btn waves-effect waves-light col s1" name="action" >Send +
+
+
+ +
-
-
-
diff --git a/angular-chat-client/src/app/chat/chat.component.ts b/angular-chat-client/src/app/chat/chat.component.ts index d28e7f6..18254cd 100644 --- a/angular-chat-client/src/app/chat/chat.component.ts +++ b/angular-chat-client/src/app/chat/chat.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; import * as io from 'socket.io-client'; +import { SocketsService } from '../sockets.service'; @Component({ selector: 'app-chat', @@ -11,26 +12,24 @@ import * as io from 'socket.io-client'; export class ChatComponent implements OnInit { message = ''; conversation = []; - socket = null; - - constructor(private _router: Router){} + roomName = null; + constructor(private _router: Router, private _sockets:SocketsService){} ngOnInit() { if (sessionStorage.getItem("userName") === null){ this._router.navigate(['registration']); } - this.socket = io('http://localhost:3000'); - this.socket.on('chatUpdate', function(data) { + this._sockets.socket.on('chatUpdate', function(data) { this.conversation.push(data); }.bind(this)); + + this.roomName = sessionStorage.getItem("roomName"); } send() { - this.socket.emit('newMessage', { - 'userName': sessionStorage.getItem("userName"), - 'text': this.message, - 'roomName': sessionStorage.getItem("roomName") - }); + this._sockets.newMessage(sessionStorage.getItem("userName"), + sessionStorage.getItem("roomName"), + this.message) this.message = ''; } diff --git a/angular-chat-client/src/app/room/room.component.css b/angular-chat-client/src/app/room/room.component.css index 1b6d3d1..9f9f9a8 100644 --- a/angular-chat-client/src/app/room/room.component.css +++ b/angular-chat-client/src/app/room/room.component.css @@ -1,4 +1,4 @@ .room-list{ - width: 30%; + width: 50%; margin-top: 10%; } diff --git a/angular-chat-client/src/app/room/room.component.html b/angular-chat-client/src/app/room/room.component.html index 4dccfe9..cdf1113 100644 --- a/angular-chat-client/src/app/room/room.component.html +++ b/angular-chat-client/src/app/room/room.component.html @@ -1,10 +1,10 @@
    -
  • -
    +
  • +
    -
    +
    {{ room.name }}
    • diff --git a/angular-chat-client/src/app/room/room.component.ts b/angular-chat-client/src/app/room/room.component.ts index ab08833..2ddacca 100644 --- a/angular-chat-client/src/app/room/room.component.ts +++ b/angular-chat-client/src/app/room/room.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; -import { ChatComponent } from '../chat/chat.component'; -import * as io from 'socket.io-client'; +import { SocketsService } from '../sockets.service'; @Component({ selector: 'app-rooms', @@ -12,30 +11,27 @@ import * as io from 'socket.io-client'; export class RoomsComponent implements OnInit { socket = null; private rooms = [ - { name:'room1', users:[]}, - { name:'room2', users:[]}, - { name:'room3', users:[]} + { name:'Cool guys room'}, + { name:'Room of the kings'}, + { name:'Some lame room'} ]; - constructor(private _router: Router) { } + constructor(private _router: Router, private _sockets: SocketsService) { } ngOnInit() { if (sessionStorage.getItem("userName") === null){ this._router.navigate(['registration']); } - this.socket = io('http://localhost:3000'); } chooseRoom(room){ - let userName = sessionStorage.getItem("userName"); let oldRoomName = sessionStorage.getItem("roomName"); if (oldRoomName){ - this.socket.emit('leaveOldRoom'); + this._sockets.leaveRoom(oldRoomName, sessionStorage.getItem("userName")); } + + this._sockets.joinRoom(room.name, sessionStorage.getItem("userName")); sessionStorage.setItem("roomName", room.name); - //room.users.push(userName); this._router.navigate(['chat']); - this.socket.emit('joinRoom', room.name) - this.socket.emit('newUser', userName); } } diff --git a/angular-chat-client/src/app/sockets.service.spec.ts b/angular-chat-client/src/app/sockets.service.spec.ts new file mode 100644 index 0000000..e082413 --- /dev/null +++ b/angular-chat-client/src/app/sockets.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { SocketsService } from './sockets.service'; + +describe('SocketsService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [SocketsService] + }); + }); + + it('should be created', inject([SocketsService], (service: SocketsService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/angular-chat-client/src/app/sockets.service.ts b/angular-chat-client/src/app/sockets.service.ts new file mode 100644 index 0000000..f445836 --- /dev/null +++ b/angular-chat-client/src/app/sockets.service.ts @@ -0,0 +1,42 @@ +import { Injectable } from '@angular/core'; +import * as io from 'socket.io-client'; + +@Injectable() +export class SocketsService { + socket = null; + + constructor() { + this.socket = io('http://localhost:3000'); + } + + public joinRoom(roomName, userName){ + this.socket.emit('joinRoom', { roomName:roomName, userName:userName}); + } + + public leaveRoom(roomName, userName){ + this.socket.emit('leaveRoom', { roomName:roomName, userName:userName}); + } + + public newMessage(userName, roomName, message){ + var currentdate = new Date(); + var datetime = currentdate.getDate() + "/" + + (currentdate.getMonth()+1) + "/" + + currentdate.getFullYear() + " @ " + + currentdate.getHours() + ":" + + currentdate.getMinutes() + ":" + + currentdate.getSeconds(); + + + this.socket.emit('newMessage', { + 'userName': userName, + 'text': message, + 'roomName': roomName, + 'msgDate' : datetime + }); + } + + public newUser(userName){ + this.socket.emit('newUser', userName); + } + +} diff --git a/angular-chat-client/src/app/user-registration/user-registration.component.ts b/angular-chat-client/src/app/user-registration/user-registration.component.ts index 2d0126e..9035c1c 100644 --- a/angular-chat-client/src/app/user-registration/user-registration.component.ts +++ b/angular-chat-client/src/app/user-registration/user-registration.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; -import * as io from 'socket.io-client'; +//import * as io from 'socket.io-client'; @Component({ selector: 'app-user-registration', @@ -13,7 +13,7 @@ export class UserRegistrationComponent implements OnInit { constructor(private _router: Router) { } ngOnInit() { - this.socket = io('http://localhost:3000'); + //this.socket = io('http://localhost:3000'); } userName = ''; From ce2be1961651e164849f9f73b95e01363fd1f754 Mon Sep 17 00:00:00 2001 From: david Date: Tue, 14 Nov 2017 16:02:38 +0200 Subject: [PATCH 7/7] cool --- angular-chat-client/src/app/chat/chat.component.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/angular-chat-client/src/app/chat/chat.component.ts b/angular-chat-client/src/app/chat/chat.component.ts index 18254cd..da13d6b 100644 --- a/angular-chat-client/src/app/chat/chat.component.ts +++ b/angular-chat-client/src/app/chat/chat.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; -import * as io from 'socket.io-client'; import { SocketsService } from '../sockets.service'; @Component({ @@ -20,6 +19,15 @@ export class ChatComponent implements OnInit { this._router.navigate(['registration']); } this._sockets.socket.on('chatUpdate', function(data) { + + if (data.text[0] === '@'){ + var name = data.text.substr(1, data.text.indexOf(" ")); + + if (sessionStorage.getItem("userName") === name){ + //Materialize.toast('I am a toast!', 3000, 'rounded'); + } + } + this.conversation.push(data); }.bind(this));