Commit a8035e83 authored by saliou673's avatar saliou673
Browse files

[FRONT] reorganize component and add routing

parent 553193e9
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { MessagetestComponent } from './messagetest/messagetest.component';
import { NotfoundComponent } from './notfound/notfound.component';
const routes: Routes = [];
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'test', component: MessagetestComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotfoundComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spring Boot WebSocket</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style="color: blue; text-align: center">
<h1>{{title}}</h1>
<h3>{{description}}</h3>
</div>
<div class="container" style="width: 400px; margin-top: 20px;">
<form class="form-inline">
<div class="form-group">
<label for="connect">Make Connection:</label>
<button id="connect" class="btn btn-default" type="button" [disabled]="!disabled" (click)="connect()">Connect</button>
<button id="disconnect" class="btn btn-default" type="submit" [disabled]="disabled" (click)="disconnect()">Disconnect</button>
</div>
</form>
<form class="form-inline" style="margin-top: 20px;">
<div class="form-group">
<label for="name">User's Name:</label>
<input type="text" id="name" name="name" class="form-control" [(ngModel)]="name" />
</div>
<button id="send" class="btn btn-default" type="button" (click)="sendName()">Send</button>
</form>
<table id="conversation" class="table table-striped" style="margin-top: 20px;">
<thead>
<tr>
<th>Web Socket Test</th>
</tr>
</thead>
<tbody *ngFor="let greeting of greetings">
<tr>
<td>{{greeting}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<nav class="navbar nav">
<ul>
<li><a routerLink="/home" routerLinkActive="active">Home</a></li>
<li><a routerLink="/test" routerLinkActive="active">Socket testing</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
\ No newline at end of file
......@@ -10,60 +10,4 @@ import * as SockJS from 'sockjs-client';
export class AppComponent {
title = 'Web Socket Test';
description = 'Middleware Project';
greetings: string[] = [];
disabled = true;
name: string | undefined;
private stompClient = null;
constructor() { }
setConnected(connected: boolean) {
this.disabled = !connected;
if (connected) {
this.greetings = [];
}
}
connect() {
const socket = new SockJS('http://localhost:8000/gkz-stomp-endpoint');
// @ts-ignore
this.stompClient = Stomp.over(socket);
const _this = this;
// @ts-ignore
this.stompClient.connect({}, function (frame: string) {
_this.setConnected(true);
console.log('Connected: ' + frame);
// @ts-ignore
_this.stompClient.subscribe('/api/hi', function (response){
_this.showGreeting(JSON.parse(response.body));
});
});
}
disconnect() {
if (this.stompClient != null) {
// @ts-ignore
this.stompClient.disconnect();
}
this.setConnected(false);
console.log('Disconnected!');
}
sendName() {
// @ts-ignore
this.stompClient.send(
'/gkz/test',
{},
JSON.stringify({ 'name': this.name })
);
}
showGreeting(message: string) {
this.greetings.push(message);
}
}
......@@ -7,13 +7,19 @@ import { UserComponent } from './components/user/user.component';
import { PostComponent } from './components/post/post.component';
import { CommentComponent } from './components/comment/comment.component';
import {FormsModule} from "@angular/forms";
import { HomeComponent } from './home/home.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { MessagetestComponent } from './messagetest/messagetest.component';
@NgModule({
declarations: [
AppComponent,
UserComponent,
PostComponent,
CommentComponent
CommentComponent,
HomeComponent,
NotfoundComponent,
MessagetestComponent
],
imports: [
BrowserModule,
......
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spring Boot WebSocket</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style="color: blue; text-align: center">
<h1>{{title}}</h1>
<h3>{{description}}</h3>
</div>
<div class="container" style="width: 400px; margin-top: 20px;">
<form class="form-inline">
<div class="form-group">
<label for="connect">Make Connection:</label>
<button id="connect" class="btn btn-default" type="button" [disabled]="!disabled" (click)="connect()">Connect</button>
<button id="disconnect" class="btn btn-default" type="submit" [disabled]="disabled" (click)="disconnect()">Disconnect</button>
</div>
</form>
<form class="form-inline" style="margin-top: 20px;">
<div class="form-group">
<label for="name">User's Name:</label>
<input type="text" id="name" name="name" class="form-control" [(ngModel)]="name" />
</div>
<button id="send" class="btn btn-default" type="button" (click)="sendName()">Send</button>
</form>
<table id="conversation" class="table table-striped" style="margin-top: 20px;">
<thead>
<tr>
<th>Web Socket Test</th>
</tr>
</thead>
<tbody *ngFor="let greeting of greetings">
<tr>
<td>{{greeting}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MessagetestComponent } from './messagetest.component';
describe('MessagetestComponent', () => {
let component: MessagetestComponent;
let fixture: ComponentFixture<MessagetestComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MessagetestComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(MessagetestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import {Stomp} from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
@Component({
selector: 'app-messagetest',
templateUrl: './messagetest.component.html',
styleUrls: ['./messagetest.component.css']
})
export class MessagetestComponent implements OnInit {
title = 'Web Socket Test';
description = 'Middleware Project';
greetings: string[] = [];
disabled = true;
name: string | undefined;
private stompClient = null;
constructor() { }
ngOnInit(): void {
}
setConnected(connected: boolean) {
this.disabled = !connected;
if (connected) {
this.greetings = [];
}
}
connect() {
const socket = new SockJS('http://localhost:8000/gkz-stomp-endpoint');
// @ts-ignore
this.stompClient = Stomp.over(socket);
const _this = this;
// @ts-ignore
this.stompClient.connect({}, function (frame: string) {
_this.setConnected(true);
console.log('Connected: ' + frame);
// @ts-ignore
_this.stompClient.subscribe('/api/hi', function (response){
_this.showGreeting(JSON.parse(response.body));
});
});
}
disconnect() {
if (this.stompClient != null) {
// @ts-ignore
this.stompClient.disconnect();
}
this.setConnected(false);
console.log('Disconnected!');
}
sendName() {
// @ts-ignore
this.stompClient.send(
'/gkz/test',
{},
JSON.stringify({ 'name': this.name })
);
}
showGreeting(message: string) {
this.greetings.push(message);
}
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NotfoundComponent } from './notfound.component';
describe('NotfoundComponent', () => {
let component: NotfoundComponent;
let fixture: ComponentFixture<NotfoundComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ NotfoundComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NotfoundComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-notfound',
templateUrl: './notfound.component.html',
styleUrls: ['./notfound.component.css']
})
export class NotfoundComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webapp</title>
<title>My Forum</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment