Merge pull request #96 from Mueller-Patrick/BETTERZON-140

BETTERZON-140: Frontend improvements

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

@@ -38,6 +38,8 @@ 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';
+import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
 
 // For cookie popup
 const cookieConfig: NgcCookieConsentConfig = {
@@ -102,6 +104,8 @@ const cookieConfig: NgcCookieConsentConfig = {
         GreetingInfoSliderComponent,
         KundenComponent,
         AboutUsComponent,
+        ProfileComponent,
+        ProfilePageComponent,
     ],
     imports: [
         BrowserModule,

Frontend/src/app/app.routing.ts

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

Frontend/src/app/components/about-us/about-us.component.html

@@ -10,8 +10,8 @@
         </div>
         <!-- About Section Content-->
         <div class="row">
-            <div class="col-lg-4 ms-auto"><p class="lead">text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p></div>
-            <div class="col-lg-4 me-auto"><p class="lead">text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p></div>
+            <div class="col-lg-4 ms-auto"><p class="lead">You follow the same passion as we do and you want to find alternatives to the de-facto monopolist Amazon?</p></div>
+            <div class="col-lg-4 me-auto"><p class="lead">In this case, welcome aboard! We’re happy that you share our passion and hope that we can help you achieving this goal with the website</p></div>
         </div>
     </div>
 </section>

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

@@ -6,7 +6,7 @@
         <div class="col-md-8 col-xs-12 col-sm-12 login_form ">
             <div class="container-fluid">
                 <div class="row">
-                    <h2>Konto erstellen</h2>
+                    <h2>Registration</h2>
                 </div>
                 <div class="row">
                     <form [formGroup]="form" class="form-group" (ngSubmit)="onSubmit()">
@@ -22,17 +22,17 @@
                         </div>
                         <div class="row">
                             <!-- <span class="fa fa-lock"></span> -->
-                            <input type="password" formControlName="password" name="password" id="password" class="form__input" placeholder="Kennwort">
+                            <input type="password" formControlName="password" name="password" id="password" class="form__input" placeholder="Password">
                         </div>
                         <!--
                         <div class="row">
                             <input type="password" name="password" id="password_repeated" class="form__input" placeholder="Kennwort bestätigen">
                         </div> -->
                         <div class="row">
-                            <input type="submit" value="Erstellen" class="btn_signin">
+                            <input type="submit" value="Sign up" class="btn_signin">
                         </div>
                         <div class="row">
-                            <a href="/signin">Sich anmelden</a>
+                            <p>Have an account?<a href="/signin">Log In</a></p>
                         </div>
                     </form>
                 </div>

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.api.saveSessionInfoToLocalStorage(res);
+              this.router.navigate(['/']);
+          }
+      );
   }
 }

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

@@ -6,7 +6,7 @@
         <div class="col-md-8 col-xs-12 col-sm-12 login_form ">
             <div class="container-fluid">
                 <div class="row">
-                    <h2>Anmelden</h2>
+                    <h2>Sign In</h2>
                 </div>
                 <div class="row">
                     <form [formGroup]="loginForm" class="form-group" (ngSubmit)="onSubmit()">
@@ -18,12 +18,12 @@
                             <input type="password" formControlName="password" name="password" id="password" class="form__input" placeholder="Password">
                         </div>
                         <div class="row">
-                            <input type="submit" value="Anmelden" class="btn_signin">
+                            <input type="submit" value="Log in" class="btn_signin">
                         </div>
                     </form>
                 </div>
                 <div class="row">
