wip: profile component

Frontend/src/app/app.component.ts

@@ -1,6 +1,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {NgcCookieConsentService, NgcInitializeEvent, NgcNoCookieLawEvent, NgcStatusChangeEvent} from 'ngx-cookieconsent';
 import {Subscription} from 'rxjs';
+import {ApiService} from "./services/api.service";
+
 
 @Component({
     selector: 'app-root',
@@ -19,12 +21,18 @@ export class AppComponent implements OnInit, OnDestroy {
     private revokeChoiceSubscription: Subscription;
     private noCookieLawSubscription: Subscription;
 
+    isLoggedIn = false;
+    showUserBoard = false;
+    username?: string;
+
     constructor(
-        private ccService: NgcCookieConsentService
+        private ccService: NgcCookieConsentService,
+        private api: ApiService
     ) {
     }
 
     ngOnInit(): void {
+
         // subscribe to cookieconsent observables to react to main events
         this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
             () => {

Frontend/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { GreetingInfoSliderComponent } from './components/greeting-info-slider/g
 import { KundenComponent } from './components/kunden/kunden.component';
 import { AboutUsComponent } from './components/about-us/about-us.component';
 import { ProfileComponent } from './components/profile/profile.component';
+import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
 
 // For cookie popup
 const cookieConfig: NgcCookieConsentConfig = {
@@ -104,6 +105,7 @@ const cookieConfig: NgcCookieConsentConfig = {
         KundenComponent,
         AboutUsComponent,
         ProfileComponent,
+        ProfilePageComponent,
     ],
     imports: [
         BrowserModule,

Frontend/src/app/app.routing.ts

@@ -12,6 +12,7 @@ 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";
+import {ProfilePageComponent} from "./pages/profile-page/profile-page.component";
 
 const routes: Routes = [
     {path: '', component: LandingpageComponent, pathMatch: 'full'},
@@ -22,7 +23,7 @@ const routes: Routes = [
     {path: 'signin', component: SigninComponent},
     {path: 'registration', component: RegistrationComponent},
     {path: "product-detail", component: ProductDetailPageComponent},
-    {path: "profile", component: ProfileComponent},
+    {path: "profile", component: ProfilePageComponent},
     {path: '**', component: PageNotFoundPageComponent}
 ];
 

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {ApiService} from "../../../services/api.service";
+import {Router} from "@angular/router";
 
 
 @Component({
@@ -15,7 +16,8 @@ export class RegistrationComponent implements OnInit {
 
   constructor(
       private formBuilder: FormBuilder,
-      private api : ApiService
+      private api : ApiService,
+      private router: Router
   ) { }
 
   ngOnInit(): void {
@@ -32,6 +34,11 @@ export class RegistrationComponent implements OnInit {
   get me() { return this.form.controls; }
 
   onSubmit() {
-      this.api.registerUser(this.form.value.username, this.form.value.password, this.form.value.email).subscribe(res=>console.log(res));
+      this.api.registerUser(this.form.value.username, this.form.value.password, this.form.value.email).subscribe(
+          res=> {
+              this.router.navigate(['']);
+              this.api.saveSessionInfoToLocalStorage(res);
+          }
+      );
   }
 }

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

@@ -43,8 +43,8 @@ export class SigninComponent implements OnInit {
             .subscribe(
                 data => {
                     this.isSuccessful = true;
-                    this.isSignUpFailed = false;
                     this.router.navigate(['']);
+                    this.api.saveSessionInfoToLocalStorage(data);
                 },
                 err => {
                     this.errorMessage = err.error.message;

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

@@ -11,16 +11,16 @@
             <!-- Portfolio Item 1-->
             <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/{{productsPricesMap[productId]?.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">{{productsPricesMap[productId]?.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>{{productsPricesMap[productId]?.amazonPrice.price_in_cents}}$</strike></span></div>
+                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{productsPricesMap[productId]?.amazonPrice?.price_in_cents/100}}$</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">{{productsPricesMap[productId]?.lowestPrice.price_in_cents}}</span></div>
+                            <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">{{productsPricesMap[productId]?.lowestPrice?.price_in_cents/100}}</span></div>
                         </div>
                         <div class="available_bar">
                             <span style="width:17%"></span>

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

@@ -86,12 +86,11 @@ export class HotDealsWidgetComponent implements OnInit {
                 this.apiService.getAmazonPrice(id).subscribe(
                     price => {
                         this.amazonPrices.push(price);
-                        this.productsPricesMap[price.product_id].amazonPrice = price;
+                        this.productsPricesMap[price[0].product_id].amazonPrice = price[0];
                     }
                 );
             }
         );
-        console.log(this.amazonPrices);
     }
 
     getSearchedProducts(): void {

Frontend/src/app/components/product-details/product-details.component.html

@@ -20,7 +20,7 @@
             {{product?.short_description}}
         </div>
     </div>
-    <div class="priceAlarm">
+    <div class="priceAlarm" (click)="setPriceAlarm()">
         Set Price Alarm
     </div>
     <div class="bestPriceContainer">

Frontend/src/app/components/product-details/product-details.component.ts

@@ -117,4 +117,10 @@ export class ProductDetailsComponent implements OnInit {
 
         return Math.round(percentage);
     }
+
+    setPriceAlarm() {
+        this.apiService.createPriceAlarms(this.productId, 9).subscribe(
+            alarms => console.log(alarms)
+        )
+    }
 }

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

@@ -7,6 +7,27 @@
         <strong>username:</strong>
         {{ currentUser.username}}
     </p>
+    <p>
+        <strong>alarms</strong>
+        {{alarms}}
+    </p>
+    <table>
+        <tr>
+            <th>Produkt</th>
+            <th>Preis</th>
+        </tr>
+        <tr *ngFor="let alarm of alarms">
+            <td>
+                {{productsMap[alarm.product_id]?.name}}
+            </td>
+            <td>
+                {{alarm.defined_price/100}}
+            </td>
+        </tr>
+    </table>
+    <p>
+        <strong><a routerLink="/">zurück</a></strong>
+    </p>
 </div>
 
 <ng-template #loggedOut>

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

@@ -9,7 +9,9 @@ import {ApiService} from "../../services/api.service";
 export class ProfileComponent implements OnInit {
 
     currentUser: any;
-    obj:any
+    obj:any;
+    alarms: any [];
+    productsMap: any;
 
     constructor(private api: ApiService ) { }
 
@@ -21,5 +23,30 @@ export class ProfileComponent implements OnInit {
                 console.log(this.currentUser);
             },
         );
+
+        this.getPriceAlarms();
+    }
+
+    getPriceAlarms(): void {
+        this.api.getPriceAlarms().subscribe(
+            alarms => {
+                this.alarms = alarms
+                this.getProductsByIds()
+            }
+        )
+    }
+
+    getProductsByIds(): void {
+        let productIds: number [];
+        this.alarms.forEach(
+            alarm => {productIds.push(alarm.product_id)}
+        );
+        this.api.getProductsByIds(productIds).subscribe(
+            products => {
+                products.forEach(
+                    product => {this.productsMap[product.product_id] = product}
+                )
+            }
+        )
     }
 }

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

@@ -2,7 +2,7 @@
     <div class="container">
         <a class="navbar-brand" routerLink=""> Betterzon</a>
         <form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" (keyup.enter)="getSearchedProducts()">
         </form>
         <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
             Menu
@@ -13,9 +13,10 @@
                 <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#top-gesuchte">Top-Gesuchte</a></li>
                 <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">über uns</a></li>
                 <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" *ngIf="!isLoggedIn"><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" *ngIf="!isLoggedIn"><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>
+                <li class="nav-item mx-0 mx-lg-1" *ngIf="isLoggedIn"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="" (click)="logout()">Log Out</a></li>
+                <li class="nav-item mx-0 mx-lg-1" *ngIf="isLoggedIn"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/profile">Profile</a></li>
             </ul>
         </div>
     </div>

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

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ApiService} from "../../services/api.service";
+import {Router} from "@angular/router";
 
 
 @Component({
@@ -10,13 +11,34 @@ import {ApiService} from "../../services/api.service";
 export class TopBarComponent implements OnInit {
 
   sidenav: any;
+  isLoggedIn: boolean;
+  @Input() searchQuery: string;
 
   constructor(
-      private api: ApiService
+      private api: ApiService,
+      private router: Router
   ) { }
 
     ngOnInit() {
 
         this.api.getUserInfo().subscribe(data=>{console.log(data)});
+
+        if ( this.api.getSessionInfoFromLocalStorage().session_id != "") {
+            this.isLoggedIn = true;
+        }
+    }
+
+    logout(): void {
+        localStorage.setItem('session_id', '');
+        localStorage.setItem('session_key', '');
+        window.location.reload()
+    }
+
+    getSearchedProducts(): void {
+        this.api.getProductsByQuery(this.searchQuery).subscribe(
+            data => {
+                this.router.navigate([('/registration')]);
+            }
+        );
     }
 }