From 14b943b64afba084fe5006b78862e3dad83fd386 Mon Sep 17 00:00:00 2001 From: Jegor Date: Mon, 7 Jun 2021 09:58:10 +0200 Subject: [PATCH] hot-deals component is done. --- .../hot-deals-widget.component.css | 129 +++++++++++------- .../hot-deals-widget.component.html | 51 ++++--- .../hot-deals-widget.component.ts | 62 ++++++++- 3 files changed, 166 insertions(+), 76 deletions(-) diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css index 4876607..a9a0257 100644 --- a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css +++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css @@ -1,72 +1,97 @@ -.hot-deal-widget-wrapper{ - width: 1640px; - height: 820px; - background-color: #f8f9fa; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 0px; - grid-row-gap: 0px; - align-items: center; +.bbb_deals_wrapper { + overflow: hidden; } -.product-description { - /*background-color: #3480E3;*/ - 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); +.bbb_deals_wrapper:hover { + transform: scale(1.2); } -.product-image { - +.bbb_deals_featured { + width: 100%; } -#hot-deals{ - /*background-color: #E53167;*/ - justify-self: center; - align-self: center; - grid-column: 3/10; - grid-row: 1/2; +.bbb_deals { + width: 100%; + margin-right: 7%; + padding-top: 80px; + padding-left: 25px; + 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 { - justify-self: center; - align-self: center; - grid-column: 3/10; - grid-row: 2/3; - /*background-color: #E53167;*/ +.bbb_deals_title { + position: absolute; + top: 10px; + left: 22px; + font-size: 18px; + font-weight: 500; + color: #000000 } -#product-name > p { - font-size: 65px; +.bbb_deals_slider_container { + width: 100% } -#sales { - justify-self: center; - align-self: center; - grid-column: 3/10; - grid-row: 3/4; - /*background-color: #E53167;*/ +.bbb_deals_item { + width: 100% !important } -#futher-informations { - justify-self: center; - align-self: center; - grid-column: 3/10; - grid-row: 4/5; - /*background-color: #E53167;*/ +.bbb_deals_image { + width: 40%; + height: 40%; } -#points { - justify-self: center; - align-self: start; - grid-column: 3/10; - grid-row: 5/6; - /*background-color: #E53167;*/ +.bbb_deals_image img { + width: 100% } -.product-image { - display: grid; - justify-content: center; +.bbb_deals_content { + margin-top: 33px } +.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 +} diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html index ae2d98f..36ea156 100644 --- a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html +++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html @@ -1,23 +1,34 @@ -
-
-
-

HOT DEALS

+
+
+ +

TOP-ANGEBOTE

+ +
+
-
-

Neues Apple iPhone 12 Pro
(512 GB) - Graphit

+ +
+ +
+
+
+
+
+
{{product.name}}
+
+
+
Amazon: 699.00$
+
+
+
Plantshub: 599,00$
+
+
+ +
+
+
+
+
-
- SPARE BIS ZU 7%! -
-
- Weitere Informationen -
-
- points -
-
-
- -
-
+ diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts index f41d5da..031dc53 100644 --- a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts +++ b/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; + + 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)]); + } - ngOnInit(): void { - } }