wip: hot deals widget loadig data

BETTERZON-140: Product Details Part 1

Frontend/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { CopyrightComponent } from './components/copyright/copyright.component';
 import { GreetingInfoSliderComponent } from './components/greeting-info-slider/greeting-info-slider.component';
 import { KundenComponent } from './components/kunden/kunden.component';
 import { AboutUsComponent } from './components/about-us/about-us.component';
+import { ProfileComponent } from './components/profile/profile.component';
 
 // For cookie popup
 const cookieConfig: NgcCookieConsentConfig = {
@@ -102,6 +103,7 @@ const cookieConfig: NgcCookieConsentConfig = {
         GreetingInfoSliderComponent,
         KundenComponent,
         AboutUsComponent,
+        ProfileComponent,
     ],
     imports: [
         BrowserModule,

Frontend/src/app/app.routing.ts

@@ -11,6 +11,7 @@ import {ImprintComponent} from './pages/imprint/imprint.component';
 import {PrivacyComponent} from './pages/privacy/privacy.component';
 import {SigninComponent} from "./components/auth/signin/signin.component";
 import {RegistrationComponent} from "./components/auth/registration/registration.component";
+import {ProfileComponent} from "./components/profile/profile.component";
 
 const routes: Routes = [
     {path: '', component: LandingpageComponent, pathMatch: 'full'},
@@ -21,6 +22,7 @@ const routes: Routes = [
     {path: 'signin', component: SigninComponent},
     {path: 'registration', component: RegistrationComponent},
     {path: "product-detail", component: ProductDetailPageComponent},
+    {path: "profile", component: ProfileComponent},
     {path: '**', component: PageNotFoundPageComponent}
 ];
 

Frontend/src/app/components/auth/signin/signin.component.ts

@@ -18,7 +18,6 @@ export class SigninComponent implements OnInit {
     private isSignUpFailed: boolean;
     private errorMessage: '';
 
-
     constructor(
         private formBuilder: FormBuilder,
         private api: ApiService,
@@ -43,10 +42,9 @@ export class SigninComponent implements OnInit {
         this.api.loginUser(this.loginForm.value.username, this.loginForm.value.password)
             .subscribe(
                 data => {
-                    this.router.navigate(['']);
                     this.isSuccessful = true;
                     this.isSignUpFailed = false;
-                    this.api.saveSessionInfoToLocalStorage(data);
+                    this.router.navigate(['']);
                 },
                 err => {
                     this.errorMessage = err.error.message;

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

@@ -11,6 +11,9 @@ import {ActivatedRoute, Router} from '@angular/router';
 export class HotDealsWidgetComponent implements OnInit {
 
     products: Product[] = [];
+    bestDealsProductIds = [];
+    amazonPrices = [];
+    productsPricesMap: any = {};
     @Input() numberOfProducts: number;
     @Input() showProductPicture: boolean;
     @Input() searchQuery: string;
@@ -24,12 +27,13 @@ export class HotDealsWidgetComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.loadParams();
+
+        this.getBestDeals();
     }
 
     loadParams(): void {
         if (!this.numberOfProducts) {
-            this.numberOfProducts = 10;
+            this.numberOfProducts = 9;
         }
         if (!this.showProductPicture) {
             this.showProductPicture = false;
@@ -43,26 +47,59 @@ export class HotDealsWidgetComponent implements OnInit {
 
         switch (this.type) {
             case 'search': {
-                this.getSearchedProducts();
                 break;
             }
             default: {
-                this.getProducts();
+                this.getProductsByIds();
+                this.getAmazonPricesForBestDeals();
                 break;
             }
         }
     }
 
-    getProducts(): void {
+    getProductsByIds(): void {
-        this.apiService.getProducts().subscribe(products => this.products = products);
+        this.apiService.getProductsByIds(this.bestDealsProductIds).subscribe(
+            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/profile/profile.component.html

@@ -0,0 +1,15 @@
+<div class="container" *ngIf="currentUser; else loggedOut">
+    <p>
+        <strong>e-mail</strong>
+        {{ currentUser.email}}
+    </p>
+    <p>
+        <strong>username:</strong>
+        {{ currentUser.username}}
+    </p>
+</div>
+
+<ng-template #loggedOut>
+    Please login.
+</ng-template>
+

Frontend/src/app/components/profile/profile.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/profile/profile.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import {ApiService} from "../../services/api.service";
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+    currentUser: any;
+    obj:any
+
+    constructor(private api: ApiService ) { }
+
+    ngOnInit(): void {
+
+        this.api.getUserInfo().subscribe(
+            user=> {
+                this.currentUser = user
+                console.log(this.currentUser);
+            },
+        );
+    }
+}

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>

Frontend/src/app/pages/landingpage/landingpage.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {ApiService} from "../../services/api.service";
 
 @Component({
     selector: 'app-landingpage',
@@ -8,13 +9,16 @@ import {Router} from '@angular/router';
 })
 export class LandingpageComponent implements OnInit {
     searchInput: string;
+    isLoggedIn = false;
 
     constructor(
-        private router: Router
+        private router: Router,
+        private api: ApiService
     ) {
     }
 
     ngOnInit(): void {
+
     }
 
     startedSearch(): void {
@@ -25,5 +29,4 @@ export class LandingpageComponent implements OnInit {
         this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
             this.router.navigate([uri], queryParams));
     }
-
 }