Make img carousel work

database/mistox.sql

@@ -32,7 +32,7 @@ CREATE TABLE IF NOT EXISTS `ProductImage` (
   `ImageID` int(11) NOT NULL AUTO_INCREMENT,
   `ProductID` int(11) NOT NULL,
   `Image` MEDIUMBLOB,
-  `Name` varchar(60) DEFAULT NULL,
+  `Name` varchar(200) DEFAULT NULL,
   PRIMARY KEY (`ImageID`,`ProductID`)
 ) AUTO_INCREMENT=1;
 

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html

@@ -2,8 +2,8 @@
     <div class="gameCard" *ngFor="let product of Products">
         <div style="position: relative;">
             <div *ngIf="product.images.length > 1">
-                <button class="gameCard-Prev" onclick="">❮</button>
-                <button class="gameCard-Next" onclick="">❯</button>
+                <button class="gameCard-Prev" (click)="nextImg(product)">❮</button>
+                <button class="gameCard-Next" (click)="prevImg(product)">❯</button>
             </div>
             <div *ngIf="product.images.length > 0" >
                 <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.ts

@@ -40,6 +40,20 @@ export class CatalogComponent {
     )
   };
 
+  nextImg( prod: Product ){
+    prod.curShowingIMG += 1;
+    if (prod.curShowingIMG == prod.images.length){
+      prod.curShowingIMG = 0;
+    }
+  }
+
+  prevImg( prod: Product ){
+    prod.curShowingIMG -= 1;
+    if (prod.curShowingIMG == -1){
+      prod.curShowingIMG = prod.images.length -1;
+    }
+  }
+
   DeleteItem( ProductID: number ) {
     const body = new HttpParams()
         .set("productID", ProductID);

src/MistoxWebsite.Server/Controllers/ProductController.cs

@@ -72,7 +72,8 @@ namespace MistoxWebsite.Server.Controllers {
                 obj.Images = building.ToArray();
                 await _databaseService.NewProduct(obj);
                 return true;
-            } catch {
+            } catch (Exception e) {
+                Console.WriteLine(e);
                 return false;
             }
         }