Edit Game Last version

Co-authored-by: JavierGasparinMunoz <j.gasparino.2020@alumnos.urjc.es>

Author: pizarroiker

code/frontend/src/app/components/games/edit-game.component.html

@@ -26,7 +26,7 @@ <h2 class="mt-0">Game Details</h2>
         <!-- Country -->
         <p>Categories:</p>
         <label class="youplay-select">
-          <select [(ngModel)]="category" aria-placeholder=this.game.category>
+          <select [(ngModel)]="game.category" value="game.category">
             <option value="">Select Category</option>
             <option value="Action">Action</option>
             <option value="Adventure">Adventure</option>
@@ -38,7 +38,7 @@ <h2 class="mt-0">Game Details</h2>
             <option value="Strategy">Strategy</option>
           </select>
         </label>
-        <div class="wrong" [class.display-div]="checkEmpty(category)">
+        <div class="wrong" [class.display-div]="checkEmpty(game.category)">
           <p> Select one category! </p>
         </div>
         <div class="row">
@@ -47,7 +47,7 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input [(ngModel)]="game.name" value="game.name" />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(name)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.name)">
               <p> The name cant be empty! </p>
             </div>
           </div>
@@ -57,8 +57,8 @@ <h2 class="mt-0">Game Details</h2>
               <input
                 type="number"
                 step="0.01"
-                [(ngModel)]="price"
-                placeholder=this.game.price
+                [(ngModel)]="game.price"
+                value = "game.price"
                 required
               />
             </div>
@@ -71,9 +71,9 @@ <h2 class="mt-0">Game Details</h2>
           <div class="col-md-4">
             <p>OS:</p>
             <div class="youplay-input">
-              <input type="text" [(ngModel)]="os" placeholder=this.game.os required />
+              <input type="text" [(ngModel)]="game.os" value = "game.os"/>
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(os)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.os)">
               <p> The OS cant be empty! </p>
             </div>
           </div>
@@ -82,21 +82,20 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input
                 type="text"
-                [(ngModel)]="processor"
-                placeholder=this.game.processor
-                required
+                [(ngModel)]="game.processor"
+                value="game.processor"
               />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(processor)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.processor)">
               <p> The processor cant be empty! </p>
             </div>
           </div>
           <div class="col-md-4">
             <p>Memory:</p>
             <div class="youplay-input">
-              <input type="text" [(ngModel)]="memory" placeholder=this.game.memory required />
+              <input type="text" [(ngModel)]="game.memory" value="game.memory" />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(memory)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.memory)">
               <p> The Memory cant be empty! </p>
             </div>
           </div>
@@ -108,12 +107,11 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input
                 type="text"
-                [(ngModel)]="directX"
-                placeholder=this.game.directX
-                required
+                [(ngModel)]="game.directX"
+                value = "game.directX"
               />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(directX)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.directX)">
               <p> The DirectX cant be empty! </p>
             </div>
           </div>
@@ -122,12 +120,11 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input
                 type="text"
-                [(ngModel)]="network"
-                placeholder=this.game.network
-                required
+                [(ngModel)]="game.network"
+                value = "game.network"
               />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(network)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.network)">
               <p> The network cant be empty! </p>
             </div>
           </div>
@@ -138,12 +135,11 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input
                 type="text"
-                [(ngModel)]="hardDrive"
-                placeholder=this.game.hardDrive
-                required
+                [(ngModel)]="game.hardDrive"
+                value = "game.hardDrive"
               />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(hardDrive)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.hardDrive)">
               <p> The Hard Drive cant be empty! </p>
             </div>
           </div>
@@ -152,12 +148,11 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input
                 type="text"
-                [(ngModel)]="soundcard"
-                placeholder=this.game.soundcard
-                required
+                [(ngModel)]="game.soundCard"
+                value= "game.soundCard"
               />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(soundcard)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.soundCard)">
               <p> The Sound Card cant be empty! </p>
             </div>
           </div>
