From 87193310a867c03b9e80ff91682cb914bcf6ce27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@mueller-patrick.tech>
Date: Thu, 3 Dec 2020 11:31:48 +0100
Subject: [PATCH 1/3] BETTERZON-41: Added routing for product detail pages

---
 Frontend/src/app/app.routing.ts               |  2 +-
 .../product-detail-page.component.html        |  2 +-
 .../product-detail-page.component.ts          | 20 ++++++++++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)

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/product-detail-page/product-detail-page.component.html b/Frontend/src/app/product-detail-page/product-detail-page.component.html
index b57e35b..e7a41e4 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 @@
-<p>product-detail-page works!</p>
+<p>product-detail-page works! Product: {{productId}}</p>
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 {
+    }
 
 }

From 940bb85bcd44313065456b93b1930c65ce9315c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@mueller-patrick.tech>
Date: Thu, 3 Dec 2020 11:32:27 +0100
Subject: [PATCH 2/3] BETTERZON-43: Product List Component style adjustments

---
 .../app/product-list/product-list.component.css   |  3 +++
 .../app/product-list/product-list.component.html  | 15 ++++++++++-----
 .../app/product-list/product-list.component.ts    |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/app/product-list/product-list.component.css b/Frontend/src/app/product-list/product-list.component.css
index 6ac9a30..da2e3cb 100644
--- a/Frontend/src/app/product-list/product-list.component.css
+++ b/Frontend/src/app/product-list/product-list.component.css
@@ -3,4 +3,7 @@
     border-color: dimgrey;
     border-radius: .5em;
     padding: .25em;
+    margin: auto;
+    margin-bottom: .5em;
+    max-width: 50em;
 }
diff --git a/Frontend/src/app/product-list/product-list.component.html b/Frontend/src/app/product-list/product-list.component.html
index 13fef09..122c424 100644
--- a/Frontend/src/app/product-list/product-list.component.html
+++ b/Frontend/src/app/product-list/product-list.component.html
@@ -1,7 +1,12 @@
 <meta charset="UTF-8">
-<p class="productItem"  *ngFor="let product of products" (click)="clickedProduct(product)">
-    {{product.name}}
-</p>
-<div *ngIf="showProductPicture">
-    Test
+<div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
+    <div *ngIf="showProductPicture">
+        {{product.image_guid}}
+    </div>
+    <div>
+        {{product.name}}
+    </div>
+    <div>
+        567
+    </div>
 </div>
diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts
index 58e9100..0a0d91c 100644
--- a/Frontend/src/app/product-list/product-list.component.ts
+++ b/Frontend/src/app/product-list/product-list.component.ts
@@ -35,7 +35,7 @@ export class ProductListComponent implements OnInit {
     }
 
     clickedProduct(product: Product): void {
-        this.router.navigate([('/helloworld/' + product.product_id)]);
+        this.router.navigate([('/product/' + product.product_id)]);
     }
 
 }

From bb74e465dae5a11f0956c7316c261b657ed41962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@mueller-patrick.tech>
Date: Fri, 4 Dec 2020 16:26:29 +0100
Subject: [PATCH 3/3] BETTERZON-33: Product List Component Layout beta ready

---
 .../landingpage/landingpage.component.html    |  2 +-
 .../product-detail-page.component.html        |  1 +
 .../product-list/product-list.component.css   | 46 +++++++++++++++++++
 .../product-list/product-list.component.html  | 20 +++++---
 .../product-list/product-list.component.ts    |  5 ++
 5 files changed, 67 insertions(+), 7 deletions(-)

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 @@
-<app-product-list numberOfProducts="20" showProductPicture="true"></app-product-list>
+<app-product-list numberOfProducts="20" [showProductPicture]="true"></app-product-list>
 <app-footer></app-footer>
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 e7a41e4..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 @@
 <p>product-detail-page works! Product: {{productId}}</p>
+<app-footer></app-footer>
diff --git a/Frontend/src/app/product-list/product-list.component.css b/Frontend/src/app/product-list/product-list.component.css
index da2e3cb..814df74 100644
--- a/Frontend/src/app/product-list/product-list.component.css
+++ b/Frontend/src/app/product-list/product-list.component.css
@@ -1,3 +1,4 @@
+/* Div that contains each product */
 .productItem {
     border-style: solid;
     border-color: dimgrey;
@@ -6,4 +7,49 @@
     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 122c424..c35c5b1 100644
--- a/Frontend/src/app/product-list/product-list.component.html
+++ b/Frontend/src/app/product-list/product-list.component.html
@@ -1,12 +1,20 @@
 <meta charset="UTF-8">
 <div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
-    <div *ngIf="showProductPicture">
-        {{product.image_guid}}
+    <div class="productImageContainer" *ngIf="showProductPicture===true">
+        <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
     </div>
-    <div>
-        {{product.name}}
+    <div class="productTitle">
+        <b>{{product.name}}</b>
     </div>
-    <div>
-        567
+    <div class="productPrice">
+        5€
+    </div>
+    <div class="productDescription">
+        <div *ngIf="product.short_description.length > 300">
+            {{product.short_description.substring(0, 300) + "..."}}
+        </div>
+        <div *ngIf="product.short_description.length <= 300">
+            {{product.short_description}}
+        </div>
     </div>
 </div>
diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts
index 0a0d91c..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 {