working updates

.gitattributes

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

src/app/app-routing.module.ts

@@ -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({

src/app/app.module.ts

@@ -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]

src/app/game-grid/game-grid.component.html

@@ -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>
+							<p class="card-text">
-							<a href="#" class="btn btn-primary">Go somewhere</a>
+								{{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>

src/app/game-grid/game-grid.component.ts

@@ -20,9 +20,13 @@ export class GameGridComponent implements OnInit {
 	rawGamesContent;
 	gamesData;
 
-	queryFilters;
+	queryFilters = "";
-	querryPage;
+	querryPage = 1;
-	queryOrder;
+	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.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.queryRecordMax ).subscribe( data => {
-		this.querryPage = 1;
-		this.queryOrder = "Title";
-
-		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder ).subscribe( data => {
-			console.log( 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(){
+	nextPage(){
-		$('.grid').masonry('destroy')
+		this.querryPage++;
-this.getGamesList2();
+		this.getGamesList();
-
+	}
+	backPage(){
+		this.querryPage--;
+		this.getGamesList();
 	}
 
 

src/app/game.ts

@@ -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 = "";
+	}
+}

src/app/games.service.ts

@@ -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> {
+	getGames( queryFilters, querryPage, queryOrder, queryRecordMax ): Observable<any> {
-		return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage +"&order="+ queryOrder +"&transform=1" )
+		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

src/app/view-card/view-card.component.css

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

src/app/view-card/view-card.component.html

@@ -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>

src/app/view-card/view-card.component.spec.ts

@@ -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();
+  });
+});

src/app/view-card/view-card.component.ts

@@ -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);
+	}
+
+}