diff --git a/Frontend/src/app/app.routing.ts b/Frontend/src/app/app.routing.ts index f34925f..134bd56 100644 --- a/Frontend/src/app/app.routing.ts +++ b/Frontend/src/app/app.routing.ts @@ -8,7 +8,7 @@ import {ProductDetailPageComponent} from './product-detail-page/product-detail-p const routes: Routes = [ {path: '', component: LandingpageComponent}, - {path: 'product', component: ProductDetailPageComponent} + {path: 'product/:id', component: ProductDetailPageComponent} ]; @NgModule({ diff --git a/Frontend/src/app/landingpage/landingpage.component.html b/Frontend/src/app/landingpage/landingpage.component.html index 777b5a1..38488f7 100644 --- a/Frontend/src/app/landingpage/landingpage.component.html +++ b/Frontend/src/app/landingpage/landingpage.component.html @@ -1,2 +1,2 @@ - + diff --git a/Frontend/src/app/product-detail-page/product-detail-page.component.html b/Frontend/src/app/product-detail-page/product-detail-page.component.html index b57e35b..8a56bb9 100644 --- a/Frontend/src/app/product-detail-page/product-detail-page.component.html +++ b/Frontend/src/app/product-detail-page/product-detail-page.component.html @@ -1 +1,2 @@ -

product-detail-page works!

+

product-detail-page works! Product: {{productId}}

+ diff --git a/Frontend/src/app/product-detail-page/product-detail-page.component.ts b/Frontend/src/app/product-detail-page/product-detail-page.component.ts index 12a47aa..c59a734 100644 --- a/Frontend/src/app/product-detail-page/product-detail-page.component.ts +++ b/Frontend/src/app/product-detail-page/product-detail-page.component.ts @@ -1,15 +1,21 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ - selector: 'app-product-detail-page', - templateUrl: './product-detail-page.component.html', - styleUrls: ['./product-detail-page.component.css'] + selector: 'app-product-detail-page', + templateUrl: './product-detail-page.component.html', + styleUrls: ['./product-detail-page.component.css'] }) export class ProductDetailPageComponent implements OnInit { + productId: string; - constructor() { } + constructor( + private router: Router + ) { + this.productId = router.url.substr(9, router.url.length); + } - ngOnInit(): void { - } + ngOnInit(): void { + } } diff --git a/Frontend/src/app/product-list/product-list.component.css b/Frontend/src/app/product-list/product-list.component.css index 6ac9a30..814df74 100644 --- a/Frontend/src/app/product-list/product-list.component.css +++ b/Frontend/src/app/product-list/product-list.component.css @@ -1,6 +1,55 @@ +/* Div that contains each product */ .productItem { border-style: solid; border-color: dimgrey; border-radius: .5em; padding: .25em; + margin: auto; + margin-bottom: .5em; + max-width: 50em; + display: grid; + grid-template-columns: 10% 80% 10%; + grid-template-areas: + 'image title price' + 'image description price'; +} + +/* Image div */ +.productImageContainer { + grid-area: image; + position: relative; +} + +/* Product Image */ +.productImage { + max-width: 50px; + max-height: 50px; + display:block; + margin: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +/* Title div */ +.productTitle { + grid-area: title; +} + +/* Price div */ +.productPrice { + grid-area: price; + text-align: center; + margin: auto; +} + +/* Price text */ +.productPrice * { +} + +/* Description div */ +.productDescription { + grid-area: description; } diff --git a/Frontend/src/app/product-list/product-list.component.html b/Frontend/src/app/product-list/product-list.component.html index 13fef09..c35c5b1 100644 --- a/Frontend/src/app/product-list/product-list.component.html +++ b/Frontend/src/app/product-list/product-list.component.html @@ -1,7 +1,20 @@ -

- {{product.name}} -

-
- Test +
+
+ +
+
+ {{product.name}} +
+
+ 5€ +
+
+
+ {{product.short_description.substring(0, 300) + "..."}} +
+
+ {{product.short_description}} +
+
diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts index 58e9100..9ead8f8 100644 --- a/Frontend/src/app/product-list/product-list.component.ts +++ b/Frontend/src/app/product-list/product-list.component.ts @@ -12,6 +12,7 @@ export class ProductListComponent implements OnInit { products: Product[]; @Input() numberOfProducts: number; @Input() showProductPicture: boolean; + type: string; constructor( private apiService: ApiService, @@ -21,6 +22,7 @@ export class ProductListComponent implements OnInit { ngOnInit(): void { this.getProducts(); + console.log(this.showProductPicture); if (!this.numberOfProducts) { this.numberOfProducts = 10; @@ -28,6 +30,9 @@ export class ProductListComponent implements OnInit { if (!this.showProductPicture) { this.showProductPicture = false; } + this.type = 'PLP'; + + console.log(this.showProductPicture); } getProducts(): void { @@ -35,7 +40,7 @@ export class ProductListComponent implements OnInit { } clickedProduct(product: Product): void { - this.router.navigate([('/helloworld/' + product.product_id)]); + this.router.navigate([('/product/' + product.product_id)]); } }