@@ -168,12 +163,11 @@ <h2 class="mt-0">Game Details</h2>
             <div class="youplay-input">
               <input
                 type="text"
-                [(ngModel)]="graphics"
-                placeholder=this.game.graphics
-                required
+                [(ngModel)]="game.graphics"
+                value = "game.graphics"
               />
             </div>
-            <div class="wrong" [class.display-div]="checkEmpty(graphics)">
+            <div class="wrong" [class.display-div]="checkEmpty(game.graphics)">
               <p> The Graphic cant be empty! </p>
             </div>
           </div>
@@ -186,7 +180,7 @@ <h2 class="mt-0">Game Details</h2>
           </div></label
         >
         <div class="imageInput">
-          <input type="file" id='imageUpload' accept="image/jpeg,image/png" (change)="onFileSelected($event)" required/>
+          <input type="file" id='imageUpload' accept="image/jpeg,image/png" (change)="onFileSelected($event)"/>
         </div>
 
         <label for="imageUploads">
@@ -195,18 +189,17 @@ <h2 class="mt-0">Game Details</h2>
           </div></label
         >
         <div class="imageInput">
-          <input id='imageUploads'type="file" multiple accept="image/jpeg,image/png" (change)="onFilesSelected($event)" required/>
+          <input id='imageUploads'type="file" multiple accept="image/jpeg,image/png" (change)="onFilesSelected($event)"/>
         </div>
         <p>Description:</p>
         <div class="youplay-textarea">
           <textarea
-            [(ngModel)]="description"
+            [(ngModel)]="game.description"
             rows="5"
-            placeholder=this.game.description
-            required
+            value="game.description"
           ></textarea>
         </div>
-        <div class="wrong" [class.display-div]="checkEmpty(description)">
+        <div class="wrong" [class.display-div]="checkEmpty(game.description)">
           <p> The Description cant be empty! </p>
         </div>
         <!-- /Billing Information -->
@@ -215,7 +208,7 @@ <h2 class="mt-0">Game Details</h2>
         </div>
         <!-- Order Button -->
         <div class="align-right">
-          <a class="btn btn-default db" (click)="edit($event)">Create Game</a>
+          <a class="btn btn-default db" (click)="edit($event)">Edit Game</a>
         </div>
         <!-- /Order Button -->
       </div>

code/frontend/src/app/components/games/edit-game.component.ts

