BETTERZON-34: Adding landing page component

- Also removing old stuff

Frontend/src/app/app.module.ts

@@ -3,19 +3,19 @@ import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {HelloWorldComponent} from './hello-world/hello-world.component';
-import {AppRoutingModule} from './app-routing.module';
+import {AppRouting} from './app.routing';
 import {ProductListComponent} from './product-list/product-list.component';
+import { LandingpageComponent } from './landingpage/landingpage.component';
 
 @NgModule({
     declarations: [
         AppComponent,
-        HelloWorldComponent,
-        ProductListComponent
+        ProductListComponent,
+        LandingpageComponent
     ],
     imports: [
         BrowserModule,
-        AppRoutingModule,
+        AppRouting,
         HttpClientModule
     ],
     providers: [],

Frontend/src/app/app.routing.ts

@@ -1,13 +1,12 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule, Routes} from '@angular/router';
-import {HelloWorldComponent} from './hello-world/hello-world.component';
 import {AppComponent} from './app.component';
 import {ProductListComponent} from './product-list/product-list.component';
+import {LandingpageComponent} from './landingpage/landingpage.component';
 
 const routes: Routes = [
-    {path: '', component: AppComponent},
-    {path: 'helloworld', component: HelloWorldComponent},
+    {path: '', component: LandingpageComponent},
     {path: 'pdp', component: ProductListComponent}
 ];
 
@@ -20,5 +19,5 @@ const routes: Routes = [
         RouterModule
     ]
 })
-export class AppRoutingModule {
+export class AppRouting {
 }

Frontend/src/app/hello-world/hello-world.component.html

@@ -1,2 +0,0 @@
-<p>hello-world works! Title: </p>
-<a href="https://blog.betterzon.xyz">Blog</a>

Frontend/src/app/hello-world/hello-world.component.ts

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

Frontend/src/app/landingpage/landingpage.component.html

@@ -0,0 +1 @@
+<app-product-list numberOfProducts="20" showProductPicture="true"></app-product-list>

Frontend/src/app/landingpage/landingpage.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HelloWorldComponent } from './hello-world.component';
+import { LandingpageComponent } from './landingpage.component';
 
-describe('HelloWorldComponent', () => {
-  let component: HelloWorldComponent;
-  let fixture: ComponentFixture<HelloWorldComponent>;
+describe('LandingpageComponent', () => {
+  let component: LandingpageComponent;
+  let fixture: ComponentFixture<LandingpageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HelloWorldComponent ]
+      declarations: [ LandingpageComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HelloWorldComponent);
+    fixture = TestBed.createComponent(LandingpageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

Frontend/src/app/landingpage/landingpage.component.ts

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

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

@@ -2,3 +2,6 @@
 <p class="productItem"  *ngFor="let product of products" (click)="clickedProduct(product)">
     {{product.name}}
 </p>
+<div *ngIf="showProductPicture">
+    Test
+</div>

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

@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {ApiService} from '../api.service';
 import {Product} from '../models/product';
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-product-list',
@@ -10,6 +10,8 @@ import { Router } from '@angular/router';
 })
 export class ProductListComponent implements OnInit {
     products: Product[];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
 
     constructor(
         private apiService: ApiService,
@@ -19,6 +21,13 @@ export class ProductListComponent implements OnInit {
 
     ngOnInit(): void {
         this.getProducts();
+
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
     }
 
     getProducts(): void {