wip: hot deals widget loadig data

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html

@@ -9,18 +9,18 @@
         <!-- Portfolio Grid Items-->
         <div class="row justify-content-center">
             <!-- Portfolio Item 1-->
-            <div class="col-md-4 mx-auto my-5" *ngFor="let product of products" (click)="clickedProduct(product)">
+            <div class="col-md-4 mx-auto my-5" *ngFor="let productId of bestDealsProductIds" (click)="clickedProduct(productId)">
                 <div class="bbb_deals_wrapper">
-                    <div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg" alt=""></div>
+                    <div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{productsPricesMap[productId]?.product.image_guid}}.jpg" alt=""></div>
                     <div class="bbb_deals_content">
                         <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
-                            <div class="bbb_deals_item_name">{{product.name}}</div>
+                            <div class="bbb_deals_item_name">{{productsPricesMap[productId]?.product.name}}</div>
                         </div>
                         <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
-                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{product.price}}$</strike></span></div>
+                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{productsPricesMap[productId]?.amazonPrice.price_in_cents}}$</strike></span></div>
                         </div>
                         <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
-                            <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div>
+                            <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">{{productsPricesMap[productId]?.lowestPrice.price_in_cents}}</span></div>
                         </div>
                         <div class="available_bar">
                             <span style="width:17%"></span>

Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts

@@ -12,6 +12,8 @@ export class HotDealsWidgetComponent implements OnInit {
 
     products: Product[] = [];
     bestDealsProductIds = [];
+    amazonPrices = [];
+    productsPricesMap: any = {};
     @Input() numberOfProducts: number;
     @Input() showProductPicture: boolean;
     @Input() searchQuery: string;
@@ -26,7 +28,6 @@ export class HotDealsWidgetComponent implements OnInit {
 
     ngOnInit(): void {
 
-        this.loadParams();
         this.getBestDeals();
     }
 
@@ -46,11 +47,11 @@ export class HotDealsWidgetComponent implements OnInit {
 
         switch (this.type) {
             case 'search': {
-                this.getSearchedProducts();
                 break;
             }
             default: {
                 this.getProductsByIds();
+                this.getAmazonPricesForBestDeals();
                 break;
             }
         }
@@ -58,27 +59,47 @@ export class HotDealsWidgetComponent implements OnInit {
 
     getProductsByIds(): void {
         this.apiService.getProductsByIds(this.bestDealsProductIds).subscribe(
-            products => this.products = products
+            products => {
+                products.forEach(product => {
+                    this.productsPricesMap [product.product_id].product = product;
+                });
+            }
         );
     }
 
-
     getBestDeals(): void {
         this.apiService.getBestDeals(9).subscribe(
             deals => {
                 deals.forEach(deal => {
                     this.bestDealsProductIds.push(deal.product_id);
+                    this.productsPricesMap [deal.product_id] = {lowestPrice: deal}
                 });
+                this.loadParams();
             }
         );
     }
 
+
+
+    getAmazonPricesForBestDeals(): void{
+        this.bestDealsProductIds.forEach(id => {
+                this.apiService.getAmazonPrice(id).subscribe(
+                    price => {
+                        this.amazonPrices.push(price);
+                        this.productsPricesMap[price.product_id].amazonPrice = price;
+                    }
+                );
+            }
+        );
+        console.log(this.amazonPrices);
+    }
+
     getSearchedProducts(): void {
         this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
     }
 
-    clickedProduct(product: Product): void {
+    clickedProduct(productId: string): void {
-        this.router.navigate([('/product/' + product.product_id)]);
+        this.router.navigate([('/product/' + productId)]);
     }
 
 

Frontend/src/app/components/top-bar/top-bar.component.html

@@ -15,6 +15,7 @@
                 <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#unsere-kunden">Unsere Kunden</a></li>
                 <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/signin">Anmelden</a></li>
                 <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li>
+                <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Log Out</a></li>
             </ul>
         </div>
     </div>