ckoch/LudosData
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working updates

Browse Source
This commit is contained in:
Christopher Koch
2018-03-31 17:35:30 -04:00
parent 2a3b0509a8
commit 7ad3c6b93a
12 changed files with 3329 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitattributes vendored
View File

@@ -1,2 +0,0 @@
# Auto detect text files and perform LF normalization
* text=auto

2756
api.php Normal file
View File

File diff suppressed because it is too large Load Diff

6
src/app/app-routing.module.ts
View File

@@ -2,10 +2,14 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GameGridComponent } from './game-grid/game-grid.component'
import { ViewCardComponent } from './view-card/view-card.component'
const routes: Routes = [
{ path: '', redirectTo: '/game-grid', pathMatch: 'full' },
{ path: 'game-grid', component: GameGridComponent }
{ path: 'game-grid', component: GameGridComponent },
{ path: 'view-card', component: ViewCardComponent },
{ path: 'view-card/:gid', component: ViewCardComponent }
];
@NgModule({

9
src/app/app.module.ts
View File

@@ -1,23 +1,26 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GamesService } from './games.service';
import { GameGridComponent } from './game-grid/game-grid.component';
import { AppRoutingModule } from './/app-routing.module';
import { ViewCardComponent } from './view-card/view-card.component';
@NgModule({
declarations: [
AppComponent,
GameGridComponent
GameGridComponent,
ViewCardComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
HttpClientModule,
ReactiveFormsModule
],
providers: [GamesService],
bootstrap: [AppComponent]

26
src/app/game-grid/game-grid.component.html
View File

@@ -11,8 +11,16 @@
<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
<div class="card-body">
<h5 class="card-title">{{game.Title}}</h5>
<p class="card-text">{{game.Title}}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<p class="card-text">
{{game.Title}}
<br />
{{game.System}}
<br />
{{game.Year}}
</p>
<a [routerLink]="['/view-card', game.id]">
<span class="btn btn-primary">View/Edit</span>
</a>
</div>
</div>
</div>
@@ -24,5 +32,17 @@
</div>
</div>
<button (click)="myFunc()">New Call</button>
<div class="row">
<div class="col-sm-6 text-center">
<button *ngIf="showBack" class="btn btn-primary" (click)="backPage()">Back Page</button>
</div>
<div class="col-sm-6 text-center">
<button *ngIf="showNext" class="btn btn-primary" (click)="nextPage()">Next Page</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<br />
</div>
</div>

55
src/app/game-grid/game-grid.component.ts
View File

@@ -20,9 +20,13 @@ export class GameGridComponent implements OnInit {
rawGamesContent;
gamesData;
queryFilters;
querryPage;
queryOrder;
queryFilters = "";
querryPage = 1;
queryOrder = "Title";
queryRecordMax = 10;
showNext = true;
showBack = false;
constructor(
private route: ActivatedRoute,
@@ -36,31 +40,25 @@ export class GameGridComponent implements OnInit {
}
getGamesList( ): any{
getGamesList(): any{
this.queryFilters = "Played,eq,true";
this.querryPage = 1;
this.queryOrder = "Title";
this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => {
console.log( data );
this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.queryRecordMax ).subscribe( data => {
this.gamesData = data.games;
if( this.gamesData.length < this.queryRecordMax ){
this.showNext = false;
}else{
this.showNext = true;
}
if( this.querryPage != 1 ){
this.showBack = true;
}else{
this.showBack = false;
}
});
}
getGamesList2( ): any{
this.queryFilters = "Played,eq,true";
this.querryPage = 2;
this.queryOrder = "Title";
this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => {
console.log( data );
this.gamesData = data.games;
});
}
isEmptyObject(obj) {
return (obj != undefined);
@@ -84,10 +82,13 @@ export class GameGridComponent implements OnInit {
}
myFunc(){
$('.grid').masonry('destroy')
this.getGamesList2();
nextPage(){
this.querryPage++;
this.getGamesList();
}
backPage(){
this.querryPage--;
this.getGamesList();
}

29
src/app/game.ts Normal file
View File

@@ -0,0 +1,29 @@
export class Game {
Id: number;
Title: string;
Art: string;
Description: string;
Developer: string;
Dumped: number;
Finished: number;
Genre: string;
Own: number;
Played: number;
Publisher: string;
System: string;
Year: string;
constructor() {
this.Title = "";
this.Art = "";
this.Description = "";
this.Developer = "";
this.Dumped = 0;
this.Finished = 0;
this.Genre = "";
this.Own = 0;
this.Played = 0;
this.Publisher = "";
this.System = "";
this.Year = "";
}
}

42
src/app/games.service.ts
View File

@@ -15,14 +15,50 @@ const httpOptionsPut = {
@Injectable()
export class GamesService {
APIURL = "http://www.lazypug.net/api.php";
APIURL = "http://192.241.155.78/ludosdata/api.php";
constructor(
private http: HttpClient
){ }
getGames( queryFilters, querryPage, queryOrder ): Observable<any> {
return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage +"&order="+ queryOrder +"&transform=1" )
getGames( queryFilters, querryPage, queryOrder, queryRecordMax ): Observable<any> {
return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage + "," + queryRecordMax +"&order="+ queryOrder +"&transform=1" )
.map(res => {
return(
res
);
});
}
postGame( gameData ): Observable<any> {
return this.http.post( this.APIURL + "/games/", gameData, httpOptions )
.map(res => {
return(
res
);
});
}
getGameById( gameId ): Observable<any> {
return this.http.get( this.APIURL + "/games/" + gameId )
.map(res => {
return(
res
);
});
}
putGameById( gameData, gameId ): Observable<any> {
return this.http.get( this.APIURL + "/games/" + gameId )
.map(res => {
return(
res
);
});
}
deleteGameById( gameId ): Observable<any> {
return this.http.get( this.APIURL + "/games/" + gameId )
.map(res => {
return(
res

4
src/app/view-card/view-card.component.css Normal file
View File

@@ -0,0 +1,4 @@
#gameImageHeaderContainer{
height:250px;
overflow: hidden;
}

316
src/app/view-card/view-card.component.html Normal file
View File

@@ -0,0 +1,316 @@
<div *ngIf="isEmptyObject(form)">
<div class="row">
<div class="col-sm-12" id="gameImageHeaderContainer">
<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
<br />
</div>
</div>
<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
<div id='Row_Title' class="form-group field-wrapper">
<label [attr.for]="'Title'" class="control-label col-sm-3 isInputLabel">
Title
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
[formControlName]="'Title'"
[id]="'Title'"
[type]="'text'"
[name]="'Title'">
<div class="invalidEntryContainer">
<span *ngIf="(form.get('Title').dirty || form.get('Title').touched) && form.get('Title').invalid" >This field is required</span>
</div>
</div>
</div>
</div>
</div>
<div id='Row_Description' class="form-group field-wrapper">
<label [attr.for]="'Description'" class="control-label col-sm-3 isInputLabel">
Description
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
[formControlName]="'Description'"
[id]="'Description'"
[type]="'text'"
[name]="'Description'">
</div>
</div>
</div>
</div>
<div id='Row_Developer' class="form-group field-wrapper">
<label [attr.for]="'Developer'" class="control-label col-sm-3 isInputLabel">
Developer
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
[formControlName]="'Developer'"
[id]="'Developer'"
[type]="'text'"
[name]="'Developer'">
</div>
</div>
</div>
</div>
<div id='Row_Publisher' class="form-group field-wrapper">
<label [attr.for]="'Publisher'" class="control-label col-sm-3 isInputLabel">
Publisher
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
[formControlName]="'Publisher'"
[id]="'Publisher'"
[type]="'text'"
[name]="'Publisher'">
</div>
</div>
</div>
</div>
<div id='Row_Art' class="form-group field-wrapper">
<label [attr.for]="'Art'" class="control-label col-sm-3 isInputLabel">
Art
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
[formControlName]="'Art'"
[id]="'Art'"
[type]="'text'"
[name]="'Art'">
</div>
</div>
</div>
</div>
<div id='Row_Year' class="form-group field-wrapper">
<label [attr.for]="'Year'" class="control-label col-sm-3 isInputLabel">
Year
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<input class="form-control"
[formControlName]="'Year'"
[id]="'Year'"
[type]="'text'"
[name]="'Year'">
</div>
</div>
</div>
</div>
<div id='Row_Genre' class="form-group field-wrapper">
<label [attr.for]="'Genre'" class="control-label col-sm-3 isInputLabel">
Genre
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
[formControlName]="'Genre'"
[id]="'Genre'"
[name]="'Genre'">
<option [value]="sports">sports</option>
<option [value]="platformer">platformer</option>
<option [value]="lightgun">lightgun</option>
<option [value]="fighter">fighter</option>
<option [value]="rpg">rpg</option>
<option [value]="strategy">strategy</option>
<option [value]="adventure">adventure</option>
<option [value]="racing">racing</option>
<option [value]="fps">fps</option>
<option [value]="action">action</option>
<option [value]="simulation">simulation</option>
<option [value]="card">card</option>
</select>
</div>
</div>
</div>
</div>
<div id='Row_Genre' class="form-group field-wrapper">
<label [attr.for]="'System'" class="control-label col-sm-3 isInputLabel">
System
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
[formControlName]="'System'"
[id]="'System'"
[name]="'System'">
<option [value]="SNES">SNES</option>
<option [value]="N64">N64</option>
<option [value]="PS1">PS1</option>
<option [value]="PS2">PS2</option>
<option [value]="GB">GB</option>
<option [value]="GBA">GBA</option>
<option [value]="DS">DS</option>
<option [value]="NES">NES</option>
<option [value]="GC">GC</option>
<option [value]="PSP">PSP</option>
<option [value]="360">360</option>
<option [value]="WII">WII</option>
</select>
</div>
</div>
</div>
</div>
<div id='Row_Own' class="form-group field-wrapper">
<label [attr.for]="'Own'" class="control-label col-sm-3 isInputLabel">
Own
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
[formControlName]="'Own'"
[id]="'Own'"
[name]="'Own'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
</div>
</div>
</div>
</div>
<div id='Row_Dumped' class="form-group field-wrapper">
<label [attr.for]="'Dumped'" class="control-label col-sm-3 isInputLabel">
Dumped
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
[formControlName]="'Dumped'"
[id]="'Dumped'"
[name]="'Dumped'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
</div>
</div>
</div>
</div>
<div id='Row_Played' class="form-group field-wrapper">
<label [attr.for]="'Played'" class="control-label col-sm-3 isInputLabel">
Played
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
[formControlName]="'Played'"
[id]="'Played'"
[name]="'Played'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
</div>
</div>
</div>
</div>
<div id='Row_Finished' class="form-group field-wrapper">
<label [attr.for]="'Finished'" class="control-label col-sm-3 isInputLabel">
Finished
</label>
<div class="col-sm-9 isInputElement">
<div class="row">
<div class="col-md-8 isInputElement">
<select class="form-control"
[formControlName]="'Finished'"
[id]="'Finished'"
[name]="'Finished'">
<option [value]="0">No</option>
<option [value]="1">Yes</option>
</select>
</div>
</div>
</div>
</div>
<br />
<div class="buttonArea">
<div class="row">
<div class="col-sm-5 col-sm-push-7 buttonHolder text-center">
<button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/game-grid">
Cancel Changes
</button>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-5 col-sm-pull-7 buttonHolder text-center">
<input type="submit" class="btn btn-primary btn-lg" name="btnContinue" id="btnContinue" value="Submit Changes" [disabled]="!form.valid" />
</div>
</div>
</div>
<br />
</form>
<hr />
<strong>Form Value</strong>
<pre>{{ form.value | json }}</pre>
<strong>Form is valid:</strong> {{form.valid}}
</div>

25
src/app/view-card/view-card.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ViewCardComponent } from './view-card.component';
describe('ViewCardComponent', () => {
let component: ViewCardComponent;
let fixture: ComponentFixture<ViewCardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ViewCardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ViewCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

98
src/app/view-card/view-card.component.ts Normal file
View File

@@ -0,0 +1,98 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { GamesService } from '../games.service';
import { Game } from '../game';
@Component({
selector: 'app-view-card',
templateUrl: './view-card.component.html',
styleUrls: ['./view-card.component.css']
})
export class ViewCardComponent implements OnInit {
gid: any;
gameSubscription: any;
gameData: Game;
form: any;
constructor(
private route: ActivatedRoute,
private router: Router,
private gamesService: GamesService
){}
ngOnInit(){
this.gid = this.route.snapshot.paramMap.get('gid');
if( this.gid != null ){
this.gameSubscription = this.gamesService.getGameById( this.gid ).subscribe( data => {
this.gameData = data;
this.buildForm();
});
}else{
this.gameData = new Game();
this.buildForm();
}
}
buildForm(){
const formGroup = {};
formGroup["Title"] = new FormControl( this.gameData.Title, this.mapValidators({ required: true }) );
formGroup["Art"] = new FormControl( this.gameData.Art, this.mapValidators({ required: false }) );
formGroup["Description"] = new FormControl( this.gameData.Description, this.mapValidators({ required: false }) );
formGroup["Developer"] = new FormControl( this.gameData.Developer, this.mapValidators({ required: false }) );
formGroup["Dumped"] = new FormControl( this.gameData.Dumped, this.mapValidators({ required: false }) );
formGroup["Finished"] = new FormControl( this.gameData.Finished, this.mapValidators({ required: false }) );
formGroup["Genre"] = new FormControl( this.gameData.Genre, this.mapValidators({ required: false }) );
formGroup["Own"] = new FormControl( this.gameData.Own, this.mapValidators({ required: false }) );
formGroup["Played"] = new FormControl( this.gameData.Played, this.mapValidators({ required: false }) );
formGroup["Publisher"] = new FormControl( this.gameData.Publisher, this.mapValidators({ required: false }) );
formGroup["System"] = new FormControl( this.gameData.System, this.mapValidators({ required: false }) );
formGroup["Year"] = new FormControl( this.gameData.Year, this.mapValidators({ required: false }) );
this.form = new FormGroup(formGroup);
}
private mapValidators(validators) {
const formValidators = [];
for( var key in validators ){
if( key == "required" ) {
if( validators.required ){
formValidators.push( Validators.required );
}
}
}
return formValidators;
}
onSubmit( form ){
if( this.gid == null ){
this.gameSubscription = this.gamesService.postGame( form ).subscribe( data => {
this.router.navigateByUrl("/game-grid");
});
}else{
this.gameSubscription = this.gamesService.putGameById( form, this.gid ).subscribe( data => {
this.router.navigateByUrl("/game-grid");
});
}
}
removeGame(){
this.gameSubscription = this.gamesService.deleteGameById( this.gid ).subscribe( data => {
this.router.navigateByUrl("/game-grid");
});
}
isEmptyObject(obj) {
return (obj != undefined);
}
}