-                    <a href="/registration">Konto erstellen</a>
+                    <p>No account yet?<a href="/registration">sign up</a></p>
                 </div>
             </div>
         </div>

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,9 +42,8 @@ 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.router.navigate(['']);
                     this.api.saveSessionInfoToLocalStorage(data);
                 },
                 err => {

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

@@ -5,24 +5,22 @@
             <div class="col-lg-4 mb-5 mb-lg-0">
                 <h4 class="text-uppercase mb-4">Location</h4>
                 <p class="lead mb-0">
-                    70376 Stuttgart
+                    76133 Karlsruhe
                     <br />
 
                 </p>
             </div>
             <!-- Footer Social Icons-->
             <div class="col-lg-4 mb-5 mb-lg-0">
-                <h4 class="text-uppercase mb-4">FOLGE UNS</h4>
-                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-github"></i></a>
-                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
-                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
-                <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
+                <h4 class="text-uppercase mb-4">FOLLOW UNS</h4>
+                <a class="btn btn-outline-light btn-social mx-1" href="https://github.com/Mueller-Patrick/Betterzon"><i class="fab fa-fw fa-github"></i></a>
+                <a class="btn btn-outline-light btn-social mx-1" href="https://blog.betterzon.xyz/"><i class="fab fa-fw fa-dribbble"></i></a>
             </div>
             <!-- Footer About Text-->
             <div class="col-lg-4">
-                <h4 class="text-uppercase mb-4">SOME INFO</h4>
+                <h4 class="text-uppercase mb-4">CONTACT US</h4>
                 <p class="lead mb-0">
-                    text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+                    betterzon-contact@mueller-patrick.tech
                 </p>
             </div>
         </div>

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

@@ -1,7 +1,7 @@
 <section class="page-section portfolio" id="top-gesuchte">
     <div class="container">
         <!-- Portfolio Section Heading-->
-        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">TOP-ANGEBOTE</h2>
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">TOP-SEARCHES</h2>
         <!-- Icon Divider-->
         <div class="divider-custom">
             <div class="divider-custom-line"></div>
@@ -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/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">599,00$</span></div>
+                            <div class="bbb_deals_item_category">{{productsPricesMap[productId]?.vendor?.name}}: <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

@@ -11,6 +11,9 @@ import {ActivatedRoute, Router} from '@angular/router';
 export class HotDealsWidgetComponent implements OnInit {
 
     products: Product[] = [];
+    bestDealsProductIds = [];
+    amazonPrices = [];
+    productsPricesMap = new Map();
     @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,69 @@ export class HotDealsWidgetComponent implements OnInit {
 
         switch (this.type) {
             case 'search': {
-                this.getSearchedProducts();
                 break;
             }
             default: {
-                this.getProducts();
+                this.getProductsByIds();
+                this.getAmazonPricesForBestDeals();
+                this.getVendors()
                 break;
             }
         }
     }
 
-    getProducts(): void {
-        this.apiService.getProducts().subscribe(products => this.products = products);
+    getProductsByIds(): void {
+        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();
+            }
+        );
+    }
+
+    getVendors(): void {
+        this.bestDealsProductIds.forEach(
+            productId => {
+                const currentDeal = this.productsPricesMap[productId].lowestPrice;
+                this.apiService.getVendorById(currentDeal.vendor_id).subscribe(
+                    vendor => {
+                        this.productsPricesMap[productId].vendor = vendor;
+                    });
+            });
+    }
+
+
+    getAmazonPricesForBestDeals(): void{
+        this.bestDealsProductIds.forEach(id => {
+                this.apiService.getAmazonPrice(id).subscribe(
+                    price => {
+                        this.amazonPrices.push(price);
+                        this.productsPricesMap[price[0].product_id].amazonPrice = price[0];
+                    }
+                );
+            }
+        );
     }
 
     getSearchedProducts(): void {
         this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
     }
 
-    clickedProduct(product: Product): void {
-        this.router.navigate([('/product/' + product.product_id)]);
+    clickedProduct(productId: string): void {
+        this.router.navigate([('/product/' + productId)]);
     }
 
 

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

@@ -1,7 +1,7 @@
 <section class="page-section portfolio" id="unsere-kunden">
     <div class="container">
         <!-- Portfolio Section Heading-->
-        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">SIE VERTRAUEN UNS</h2>
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">THEY TRUST US</h2>
         <!-- Icon Divider-->
         <div class="divider-custom">
             <div class="divider-custom-line"></div>

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

@@ -1,3 +1,6 @@
+<header class="masthead bg-transparent text-white text-center" id="w1">
+
+</header>
 <div class="productItem">
     <div class="productImageContainer">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
@@ -20,8 +23,12 @@
             {{product?.short_description}}
         </div>
     </div>
-    <div class="priceAlarm">
-        Set Price Alarm
+    <div class="priceAlarm" *ngIf="!isLoggedIn" routerLink="/signin">
+        Login to set a price alarm
+    </div>
+    <div class="priceAlarm" *ngIf="isLoggedIn">
+        <input type="search" id="s" name="price" [(ngModel)]="price">
+        <div (click)="setPriceAlarm()">Set Price Alarm</div>
     </div>
     <div class="bestPriceContainer">
         <div class="bestPrice">

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

@@ -34,6 +34,8 @@ export class ProductDetailsComponent implements OnInit {
     vendorMap = {};
     @ViewChild('chart') chart: ChartComponent;
     public chartOptions: ChartOptions;
+    isLoggedIn: boolean;
+    price: any;
 
     constructor(
         private apiService: ApiService
@@ -44,6 +46,9 @@ export class ProductDetailsComponent implements OnInit {
         this.getProduct();
         this.getVendors();
         this.getPrices();
+        if (this.apiService.getSessionInfoFromLocalStorage().session_id != "") {
+            this.isLoggedIn = true;
+        }
     }
 
     getProduct(): void {
@@ -117,4 +122,12 @@ export class ProductDetailsComponent implements OnInit {
 
         return Math.round(percentage);
     }
+
+    setPriceAlarm() {
+        this.apiService.createPriceAlarms(this.productId, this.price*100).subscribe(
+            alarms => console.log(alarms)
+        )
+    }
+
+
 }

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

@@ -1,6 +1,30 @@
 <div *ngIf="products.length==0">
     No Products found!
 </div>
+<div class="container mt-5 mb-5">
+    <div class="d-flex justify-content-center row">
+        <div class="col-md-10">
+            <div class="row p-2 bg-white border rounded" *ngFor="let product of products">
+                <div class="col-md-3 mt-1"><img width="50%" class="img-fluid img-responsive rounded product-image" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"></div>
+                <div class="col-md-6 mt-1">
+                    <h5>{{product.name}}</h5>
+                    <div class="d-flex flex-row">
+                        <p class="text-justify text-truncate para mb-0">{{product.short_description}}</p>
+                    </div>
+                    <div class="mt-1 mb-1 spec-1"><span></span><span class="dot"></span><span></span><span class="dot"></span><span><br></span></div>
+                    <div class="mt-1 mb-1 spec-1"><span></span><span class="dot"></span><span></span><span class="dot"></span><span><br></span></div>
+                </div>
+                <div class="align-items-center align-content-center col-md-3 border-left mt-1">
+                    <div class="d-flex flex-row align-items-center">
+                        <h4 class="mr-1">${{pricesMap[product.product_id]?.price_in_cents/100}}</h4>
+                    </div>
+                    <div class="d-flex flex-column mt-4"><button class="btn btn-primary btn-sm" type="button" (click)="clickedProduct(product)">Details</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--
 <div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
     <div class="productImageContainer" *ngIf="showProductPicture===true">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
@@ -20,3 +44,4 @@
         </div>
     </div>
 </div>
+-->

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

@@ -10,6 +10,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 })
 export class ProductListComponent implements OnInit {
     products: Product[] = [];
+    pricesMap: any = {};
     @Input() numberOfProducts: number;
     @Input() showProductPicture: boolean;
     @Input() searchQuery: string;
@@ -53,15 +54,35 @@ export class ProductListComponent implements OnInit {
     }
 
     getProducts(): void {
-        this.apiService.getProducts().subscribe(products => this.products = products);
+        this.apiService.getProducts().subscribe(products => {
+            this.products = products;
+            this.getPrices();
+        });
     }
 
+    getPrices(): void {
+        this.products.forEach(
+            product => {
+                this.apiService.getLowestPrices(product.product_id).subscribe(
+                    prices => {
+                        this.pricesMap[product.product_id] = prices[prices.length - 1];
+                    }
+                );
+            }
+        );
+    }
+
+
     getSearchedProducts(): void {
-        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => {
+            this.products = products;
+            this.getPrices();
+        });
     }
     
     clickedProduct(product: Product): void {
         this.router.navigate([('/product/' + product.product_id)]);
     }
 
+
 }

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

@@ -0,0 +1,21 @@
+.inf-content{
+    border:1px solid #DDDDDD;
+    -webkit-border-radius:10px;
+    -moz-border-radius:10px;
+    border-radius:10px;
+    box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
+}
+
+.header-in-page {
+    padding-top: calc(1rem + 20px);
+    padding-bottom: 1rem;
+}
+
+table, th, td {
+    border: 1px solid black;
+}
+
+.delete:hover {
+    cursor: pointer;
+    color: #0d5a4b;
+}

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

@@ -0,0 +1,137 @@
+<div class="container bootstrap snippets bootdey">
+    <div class="panel-body inf-content">
+        <div class="row">
+            <div class="col-md-4">
+                <img alt="" style="width:600px;" title="" class="img-circle img-thumbnail isTooltip" src="https://bootdey.com/img/Content/avatar/avatar7.png" data-original-title="Usuario">
+                <ul title="Ratings" class="list-inline ratings text-center">
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                    <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
+                </ul>
+            </div>
+            <div class="col-md-6">
+                <strong>Information</strong><br>
+                <div class="table-responsive">
+                    <table class="table table-user-information">
+                        <tbody>
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-bookmark text-primary"></span>
+                                    Username
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                {{currentUser.username}}
+                            </td>
+                        </tr>
+
+
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-eye-open text-primary"></span>
+                                    Role
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                User
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-envelope text-primary"></span>
+                                    Email
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                {{currentUser.email}}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <strong>
+                                    <span class="glyphicon glyphicon-calendar text-primary"></span>
+                                    created
+                                </strong>
+                            </td>
+                            <td class="text-primary">
+                                {{currentUser.registration_date}}
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<header class="header-in-page">
+
+</header>
+<div class="container bootstrap snippets bootdey">
+    <div class="col-auto">
+        <table class="table table-hover">
+            <tr>
+                <th>Product</th>
+                <th>Price</th>
+                <th>Change</th>
+                <th>Delete</th>
+            </tr>
+            <tr *ngFor="let alarm of alarms">
+                <td>
+                    {{productsMap[alarm.product_id]?.name}}
+                </td>
+                <td>
+                    {{alarm.defined_price/100}}
+                </td>
+                <td>
+                    <img class="delete" src="../assets/images/Delete_icon-icons.com_55931.png" (click)="delete(alarm.alarm_id)">
+                </td>
+                <td>
+                    <img class="delete" src="../assets/images/Delete_icon-icons.com_55931.png" (click)="delete(alarm.alarm_id)">
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<!--
+<div class="container" *ngIf="currentUser; else loggedOut">
+    <p>
+        <strong>e-mail</strong>
+        {{ currentUser.email}}
+    </p>
+    <p>
+        <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>
+    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,58 @@
+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;
+    alarms: any [];
+    productsMap: any = {};
+
+    constructor(private api: ApiService ) { }
+
+    ngOnInit(): void {
+
+        this.api.getUserInfo().subscribe(
+            user=> {
+                this.currentUser = user
+                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}
+                )
+            }
+        )
+    }
+
+    delete(id:number): void {
+        this.api.deletePriceAlarm(id).subscribe(
+            res => window.location.reload()
+        )
+    }
+}

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

