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

@@ -1,48 +1,48 @@
 {
-  "name": "betterzon",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^10.2.3",
-    "@angular/common": "^10.2.3",
-    "@angular/compiler": "^10.2.3",
-    "@angular/core": "^10.2.3",
-    "@angular/forms": "^10.2.3",
-    "@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/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",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "^4.0.5"
-  }
+    "name": "betterzon",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "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",
+        "@angular/forms": "^10.2.3",
+        "@angular/platform-browser": "^10.2.3",
+        "@angular/platform-browser-dynamic": "^10.2.3",
+        "@angular/router": "^10.2.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.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.8",
+        "codelyzer": "^6.0.0",
+        "jasmine-core": "~3.6.0",
+        "jasmine-spec-reporter": "~5.0.0",
+        "karma": "~5.0.0",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage-istanbul-reporter": "~3.0.2",
+        "karma-jasmine": "~4.0.0",
+        "karma-jasmine-html-reporter": "^1.5.0",
+        "protractor": "~7.0.0",
+        "ts-node": "~8.3.0",
+        "tslint": "~6.1.0",
+        "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 { NgModule } from '@angular/core';
+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 {AppComponent} from './app.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
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        ProductListComponent,
+        LandingpageComponent,
+        ProductDetailPageComponent
+    ],
+    imports: [
+        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)]);
+    }
+
+}