@@ -9,27 +9,16 @@ import { GameService } from 'src/app/services/game.service';
 })
 export class EditGameComponent implements OnInit {
   game: Game;
-  category:string;
-  name: string;
-  price: number;
-  os: string;
-  processor: string;
-  memory: string;
-  directX: string;
-  network: string;
-  hardDrive: string;
-  soundcard: string;
-  graphics: string;
-  imageField: File = null;
-  imageFields: File[];
-  description: string;
   displayed: boolean = true;
 
   constructor(private gameService: GameService, private router: Router) { }
 
   ngOnInit(): void {
     this.gameService.getGameById(+this.router.url.split('/')[2]).subscribe((response) => {
       this.game = response.game;
+    },
+    (error) => {
+      this.router.navigate(['error/403']);
     }
     );
   }
@@ -42,7 +31,7 @@ export class EditGameComponent implements OnInit {
   }
 
   checkPrice() {
-   if (typeof this.price === 'number' && !Number.isNaN(this.price) && Number.isFinite(this.price) && this.price % 1 !== 0){
+   if (typeof this.game.price === 'number' && !Number.isNaN(this.game.price) && Number.isFinite(this.game.price) && this.game.price % 1 !== 0){
       return;
    }else{
       return "Price must be a number";
@@ -51,18 +40,18 @@ export class EditGameComponent implements OnInit {
 
   onFilesSelected(event: any) {
     if (event.target.files.length > 0) {
-      this.imageFields = event.target.files;
+      this.game.gameplayImages = event.target.files;
     }
   }
 
   onFileSelected(event: any) {
-    this.imageField = event.target.files[0];
+    this.game.titleImage = event.target.files[0];
   }
 
   edit(event: any) {
     event.preventDefault();
 
-    if (!this.checkEmpty(this.name) || !this.checkEmpty(this.category ) || !this.checkEmpty(this.os) || !this.checkEmpty(this.processor) || !this.checkEmpty(this.memory) || !this.checkEmpty(this.directX) || !this.checkEmpty(this.network) || !this.checkEmpty(this.hardDrive) || !this.checkEmpty(this.soundcard) || !this.checkEmpty(this.graphics) || !this.checkEmpty(this.description)) {
+    if (!this.checkEmpty(this.game.name) || !this.checkEmpty(this.game.category ) || !this.checkEmpty(this.game.os) || !this.checkEmpty(this.game.processor) || !this.checkEmpty(this.game.memory) || !this.checkEmpty(this.game.directX) || !this.checkEmpty(this.game.network) || !this.checkEmpty(this.game.hardDrive) || !this.checkEmpty(this.game.soundCard) || !this.checkEmpty(this.game.graphics) || !this.checkEmpty(this.game.description)) {
       this.displayed = false;
       return;
     }
@@ -72,17 +61,17 @@ export class EditGameComponent implements OnInit {
       return;
     }
 
-    if (this.imageField == null){
+    if (this.game.titleImage == null){
       this.displayed = false;
       return;
     }
 
-    if (this.imageFields == null || this.imageFields.length == 0){
+    if (this.game.gameplayImages == null || this.game.gameplayImages.length == 0){
       this.displayed = false;
       return;
     }
 
-    this.gameService.editGame(this.name, this.category, this.price, this.os, this.processor, this.memory, this.directX, this.network, this.hardDrive, this.soundcard, this.graphics, this.imageField, this.imageFields, this.description).subscribe((response) => {
+    this.gameService.editGame(this.game).subscribe((response) => {
       this.router.navigate(['/game/' + this.game.id]);
     },
     error => {

code/frontend/src/app/services/game.service.ts

@@ -87,30 +87,27 @@ export class GameService {
       ) as Observable<any>;
     }
 
-    editGame(name: string, category: string, price: number, os: string, processor: string, memory: string, directX: string, network: string, hardDrive: string, soundcard: string, graphics: string, imageField: File, imageFields: File[], description: string) {
+    editGame(game: Game) {
       const formData = new FormData();
-      formData.append('name', name);
-      formData.append('category', category);
-      formData.append('price', price.toString());
-      formData.append('os', os);
-      formData.append('processor', processor);
-      formData.append('memory', memory);
-      formData.append('directX', directX);
-      formData.append('network', network);
-      formData.append('hardDrive', hardDrive);
-      formData.append('soundcard', soundcard);
-      formData.append('graphics', graphics);
-      formData.append('imageField', imageField);
-      for (let i = 0; i < imageFields.length; i++) {
-        formData.append('imageFields', imageFields[i]);
-      }
-      formData.append('description', description);
-      return this.http.put("/api/games/", formData).pipe( map((response: any) => {
+      formData.append('name', game.name);
+      formData.append('category', game.category);
+      formData.append('price', game.price.toString());
+      formData.append('os', game.os);
+      formData.append('processor', game.processor);
+      formData.append('memory', game.memory);
+      formData.append('directX', game.directX);
+      formData.append('network', game.network);
+      formData.append('hardDrive', game.hardDrive);
+      formData.append('soundcard', game.soundCard);
+      formData.append('graphics', game.graphics);
+      formData.append('description', game.description);
+      return this.http.put("/api/games/" + game.id, formData).pipe( map((response: any) => {
         return response;
       }),
       catchError((error: any) => {
         return throwError('Something went wrong');
       })
       ) as Observable<any>;
     }
+
 }