@@ -1,20 +1,22 @@
 <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
     <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">
-        </form>
+        <div class="form-inline my-2 my-lg-0">
+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" (keyup.enter)="getSearchedProducts()" [(ngModel)]="searchQuery">
+        </div>
         <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
             <i class="fas fa-bars"></i>
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
             <ul class="navbar-nav ms-auto">
-                <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"><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" href="#top-gesuchte">top-searches</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">about</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">our clients</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">sign in</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">sign up</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,22 +1,49 @@
-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({
-  selector: 'app-top-bar',
-  templateUrl: './top-bar.component.html',
-  styleUrls: ['./top-bar.component.css']
+    selector: 'app-top-bar',
+    templateUrl: './top-bar.component.html',
+    styleUrls: ['./top-bar.component.css']
 })
 export class TopBarComponent implements OnInit {
 
-  sidenav: any;
+    sidenav: any;
+    isLoggedIn: boolean;
+    searchQuery: string;
 
-  constructor(
-      private api: ApiService
-  ) { }
+    constructor(
+        private api: ApiService,
+        private router: Router
+    ) {
+    }
 
     ngOnInit() {
 
-        this.api.getUserInfo().subscribe(data=>{console.log(data)});
+        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 {
+        console.log(this.searchQuery);
+        this.redirectTo('/search', {queryParams: {q: this.searchQuery}});
+    }
+
+    redirectTo(uri: string, queryParams: object): void {
+        this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
+            this.router.navigate([uri], queryParams));
     }
 }

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

