images

interfaceServices/imageUpload.php

@@ -1,11 +1,37 @@
 <?php
 
+include_once( "class.upload.php" );
+
 $user = "ckoch";
 $target_dir = "community/uploads/" . $user . "/";
 $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
 $uploadOk = 1;
 $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
+//$_FILES["fileToUpload"]
 
+$handle = new upload( $_FILES["fileToUpload"] );
+
+$newFileName = hash("sha256", $user . time() );
+
+if( $handle->uploaded ){
+    $handle->file_new_name_body   = $newFileName;
+    $handle->image_resize         = true;
+    $handle->image_x              = 250;
+    $handle->image_ratio_y        = true;
+    $handle->image_convert = 'png';
+    $handle->process( $target_dir );
+    
+    if( $handle->processed ){
+        $handle->clean();
+        echo $newFileName;
+    }else{
+        echo 'error : ' . $handle->error;
+    }
+}
+
+
+
+/*
 // Check if image file is a actual image or fake image
 //if(isset($_POST["submit"])) {
     $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
@@ -49,4 +75,5 @@ if ($uploadOk == 0) {
         echo( 0 );
     }
 }
+*/
 ?>

src/app/app.module.ts

@@ -22,6 +22,8 @@ import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+
 
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
@@ -62,7 +64,8 @@ import { AlertService, AuthenticationService, UserService } from './_services/in
     MatInputModule,
     MatPaginatorModule,
     MatFormFieldModule,
-    MatSelectModule
+    MatSelectModule,
+    MatProgressSpinnerModule
   ],
   providers: [
     GamesService,

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

@@ -4,7 +4,7 @@
 }
 
 .card{
-  height: 280px;
+  min-height: 280px;
   width: 250px;
   margin: 5px;
 }

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

@@ -31,7 +31,7 @@
 	<div class="flex-container" >
 
 		<mat-card class="card" *ngFor="let game of gamesData;">
-			<img class="card-img-top" src="http://lazypug.net/globalAssets/images/temp1.png" alt="">
+			<img class="card-img-top" src="{{game.Art}}" alt="">
 			<div class="card-body">
 				<p class="card-title">{{game.Title}}</p>
 				<p class="card-text">{{game.System}}</p>

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

