mirror/liberty-bikes
2
0
Fork 0
mirror of https://github.com/OpenLiberty/liberty-bikes.git synced 2025-02-23 11:19:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Convert from jquery to angular httpclient

Browse Source
This commit is contained in:
Liam Westby 2018-03-19 17:20:36 -05:00
parent a5be1ca1d9
commit d628a8e848
2 changed files with 83 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/prebuild/src/app/app.module.ts
View File

@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@ -14,7 +15,8 @@ import { ControlsComponent } from './controls/controls.component';
imports: [
BrowserModule,
AppRoutingModule,
NgbModule.forRoot()
NgbModule.forRoot(),
HttpClientModule
],
declarations: [
AppComponent,

140
frontend/prebuild/src/app/login/login.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit, NgZone } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import * as $ from 'jquery';
@ -10,9 +11,12 @@ import * as $ from 'jquery';
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor(private router: Router, private ngZone: NgZone, private meta: Meta) {
}
constructor(
private router: Router,
private ngZone: NgZone,
private meta: Meta,
private http: HttpClient
) {}
ngOnInit() {
this.meta.removeTag('viewport');
@ -22,81 +26,97 @@ export class LoginComponent implements OnInit {
this.meta.addTag({name: 'viewport', content: `width=${viewWidth}px, height=${viewHeight}px, initial-scale=1.0`}, true);
}
createRound() {
$.post(`http://${document.location.hostname}:8080/round/create`, function(data) {
async createRound() {
try {
let data = await this.http.post(`http://${document.location.hostname}:8080/round/create`, "", { responseType: 'text'}).toPromise();
alert(`Created round: ${data}`);
});
} catch (error) {
console.log(error);
}
}
joinRound(gameBoard: boolean) {
let ngZone = this.ngZone;
let router = this.router;
let roundID: string = $('#roundid').val();
let username: string = $('#username').val();
roundID = roundID.toUpperCase().replace(/[^A-Z]/g, '');
// TODO: Validate form input in a more elegant way than alert()
if (roundID.length !== 4) {
alert(roundID + ' is not a valid round ID, because it must be 4 letters long');
async joinRound(gameBoard: boolean) {
let ngZone = this.ngZone;
let router = this.router;
let roundID: string = $('#roundid').val();
let username: string = $('#username').val();
roundID = roundID.toUpperCase().replace(/[^A-Z]/g, '');
// TODO: Validate form input in a more elegant way than alert()
if (roundID.length !== 4) {
alert(
roundID + ' is not a valid round ID, because it must be 4 letters long'
);
return;
}
if (username.length < 1) {
alert('Username must not be empty');
return;
}
try {
let data: any = await this.http.get(`http://${document.location.hostname}:8080/round/${roundID}`).toPromise();
console.log(JSON.stringify(data));
if (data === undefined) {
alert('Game round does not exist!');
return;
}
if (username.length < 1) {
alert('Username must not be empty');
if (data.gameState === 'FULL') {
alert('Game round is Full!');
return;
}
if (data.gameState === 'RUNNING') {
alert('Game round has already started!');
return;
}
if (data.gameState === 'FINISHED') {
alert('Game round has already finished!');
return;
}
$.get(`http://${document.location.hostname}:8080/round/${roundID}`, function(data) {
if (data === undefined) {
alert('Game round does not exist!');
return;
}
if (data.gameState === 'FULL') {
alert('Game round is Full!');
return;
}
if (data.gameState === 'RUNNING') {
alert('Game round has already started!');
return;
}
if (data.gameState === 'FINISHED') {
alert('Game round has already finished!');
return;
}
// TODO: Register the player here until we get a proper 'login' flow
$.post(`http://${document.location.hostname}:8081/player/create?name=${username}`, function(response) {
console.log(`Created a new player with ID=${response}`);
sessionStorage.setItem('userId', response);
// TEMP: to prevent a race condition, putting this code inside of the player create callback to ensure that
// userId is set in the session storage before proceeding to the game board
sessionStorage.setItem('username', username);
sessionStorage.setItem('roundId', roundID);
if (gameBoard === true) {
ngZone.run(() => {
router.navigate(['/game']);
});
} else {
ngZone.run(() => {
router.navigate(['/play']);
});
}
});
});
}
let response: any = await this.http.post(`http://${document.location.hostname}:8081/player/create?name=${username}`, "", {
responseType: 'text'
}).toPromise();
console.log(JSON.stringify(response));
console.log(`Created a new player with ID=${response}`);
sessionStorage.setItem('userId', response);
hostRound() {
// TEMP: to prevent a race condition, putting this code inside of the player create callback to ensure that
// userId is set in the session storage before proceeding to the game board
sessionStorage.setItem('username', username);
sessionStorage.setItem('isSpectator', 'false');
sessionStorage.setItem('roundId', roundID);
if (gameBoard === true) {
ngZone.run(() => {
router.navigate(['/game']);
});
} else {
ngZone.run(() => {
router.navigate(['/play']);
});
}
} catch (error) {
console.log(error);
}
}
async hostRound() {
// TODO: update the button on click to indicate a waiting state in case
// this post request takes a noticeable amount of time
let ngZone = this.ngZone;
let router = this.router;
$.post(`http://${document.location.hostname}:8080/round/create`, function(data) {
try {
let data = await this.http.post(`http://${document.location.hostname}:8080/round/create`, "", { responseType: 'text' }).toPromise();
console.log(`Created round with id=${data}`);
sessionStorage.setItem('isSpectator', 'true');
sessionStorage.setItem('roundId', data);
ngZone.run(() => {
router.navigate(['/game']);
});
});
} catch (error) {
console.log(error);
}
}
}