hot-deals component is done.

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

@@ -1,72 +1,97 @@
-.hot-deal-widget-wrapper{
+.bbb_deals_wrapper {
-    width: 1640px;
+    overflow: hidden;
-    height: 820px;
-    background-color: #f8f9fa;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    align-items: center;
 }
 
-.product-description {
+.bbb_deals_wrapper:hover {
-    /*background-color: #3480E3;*/
+    transform: scale(1.2);
-    height: 100%;
-    display: grid;
-    grid-template-columns: 15% 16px 15% 16px 15% 16px 15% 16px 15% 16px 15% 8px;
-    grid-template-rows: repeat(5, 1fr);
 }
 
-.product-image {
+.bbb_deals_featured {
-
+    width: 100%;
 }
 
-#hot-deals{
+.bbb_deals {
-    /*background-color: #E53167;*/
+    width: 100%;
-    justify-self: center;
+    margin-right: 7%;
-    align-self: center;
+    padding-top: 80px;
-    grid-column: 3/10;
+    padding-left: 25px;
-    grid-row: 1/2;
+    padding-right: 25px;
+    padding-bottom: 34px;
+    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    margin-top: 0px
 }
 
-#product-name {
+.bbb_deals_title {
-    justify-self: center;
+    position: absolute;
-    align-self: center;
+    top: 10px;
-    grid-column: 3/10;
+    left: 22px;
-    grid-row: 2/3;
+    font-size: 18px;
-    /*background-color: #E53167;*/
+    font-weight: 500;
+    color: #000000
 }
 
-#product-name > p {
+.bbb_deals_slider_container {
-    font-size: 65px;
+    width: 100%
 }
 
-#sales {
+.bbb_deals_item {
-    justify-self: center;
+    width: 100% !important
-    align-self: center;
-    grid-column: 3/10;
-    grid-row: 3/4;
-    /*background-color: #E53167;*/
 }
 
-#futher-informations {
+.bbb_deals_image {
-    justify-self: center;
+    width: 40%;
-    align-self: center;
+    height: 40%;
-    grid-column: 3/10;
-    grid-row: 4/5;
-    /*background-color: #E53167;*/
 }
 
-#points {
+.bbb_deals_image img {
-    justify-self: center;
+    width: 100%
-    align-self: start;
-    grid-column: 3/10;
-    grid-row: 5/6;
-    /*background-color: #E53167;*/
 }
 
-.product-image {
+.bbb_deals_content {
-    display: grid;
+    margin-top: 33px
-    justify-content: center;
 }
 
+.bbb_deals_item_category a {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.5)
+}
+
+#bbb_deals_item_price_a {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    color: red;
+}
+
+#bbb_deals_item_price_b {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    color: green;
+}
+
+.bbb_deals_item_name {
+    max-width: 300px;
+    word-wrap: break-word;
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+}
+
+.bbb_deals_item_price {
+    font-size: 24px;
+    font-weight: 500;
+    color: #228B22;
+}
+
+.available {
+    margin-top: 19px
+}
+
+.available_title {
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 400
+}

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

@@ -1,23 +1,34 @@
-<div class="hot-deal-widget-wrapper">
+<section class="page-section portfolio" id="top-gesuchte">
-    <div class="product-description">
+    <div class="container">
-        <div id="hot-deals">
+        <!-- Portfolio Section Heading-->
-            <h1>HOT DEALS</h1>
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">TOP-ANGEBOTE</h2>
+        <!-- Icon Divider-->
+        <div class="divider-custom">
+            <div class="divider-custom-line"></div>
         </div>
-        <div id="product-name">
+        <!-- Portfolio Grid Items-->
-            <h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1>
+        <div class="row justify-content-center">
+            <!-- Portfolio Item 1-->
+            <div class="col-md-4 mx-auto my-5" *ngFor="let product of products">
+                <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_content">
+                        <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
+                            <div class="bbb_deals_item_name">{{product.name}}</div>
                         </div>
-        <div id="sales">
+                        <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
-            SPARE BIS ZU 7%!
+                            <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>699.00$</strike></span></div>
                         </div>
-        <div id="futher-informations">
+                        <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
-            Weitere Informationen
+                            <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div>
                         </div>
-        <div id="points">
+                        <div class="available_bar">
-            points
+                            <span style="width:17%"></span>
                         </div>
                         </div>
-    <div class="product-image">
-        <img src="assets/images/iphone-12-pro-silver-hero.png" height="771">
                     </div>
-</div>
+                </div>
+            </div>
+        </div>
+</section>
 

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

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api.service';
+import {Product} from '../../models/product';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-hot-deals-widget',
@@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HotDealsWidgetComponent implements OnInit {
 
-  constructor() { }
+    products: Product[] = [];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
+    @Input() searchQuery: string;
+    @Input() type: string;
 
-  ngOnInit(): void {
+    constructor(
+        private apiService: ApiService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {
     }
 
+    ngOnInit(): void {
+        this.loadParams();
+    }
+
+    loadParams(): void {
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
+        if (!this.searchQuery) {
+            this.searchQuery = '';
+        }
+        if (!this.type) {
+            this.type = '';
+        }
+
+        switch (this.type) {
+            case 'search': {
+                this.getSearchedProducts();
+                break;
+            }
+            default: {
+                this.getProducts();
+                break;
+            }
+        }
+    }
+
+    getProducts(): void {
+        this.apiService.getProducts().subscribe(products => this.products = products);
+    }
+
+    getSearchedProducts(): void {
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+    }
+
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/product/' + product.product_id)]);
+    }
+
+
 }