@@ -46,6 +46,18 @@ export class GameGridComponent implements OnInit {
 	getGamesList(): any{
 
 		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.pageSize, this.currentUser.id ).subscribe( data => {
+			
+			data.games.forEach(function(element) {
+				if( element.Art.length == 0 ){
+					element.Art = "http://lazypug.net/globalAssets/images/temp1.png";
+				}else{
+					element.Art = "http://pugludos.com/community/uploads/ckoch/"+ element.Art +".png";
+				}
+			});
+
+			
+
+
 			this.length = data["_results"];
 			this.gamesData = data.games;
 		});
@@ -54,6 +66,13 @@ export class GameGridComponent implements OnInit {
 	onKey( event: any ){
 		if( event.target.value != "" ){
 			this.gamesService.searchGamesByText( event.target.value, this.currentUser.token, this.currentUser.id ).subscribe( data => {
+				data.games.forEach(function(element) {
+				if( element.Art.length == 0 ){
+					element.Art = "http://lazypug.net/globalAssets/images/temp1.png";
+				}else{
+					element.Art = "http://pugludos.com/community/uploads/ckoch/"+ element.Art +".png";
+				}
+			});
 				this.gamesData = data.games;
 			});
 		}else{

src/app/games.service.ts

@@ -45,8 +45,8 @@ export class GamesService {
 			});
 	}
 
-	postGame( gameData ): Observable<any> {
+	postGame( gameData, userToken ): Observable<any> {
-		return this.http.post( this.APIURL + "/games/", gameData, httpOptions )
+		return this.http.post( this.APIURL + "/games?token=" + userToken, gameData, httpOptions )
 			.map(res => {
 				return(
 					res
@@ -63,8 +63,8 @@ export class GamesService {
 			});
 	}
 
-	putGameById( gameData, gameId ): Observable<any> {
+	putGameById( gameData, gameId, userToken ): Observable<any> {
-		return this.http.get( this.APIURL + "/games/" + gameId )
+		return this.http.put( this.APIURL + "/games/" + gameId + "?token=" + userToken, gameData )
 			.map(res => {
 				return(
 					res
@@ -72,8 +72,8 @@ export class GamesService {
 			});
 	}
 
-	deleteGameById( gameId ): Observable<any> {
+	deleteGameById( gameId, userToken ): Observable<any> {
-		return this.http.delete( this.APIURL + "/games/" + gameId )
+		return this.http.delete( this.APIURL + "/games/" + gameId + "?token=" + userToken )
 			.map(res => {
 				return(
 					res
@@ -82,8 +82,8 @@ export class GamesService {
 	}
 
 	postFile(fileToUpload: File): Observable<any> {
-		//const endpoint = 'http://192.241.155.78/ludosdata/imageUpload.php';
+		const endpoint = 'http://pugludos.com/imageUpload.php';
-		const endpoint = 'http://localhost/ludosdata/imageUpload.php';
+		//const endpoint = 'http://localhost/ludosdata/imageUpload.php';
 		const formData: FormData = new FormData();
 		
 		formData.append('fileToUpload', fileToUpload, fileToUpload.name);

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

@@ -1,5 +1,4 @@
 #gameImageHeaderContainer{
-	height:300px;
 	overflow: hidden;
 }
 
@@ -25,8 +24,14 @@
   display: flex;
   height: auto;
   flex-flow: row wrap;
-  align-items: left;
+  align-items: center;
-  justify-content: left;
+  justify-content: center;
+}
+
+.button-center{
+  margin: 2px auto;
+  text-align:center;
+  display: block;
 }
 
 .example-fill-remaining-space {
@@ -68,3 +73,23 @@
     top: 0; /* Sets the sticky toolbar to be on top */
     z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
 }
+
+.card-img-top{
+  width:250px;
+  height:auto;
+}
+
+
+#overlay {
+    position: fixed; /* Sit on top of the page content */
+    /*display: none; / Hidden by default */
+    width: 100%; /* Full width (cover the whole page) */
+    height: 100%; /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+    cursor: pointer; /* Add a pointer on hover */
+}

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

@@ -24,6 +24,8 @@
 
 </mat-toolbar>
 
+ <div *ngIf="overlay" id="overlay"><mat-spinner></mat-spinner></div> 
+
 
 
 <div *ngIf="isEmptyObject(form)">
@@ -35,27 +37,30 @@
 			<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" class="flex-container"  >
 <div class="card">
 	<div class="row">
-		<div class="col-sm-12" id="gameImageHeaderContainer">
+		<div class="" id="gameImageHeaderContainer">
 			<img class="card-img-top" [src]="imageSample" alt="">
+			
+			<button md-mini-fab type="button" onclick="document.getElementById('fileToUpload').click()">
+				<label for="fileToUpload"><mat-icon>add</mat-icon></label>
+			</button>
+			<input [formControlName]="'Art'" [id]="'Art'" [type]="'hidden'" [name]="'Art'">
+			<input type="file" id="fileToUpload" [name]="'fileToUpload'" (change)="handleFileInput($event)" style="display:none;">
+
 			<br />
 			<hr />
 
 			<div class="buttonArea">
-			<div class="row">
+				
-				<div class="col-sm-5 col-sm-push-7 buttonHolder text-center">
+					<button mat-button class="button-center" routerLink="/game-grid">
-					<button mat-button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/game-grid">
 						Cancel Changes
 					</button>
-				</div>
+				
-				<div class="col-sm-2">
+					<button mat-button class="button-center" (click)="removeGame()" >
-					<button mat-button class="btn btn-primary btn-lg addMarginTop btn-landing" (click)="removeGame()" >
 						Remove Game
 					</button>
-				</div>
+				
-				<div class="col-sm-5 col-sm-pull-7 buttonHolder text-center">
+					<button mat-raised-button color="primary" type="submit" class="button-center" [disabled]="!form.valid" >Submit Changes</button>
-					<button mat-raised-button color="primary" type="submit"  [disabled]="!form.valid" >Submit Changes</button>
+				
-				</div>
-			</div>
 		</div>
 
 		</div>
@@ -148,28 +153,6 @@
 			</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">
-												<mat-form-field class="fullWidth">
-
-						<input matInput matInput class="form-control"
-							[formControlName]="'Art'"
-							[id]="'Art'"
-							[type]="'text'"
-							[name]="'Art'">
-
-						<input type="file" [name]="'fileToUpload'" (change)="handleFileInput($event)">
-</mat-form-field>
-					</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

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

@@ -19,7 +19,7 @@ export class ViewCardComponent implements OnInit {
 	form: any;
 	fileToUpload: File = null;
 	imageSample = "http://lazypug.net/globalAssets/images/temp1.png";
-
+	overlay;
 	currentUser;
 
 
@@ -32,7 +32,7 @@ export class ViewCardComponent implements OnInit {
 	ngOnInit(){
 		this.gid = this.route.snapshot.paramMap.get('gid');
 		this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
-
+		this.overlay = false;
 		if( this.gid != null ){
 			this.gameSubscription = this.gamesService.getGameById( this.gid, this.currentUser.token, this.currentUser.id ).subscribe( data => {
 				this.gameData = data;
@@ -63,6 +63,10 @@ export class ViewCardComponent implements OnInit {
 
 		this.form = new FormGroup(formGroup);
 
+		if( this.gameData.Art.length != 0 ){
+			this.imageSample = "http://pugludos.com/community/uploads/ckoch/" + this.gameData.Art + ".png";
+		}
+
 	}
 
 	private mapValidators(validators) {
@@ -80,39 +84,41 @@ export class ViewCardComponent implements OnInit {
 
 	onSubmit( form ){
 		if( this.gid == null ){
-			this.gameSubscription = this.gamesService.postGame( form ).subscribe( data => {
+			form["userId"] = this.currentUser.id;
+			this.gameSubscription = this.gamesService.postGame( form, this.currentUser.token ).subscribe( data => {
 				this.router.navigateByUrl("/game-grid");
 			});
 		}else{
-			this.gameSubscription = this.gamesService.putGameById( form, this.gid ).subscribe( data => {
+			this.gameSubscription = this.gamesService.putGameById( form, this.gid, this.currentUser.token ).subscribe( data => {
 				this.router.navigateByUrl("/game-grid");
 			});
 		}
+		
 	}
 
 	handleFileInput( $event ) {
+		this.overlay = true;
 		if ($event.target.files && $event.target.files[0]) {
 			var reader = new FileReader();
 			reader.onload = (event:any) => {
-				console.log( event.target.result );
 				this.imageSample = event.target.result;
-				//$('#blah').attr('src', e.target.result);
 			};
-			//console.log($event.target.files[0]);
 			reader.readAsDataURL( $event.target.files[0] );
 		}
-    	//this.fileToUpload = $event.target.files[0];
+    	this.fileToUpload = $event.target.files[0];
-    	//this.uploadFileToActivity();
+    	this.uploadFileToActivity();
 	}
 
 	uploadFileToActivity() {
 		this.gamesService.postFile( this.fileToUpload ).subscribe(data => {
-			
+			this.form.value.Art = data.imageName;
+			this.overlay = false;
 		});
+
 	}
 
 	removeGame(){
-		this.gameSubscription = this.gamesService.deleteGameById( this.gid ).subscribe( data => {
+		this.gameSubscription = this.gamesService.deleteGameById( this.gid, this.currentUser.token ).subscribe( data => {
 			this.router.navigateByUrl("/game-grid");
 		});	
 	}
@@ -121,4 +127,6 @@ export class ViewCardComponent implements OnInit {
 		return (obj != undefined);
 	}
 
+
+
 }