@@ -1,50 +0,0 @@
-#mainComponents {
-    margin: 5em;
-    margin-top: .5em;
-    margin-bottom: .5em;
-}
-
-#productListsContainer {
-    display: grid;
-    grid-template-areas:
-    'search search'
-    'popularSearches bestDeals';
-    grid-template-columns: 50% 50%;
-}
-
-#searchContainer {
-    position: relative;
-    grid-area: search;
-    height: 10em;
-}
-
-#searchContainer input {
-    position: relative;
-    font-size: 1.5em;
-    padding: .25em;
-    display: block;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-    margin: auto;
-    -ms-transform: translateY(50%);
-    transform: translateY(2.5em);
-}
-
-#popularSearchesList {
-    grid-area: popularSearches;
-    padding: .5em;
-}
-
-#popularSearchesList h2 {
-    text-align: center;
-}
-
-#bestDealsList {
-    grid-area: bestDeals;
-    padding: .5em;
-}
-
-#bestDealsList h2 {
-    text-align: center;
-}

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));
     }
-
 }

Frontend/src/app/pages/product-search-page/product-search-page.component.css

@@ -1,5 +1,43 @@
-#mainComponents {
-    margin: 5em;
-    margin-top: .5em;
-    margin-bottom: .5em;
+body {
+    background: #eee
 }
