Merge pull request #9 from Mueller-Patrick/BETTERZON-33

Betterzon 33

Frontend/.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

Frontend/package.json

@@ -12,6 +12,7 @@
     "private": true,
     "dependencies": {
         "@angular/animations": "^10.2.3",
+        "@angular/cli": "^10.2.0",
         "@angular/common": "^10.2.3",
         "@angular/compiler": "^10.2.3",
         "@angular/core": "^10.2.3",
@@ -19,19 +20,18 @@
         "@angular/platform-browser": "^10.2.3",
         "@angular/platform-browser-dynamic": "^10.2.3",
         "@angular/router": "^10.2.3",
-    "angular-cli": "^1.0.0-beta.28.3",
         "ng": "0.0.0",
         "rxjs": "~6.6.0",
         "tslib": "^2.0.3",
         "zone.js": "~0.10.2"
     },
     "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1100.1",
+        "@angular-devkit/build-angular": "^0.1100.2",
         "@angular/cli": "^10.2.0",
         "@angular/compiler-cli": "^10.2.3",
         "@types/jasmine": "~3.5.0",
         "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.19.4",
+        "@types/node": "^12.19.8",
         "codelyzer": "^6.0.0",
         "jasmine-core": "~3.6.0",
         "jasmine-spec-reporter": "~5.0.0",
@@ -43,6 +43,6 @@
         "protractor": "~7.0.0",
         "ts-node": "~8.3.0",
         "tslint": "~6.1.0",
-    "typescript": "^4.0.5"
+        "typescript": "<4.1.0"
     }
 }

Frontend/src/app/api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Frontend/src/app/api.service.ts

@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import process from 'process';
+import {Product} from './models/product';
+import {Observable, of} from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ApiService {
+    apiUrl = 'https://backend.betterzon.xyz';
+
+    constructor(
+        private http: HttpClient
+    ) {
+    }
+
+    getProducts(): Observable<Product[]> {
+        try {
+            const prods = this.http.get<Product[]>((this.apiUrl + '/products'));
+            console.log(prods);
+            return prods;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+}

Frontend/src/app/app.component.html

@@ -1 +1 @@
-<app-hello-world></app-hello-world>
+<router-outlet></router-outlet>

Frontend/src/app/app.module.ts

@@ -1,18 +1,27 @@
 import {BrowserModule} from '@angular/platform-browser';
+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 {AppRouting} from './app.routing';
+import {ProductListComponent} from './product-list/product-list.component';
+import { LandingpageComponent } from './landingpage/landingpage.component';
+import { ProductDetailPageComponent } from './product-detail-page/product-detail-page.component';
 
 @NgModule({
     declarations: [
         AppComponent,
-    HelloWorldComponent
+        ProductListComponent,
+        LandingpageComponent,
+        ProductDetailPageComponent
     ],
     imports: [
-    BrowserModule
+        BrowserModule,
+        AppRouting,
+        HttpClientModule
     ],
     providers: [],
     bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

Frontend/src/app/app.routing.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule, Routes} from '@angular/router';
+import {AppComponent} from './app.component';
+import {ProductListComponent} from './product-list/product-list.component';
+import {LandingpageComponent} from './landingpage/landingpage.component';
+import {ProductDetailPageComponent} from './product-detail-page/product-detail-page.component';
+
+const routes: Routes = [
+    {path: '', component: LandingpageComponent},
+    {path: 'product', component: ProductDetailPageComponent}
+];
+
+@NgModule({
+    declarations: [],
+    imports: [
+        RouterModule.forRoot(routes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+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/models/product.ts

@@ -0,0 +1,14 @@
+export interface Product {
+    product_id: number;
+    asin: string;
+    is_active: boolean;
+    name: string;
+    short_description: string;
+    long_description: string;
+    image_guid: string;
+    date_added: Date;
+    last_modified: Date;
+    manufacturer_id: number;
+    selling_rank: string;
+    category_id: number;
+}

Frontend/src/app/product-detail-page/product-detail-page.component.html

@@ -0,0 +1 @@
+<p>product-detail-page works!</p>

Frontend/src/app/product-detail-page/product-detail-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductDetailPageComponent } from './product-detail-page.component';
+
+describe('ProductDetailPageComponent', () => {
+  let component: ProductDetailPageComponent;
+  let fixture: ComponentFixture<ProductDetailPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProductDetailPageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductDetailPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/product-detail-page/product-detail-page.component.ts

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

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

@@ -0,0 +1,6 @@
+.productItem {
+    border-style: solid;
+    border-color: dimgrey;
+    border-radius: .5em;
+    padding: .25em;
+}

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

@@ -0,0 +1,7 @@
+<meta charset="UTF-8">
+<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.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+
+describe('ProductListComponent', () => {
+  let component: ProductListComponent;
+  let fixture: ComponentFixture<ProductListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProductListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../api.service';
+import {Product} from '../models/product';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'app-product-list',
+    templateUrl: './product-list.component.html',
+    styleUrls: ['./product-list.component.css']
+})
+export class ProductListComponent implements OnInit {
+    products: Product[];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
+
+    constructor(
+        private apiService: ApiService,
+        private router: Router
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.getProducts();
+
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
+    }
+
+    getProducts(): void {
+        this.apiService.getProducts().subscribe(products => this.products = products);
+    }
+
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/helloworld/' + product.product_id)]);
+    }
+
+}