+
+.ratings i {
+    font-size: 16px;
+    color: red
+}
+
+.strike-text {
+    color: red;
+    text-decoration: line-through
+}
+
+.product-image {
+    width: 20%;
+    height: 20%;
+}
+
+.dot {
+    height: 7px;
+    width: 7px;
+    margin-left: 6px;
+    margin-right: 6px;
+    margin-top: 3px;
+    background-color: blue;
+    border-radius: 50%;
+    display: inline-block
+}
+
+.spec-1 {
+    color: #938787;
+    font-size: 15px
+}
+
+h5 {
+    font-weight: 400
+}
+
+.para {
+    font-size: 16px
+}
+

Frontend/src/app/pages/product-search-page/product-search-page.component.html

@@ -1,6 +1,14 @@
+<app-top-bar></app-top-bar>
+<header class="masthead bg-transparent text-white text-center" id="w1">
+
+</header>
+
 <div id="mainComponents">
     <app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
                       type="search"></app-product-list>
 </div>
 
-<app-footer></app-footer>
+<header class="masthead bg-transparent text-white text-center">
+
+</header>
+<app-bottom-bar></app-bottom-bar>

Frontend/src/app/pages/profile-page/profile-page.component.css

@@ -0,0 +1,4 @@
+.header-in-page {
+    padding-top: calc(2rem + 20px);
+    padding-bottom: 6rem;
+}

Frontend/src/app/pages/profile-page/profile-page.component.html

@@ -0,0 +1,10 @@
+<app-top-bar></app-top-bar>
+<header class="header-in-page">
+
+</header>
+<app-profile></app-profile>
+<header class="header-in-page">
+
+</header>
+<app-bottom-bar></app-bottom-bar>
+<app-copyright></app-copyright>

Frontend/src/app/pages/profile-page/profile-page.component.spec.ts

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

Frontend/src/app/pages/profile-page/profile-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile-page',
+  templateUrl: './profile-page.component.html',
+  styleUrls: ['./profile-page.component.css']
+})
+export class ProfilePageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/styles.css

@@ -447,8 +447,8 @@ progress {
 }
 
 .lead {
-    font-size: 1.25rem;
-    font-weight: 300;
+    font-size: 1.30rem;
+    font-weight: 400;
 }
 
 .display-1 {