Merge pull request #15 from Mueller-Patrick/BETTERZON-42

Prototype for Midterm UC Demo

Backend/src/models/prices/prices.router.ts

@@ -23,7 +23,20 @@ export const pricesRouter = express.Router();
 
 pricesRouter.get('/', async (req: Request, res: Response) => {
     try {
-        const prices: Prices = await PriceService.findAll();
+        let prices: Prices = [];
+        const product = req.query.product;
+        const vendor = req.query.vendor;
+        const type = req.query.type;
+
+        if (product) {
+            if (vendor) {
+                prices = await PriceService.findByVendor(<string> product, <string> vendor, <string> type);
+            } else {
+                prices = await PriceService.findByType(<string> product, <string> type);
+            }
+        } else {
+            prices = await PriceService.findAll();
+        }
 
         res.status(200).send(prices);
     } catch (e) {
@@ -50,26 +63,6 @@ pricesRouter.get('/:id', async (req: Request, res: Response) => {
     }
 });
 
-// GET items/:name
-
-pricesRouter.get('/products/:id', async (req: Request, res: Response) => {
-    const id: number = parseInt(req.params.id, 10);
-
-    if (!id) {
-        res.status(400).send('Missing parameters.');
-        return;
-    }
-
-    try {
-        const prices: Prices = await PriceService.findByProduct(id);
-
-        res.status(200).send(prices);
-    } catch (e) {
-        res.status(404).send(e.message);
-    }
-});
-
-
 // POST items/
 
 // pricesRouter.post('/', async (req: Request, res: Response) => {

Backend/src/models/prices/prices.service.ts

@@ -106,6 +106,86 @@ export const findByProduct = async (product: number): Promise<Prices> => {
     return priceRows;
 };
 
+export const findByType = async (product: string, type: string): Promise<Prices> => {
+    let conn;
+    let priceRows = [];
+    try {
+        conn = await pool.getConnection();
+        let rows = [];
+        if (type === 'newest') {
+            // Used to get the newest price for this product per vendor
+            rows = await conn.query(('WITH summary AS ( ' +
+                'SELECT p.product_id, ' +
+                'p.vendor_id, ' +
+                'p.price_in_cents, ' +
+                'p.timestamp, ' +
+                'ROW_NUMBER() OVER( ' +
+                'PARTITION BY p.vendor_id ' +
+                'ORDER BY p.timestamp DESC) AS rk ' +
+                'FROM prices p ' +
+                'WHERE product_id = ? AND vendor_id != 1) ' +
+                'SELECT s.* ' +
+                'FROM summary s ' +
+                'WHERE s.rk = 1 '), product);
+        } else if (type === 'lowest') {
+            // Used to get the lowest prices for this product over a period of time
+            rows = await conn.query('SELECT price_id, product_id, vendor_id, MIN(price_in_cents) as price_in_cents, timestamp FROM prices WHERE product_id = ? AND vendor_id != 1 GROUP BY DAY(timestamp) ORDER BY timestamp', product);
+        } else {
+            // If no type is given, return all prices for this product
+            rows = await conn.query('SELECT price_id, product_id, vendor_id, price_in_cents, timestamp FROM prices WHERE product_id = ? AND vendor_id != 1', product);
+        }
+
+        for (let row in rows) {
+            if (row !== 'meta') {
+                priceRows.push(rows[row]);
+            }
+        }
+
+    } catch (err) {
+        throw err;
+    } finally {
+        if (conn) {
+            conn.end();
+        }
+    }
+
+    return priceRows;
+};
+
+export const findByVendor = async (product: string, vendor: string, type: string): Promise<Prices> => {
+    let conn;
+    let priceRows = [];
+    try {
+        conn = await pool.getConnection();
+        let rows = [];
+        if (type === 'newest') {
+            // Used to get the newest price for this product and vendor
+            rows = await conn.query('SELECT price_id, product_id, vendor_id, price_in_cents, timestamp FROM prices WHERE product_id = ? AND vendor_id = ? ORDER BY timestamp DESC LIMIT 1', [product, vendor]);
+        } else if (type === 'lowest') {
+            // Used to get the lowest prices for this product and vendor in all time
+            rows = await conn.query('SELECT price_id, product_id, vendor_id, MIN(price_in_cents) as price_in_cents, timestamp FROM prices WHERE product_id = ? AND vendor_id = ? LIMIT 1', [product, vendor]);
+        } else {
+            // If no type is given, return all prices for this product and vendor
+            rows = await conn.query('SELECT price_id, product_id, vendor_id, price_in_cents, timestamp FROM prices WHERE product_id = ? AND vendor_id = ?', [product, vendor]);
+        }
+
+        for (let row in rows) {
+            if (row !== 'meta') {
+                priceRows.push(rows[row]);
+            }
+        }
+
+    } catch (err) {
+        throw err;
+    } finally {
+        if (conn) {
+            conn.end();
+        }
+    }
+
+    return priceRows;
+};
+
 // export const create = async (newItem: Product): Promise<void> => {
 //     let conn;
 //     try {

Frontend/package-lock.json

@@ -2260,6 +2260,19 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.22.3",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.22.3.tgz",
+      "integrity": "sha512-ZRZWmAmSdyc+tFhHMZ10ZxbvSbomWe46izpi8yQj5cKLxuujw2XeXVQ0jxnPl9yE5Q7W2hAbDWStaouBN4mSuw==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "app-root-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz",
@@ -7844,6 +7857,21 @@
       "resolved": "https://registry.npmjs.org/ng/-/ng-0.0.0.tgz",
       "integrity": "sha512-HwR40IBJa1ZU+CIGyuy7vSCN3xFYlSRfw5eIwwKOdOMNNNIl8KhT6PXKmHuFEFYpfrbOMaCYtr4QOJ3gkkubcg=="
     },
+    "ng-apexcharts": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.5.6.tgz",
+      "integrity": "sha512-78vmZvrT9iqfZXE00+T8NTvR+EHV0wo4qqf0Zfu1/2KiwazCU9S5EROcmgqMQ1eCO7Sz4GiR19rLTMdtWL/WmQ==",
+      "requires": {
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -11950,6 +11978,70 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",

Frontend/package.json

@@ -20,7 +20,9 @@
         "@angular/platform-browser": "^10.2.3",
         "@angular/platform-browser-dynamic": "^10.2.3",
         "@angular/router": "^10.2.3",
+        "apexcharts": "^3.22.3",
         "ng": "0.0.0",
+        "ng-apexcharts": "^1.5.6",
         "rxjs": "~6.6.0",
         "tslib": "^2.0.3",
         "zone.js": "~0.10.2"

Frontend/src/app/api.service.ts

@@ -1,27 +0,0 @@
-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.module.ts

@@ -4,10 +4,17 @@ import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
 import {AppRouting} from './app.routing';
-import {ProductListComponent} from './product-list/product-list.component';
+import {ProductListComponent} from './components/product-list/product-list.component';
-import { LandingpageComponent } from './landingpage/landingpage.component';
+import {LandingpageComponent} from './pages/landingpage/landingpage.component';
-import { ProductDetailPageComponent } from './product-detail-page/product-detail-page.component';
+import {ProductDetailPageComponent} from './pages/product-detail-page/product-detail-page.component';
-import { FooterComponent } from './footer/footer.component';
+import {FooterComponent} from './components/footer/footer.component';
+import {ProductDetailsComponent} from './components/product-details/product-details.component';
+import {NgApexchartsModule} from 'ng-apexcharts';
+import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component';
+import {HeaderComponent} from './components/header/header.component';
+import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
+import {FormsModule} from '@angular/forms';
+import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 
 @NgModule({
     declarations: [
@@ -15,12 +22,19 @@ import { FooterComponent } from './footer/footer.component';
         ProductListComponent,
         LandingpageComponent,
         ProductDetailPageComponent,
-        FooterComponent
+        FooterComponent,
+        ProductDetailsComponent,
+        ProductSearchPageComponent,
+        HeaderComponent,
+        NewestPricesListComponent,
+        PageNotFoundPageComponent
     ],
     imports: [
         BrowserModule,
         AppRouting,
-        HttpClientModule
+        HttpClientModule,
+        NgApexchartsModule,
+        FormsModule
     ],
     providers: [],
     bootstrap: [AppComponent]

Frontend/src/app/app.routing.ts

@@ -2,13 +2,17 @@ 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 {ProductListComponent} from './components/product-list/product-list.component';
-import {LandingpageComponent} from './landingpage/landingpage.component';
+import {LandingpageComponent} from './pages/landingpage/landingpage.component';
-import {ProductDetailPageComponent} from './product-detail-page/product-detail-page.component';
+import {ProductDetailPageComponent} from './pages/product-detail-page/product-detail-page.component';
+import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component';
+import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 
 const routes: Routes = [
     {path: '', component: LandingpageComponent},
-    {path: 'product/:id', component: ProductDetailPageComponent}
+    {path: 'search', component: ProductSearchPageComponent},
+    {path: 'product/:id', component: ProductDetailPageComponent},
+    {path: '**', component: PageNotFoundPageComponent}
 ];
 
 @NgModule({

Frontend/src/app/components/header/header.component.css

@@ -0,0 +1,42 @@
+.header {
+    width: auto;
+    background-color: dimgrey;
+    color: white;
+    text-align: center;
+    padding: .25em;
+}
+
+#headerContent {
+    display: flex;
+}
+
+.logo {
+    position: relative;
+    margin-left: 50%;
+}
+
+.searchBox {
+    position: relative;
+    margin: auto;
+    margin-left: 25%;
+}
+
+.searchBox input {
+    width: 100%;
+    padding: .25em;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.profileIcon {
+    position: relative;
+    margin: auto;
+    margin-left: 10%;
+}
+
+.icon-3d {
+    padding: 10px;
+    color: #fff;
+}

Frontend/src/app/components/header/header.component.html

@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<header class="header">
+    <div id="headerContent" class='wrap'>
+        <div class="logo">
+            <img src="assets/images/Betterzon.svg" alt="Betterzon Logo" width="50px" (click)="clickedLogo()">
+        </div>
+        <div class="searchBox">
+            <input *ngIf="showSearch===true" type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
+        </div>
+        <div class="profileIcon">
+            Profile
+        </div>
+    </div>
+</header>

Frontend/src/app/components/header/header.component.spec.ts

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

Frontend/src/app/components/header/header.component.ts

@@ -0,0 +1,37 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+    searchInput: string;
+    @Input() showSearch: boolean;
+
+    constructor(
+        private router: Router
+    ) {
+    }
+
+    ngOnInit(): void {
+        if (!this.showSearch) {
+            this.showSearch = false;
+        }
+    }
+
+    clickedLogo(): void {
+        this.router.navigate([('/')]);
+    }
+
+    startedSearch(): void {
+        this.redirectTo('/search', {queryParams: {q: this.searchInput}});
+    }
+
+    redirectTo(uri: string, queryParams: object): void {
+        this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
+            this.router.navigate([uri], queryParams));
+    }
+
+}

Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css

@@ -0,0 +1,25 @@
+.priceList {
+    margin: 2em;
+    position: relative;
+}
+
+.priceList table {
+    position: relative;
+    margin: auto;
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 80%;
+}
+
+.priceList table td, .priceList table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+.priceList table tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+.priceList table tr:hover {
+    background-color: #ddd;
+}

Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html

@@ -0,0 +1,14 @@
+<div class="priceList">
+    <table>
+        <tr>
+            <th>Vendor</th>
+            <th>Current price</th>
+            <th>Visit</th>
+        </tr>
+        <tr *ngFor="let price of prices">
+            <td>{{vendorMap[price.vendor_id]?.name}}</td>
+            <td>{{price.price_in_cents / 100}}€</td>
+            <td><a href="https://www.amazon.com">Visit Shop</a></td>
+        </tr>
+    </table>
+</div>

Frontend/src/app/components/newest-prices-list/newest-prices-list.component.spec.ts

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

Frontend/src/app/components/newest-prices-list/newest-prices-list.component.ts

@@ -0,0 +1,45 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Price} from '../../models/price';
+import {Vendor} from '../../models/vendor';
+import {ApiService} from '../../services/api.service';
+
+@Component({
+    selector: 'app-newest-prices-list',
+    templateUrl: './newest-prices-list.component.html',
+    styleUrls: ['./newest-prices-list.component.css']
+})
+export class NewestPricesListComponent implements OnInit {
+    @Input() productId: number;
+    prices: Price[] = [];
+    vendors: Vendor[] = [];
+    vendorMap = {};
+
+    constructor(
+        private apiService: ApiService
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.getVendors();
+        this.getPrices();
+    }
+
+    getPrices(): void {
+        // Lowest prices
+        this.apiService.getCurrentPricePerVendor(this.productId).subscribe(
+            prices => {
+                this.prices = prices;
+            });
+    }
+
+    getVendors(): void {
+        this.apiService.getVendors().subscribe(vendors => {
+            this.vendors = vendors;
+
+            this.vendors.forEach(vendor => {
+                this.vendorMap[vendor.vendor_id] = vendor;
+            });
+        });
+    }
+
+}

Frontend/src/app/components/product-details/product-details.component.css

@@ -0,0 +1,83 @@
+/* Div that contains each product */
+.productItem {
+    padding: .25em;
+    margin: auto;
+    margin-bottom: .5em;
+    display: grid;
+    grid-template-columns: 20% 25% 25% 30%;
+    grid-template-areas:
+    'image title title priceChart'
+    'image description description priceChart'
+    'image priceAlarm bestPrice blank';
+}
+
+/* Image div */
+.productImageContainer {
+    grid-area: image;
+    position: relative;
+}
+
+/* Product Image */
+.productImage {
+    max-width: 300px;
+    max-height: 300px;
+    display: block;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* Title div */
+.productTitle {
+    grid-area: title;
+    font-size: 2em;
+    font-family: sans-serif;
+}
+
+/* Price div */
+.priceChart {
+    grid-area: priceChart;
+    text-align: center;
+    margin: auto;
+}
+
+/* Description div */
+.productDescription {
+    grid-area: description;
+}
+
+/* Price alarm div */
+.priceAlarm {
+    grid-area: priceAlarm;
+    border-style: solid;
+    border-color: dimgrey;
+    border-radius: 5px;
+    padding: .25em;
+    margin: auto;
+    font-size: 1.5em;
+}
+
+/* Best price container div */
+.bestPriceContainer {
+    grid-area: bestPrice;
+}
+
+/* best price div */
+.bestPrice {
+    border-style: solid;
+    border-color: dimgrey;
+    border-radius: 5px;
+    padding: .25em;
+    margin: auto;
+    text-align: center;
+    font-size: 1.5em;
+}
+
+/* amazon price div */
+.amazonPrice {
+    margin-top: .5em;
+    text-align: center;
+}

Frontend/src/app/components/product-details/product-details.component.html

@@ -0,0 +1,36 @@
+<div class="productItem">
+    <div class="productImageContainer">
+        <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
+    </div>
+    <div class="productTitle">
+        <b>{{product?.name}}</b>
+    </div>
+    <div class="priceChart">
+        <div style="text-align:center">
+            <apx-chart
+                [series]="chartOptions.series"
+                [chart]="chartOptions.chart"
+                [xaxis]="chartOptions.xaxis"
+                [title]="chartOptions.title"
+            ></apx-chart>
+        </div>
+    </div>
+    <div class="productDescription">
+        <div>
+            {{product?.short_description}}
+        </div>
+    </div>
+    <div class="priceAlarm">
+        Set Price Alarm
+    </div>
+    <div class="bestPriceContainer">
+        <div class="bestPrice">
+            Best price: {{currentlyLowestPrice?.price_in_cents / 100}}€ at
+            vendor {{vendorMap[currentlyLowestPrice.vendor_id]?.name}}!
+        </div>
+        <div class="amazonPrice">
+            Amazon-price: {{currentAmazonPrice?.price_in_cents / 100}}€ (<span
+            *ngIf="getAmazonPriceDifference()>0">+</span>{{getAmazonPriceDifference()}}%)
+        </div>
+    </div>
+</div>

Frontend/src/app/components/product-details/product-details.component.spec.ts

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

Frontend/src/app/components/product-details/product-details.component.ts

@@ -0,0 +1,118 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Product} from '../../models/product';
+import {ApiService} from '../../services/api.service';
+import {
+    ChartComponent,
+    ApexAxisChartSeries,
+    ApexChart,
+    ApexXAxis,
+    ApexTitleSubtitle, ApexStroke
+} from 'ng-apexcharts';
+import {Price} from '../../models/price';
+import {Vendor} from '../../models/vendor';
+
+export type ChartOptions = {
+    series: ApexAxisChartSeries;
+    chart: ApexChart;
+    xaxis: ApexXAxis;
+    title: ApexTitleSubtitle;
+    stroke: ApexStroke;
+};
+
+@Component({
+    selector: 'app-product-details',
+    templateUrl: './product-details.component.html',
+    styleUrls: ['./product-details.component.css']
+})
+export class ProductDetailsComponent implements OnInit {
+    @Input() productId: number;
+    product: Product;
+    lowestPrices: Price[];
+    currentlyLowestPrice: Price;
+    currentAmazonPrice: Price;
+    vendors: Vendor[] = [];
+    vendorMap = {};
+    @ViewChild('chart') chart: ChartComponent;
+    public chartOptions: ChartOptions;
+
+    constructor(
+        private apiService: ApiService
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.getProduct();
+        this.getVendors();
+        this.getPrices();
+    }
+
+    getProduct(): void {
+        this.apiService.getProduct(this.productId).subscribe(product => this.product = product);
+    }
+
+    getPrices(): void {
+        // Lowest prices
+        this.apiService.getLowestPrices(this.productId).subscribe(
+            prices => {
+                this.lowestPrices = prices;
+                this.currentlyLowestPrice = prices[prices.length - 1];
+
+                // Update charts
+                this.getChartData();
+            });
+
+        // Amazon price
+        this.apiService.getAmazonPrice(this.productId).subscribe(price => {
+            this.currentAmazonPrice = price[0];
+        });
+    }
+
+    getVendors(): void {
+        this.apiService.getVendors().subscribe(vendors => {
+            this.vendors = vendors;
+            this.vendors.forEach(vendor => {
+                this.vendorMap[vendor.vendor_id] = vendor;
+            });
+        });
+    }
+
+    getChartData(): void {
+        const prices = [];
+        const categs = [];
+        this.lowestPrices?.forEach(price => {
+            prices.push(price.price_in_cents / 100);
+            categs.push(new Date(price.timestamp).toDateString());
+        });
+
+        this.chartOptions = {
+            series: [
+                {
+                    name: 'Lowest Price',
+                    data: prices
+                }
+            ],
+            chart: {
+                height: 350,
+                type: 'area'
+            },
+            title: {
+                text: 'Lowest price'
+            },
+            xaxis: {
+                categories: categs
+            },
+            stroke: {
+                curve: 'stepline'
+            }
+        };
+    }
+
+    getAmazonPriceDifference(): number {
+        const amazonPrice = this.currentAmazonPrice?.price_in_cents;
+        const lowestPrice = this.currentlyLowestPrice?.price_in_cents;
+
+        const percentage = ((amazonPrice / lowestPrice) - 1) * 100;
+
+        return Math.round(percentage);
+    }
+}

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

@@ -1,4 +1,6 @@
-<meta charset="UTF-8">
+<div *ngIf="products.length==0">
+    No Products found!
+</div>
 <div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
     <div class="productImageContainer" *ngIf="showProductPicture===true">
         <img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>

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

@@ -0,0 +1,67 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api.service';
+import {Product} from '../../models/product';
+import {ActivatedRoute, 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;
+    @Input() searchQuery: string;
+    @Input() type: string;
+
+    constructor(
+        private apiService: ApiService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.loadParams();
+    }
+
+    loadParams(): void {
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
+        if (!this.searchQuery) {
+            this.searchQuery = '';
+        }
+        if (!this.type) {
+            this.type = '';
+        }
+
+        switch (this.type) {
+            case 'search': {
+                this.getSearchedProducts();
+                break;
+            }
+            default: {
+                this.getProducts();
+                break;
+            }
+        }
+    }
+
+    getProducts(): void {
+        this.apiService.getProducts().subscribe(products => this.products = products);
+    }
+
+    getSearchedProducts(): void {
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+    }
+
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/product/' + product.product_id)]);
+    }
+
+}

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

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

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

@@ -1,15 +0,0 @@
-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/price.ts

@@ -0,0 +1,7 @@
+export interface Price {
+    price_id: number;
+    product_id: number;
+    vendor_id: number;
+    price_in_cents: number;
+    timestamp: Date;
+}

Frontend/src/app/models/vendor.ts

@@ -0,0 +1,10 @@
+export interface Vendor {
+    vendor_id: number;
+    name: string;
+    streetname: string;
+    zip_code: string;
+    city: string;
+    country_code: string;
+    phone: string;
+    website: string;
+}

Frontend/src/app/pages/landingpage/landingpage.component.css

@@ -0,0 +1,50 @@
+#mainComponents {
+    margin: 5em;
+    margin-top: .5em;
+    margin-bottom: .5em;
+}
+
+#productListsContainer {
+    display: grid;
+    grid-template-areas:
+    'search search'
+    'popularSearches bestDeals';
+    grid-template-columns: 50% 50%;
+}
+
+#searchContainer {
+    position: relative;
+    grid-area: search;
+    height: 10em;
+}
+
+#searchContainer input {
+    position: relative;
+    font-size: 1.5em;
+    padding: .25em;
+    display: block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin: auto;
+    -ms-transform: translateY(50%);
+    transform: translateY(2.5em);
+}
+
+#popularSearchesList {
+    grid-area: popularSearches;
+    padding: .5em;
+}
+
+#popularSearchesList h2 {
+    text-align: center;
+}
+
+#bestDealsList {
+    grid-area: bestDeals;
+    padding: .5em;
+}
+
+#bestDealsList h2 {
+    text-align: center;
+}

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

@@ -0,0 +1,18 @@
+<app-header [showSearch]="false"></app-header>
+<div id="mainComponents">
+    <div id="searchContainer">
+        <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
+    </div>
+    <div id="productListsContainer">
+        <div id="popularSearchesList">
+            <h2>Popular Searches</h2>
+            <app-product-list numberOfProducts="3" [showProductPicture]="true"
+                              type="popularSearches"></app-product-list>
+        </div>
+        <div id="bestDealsList">
+            <h2>Best Deals</h2>
+            <app-product-list numberOfProducts="3" [showProductPicture]="true" type="bestDeals"></app-product-list>
+        </div>
+    </div>
+</div>
+<app-footer></app-footer>

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

@@ -0,0 +1,29 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+    selector: 'app-landingpage',
+    templateUrl: './landingpage.component.html',
+    styleUrls: ['./landingpage.component.css']
+})
+export class LandingpageComponent implements OnInit {
+    searchInput: string;
+
+    constructor(
+        private router: Router
+    ) {
+    }
+
+    ngOnInit(): void {
+    }
+
+    startedSearch(): void {
+        this.redirectTo('/search', {queryParams: {q: this.searchInput}});
+    }
+
+    redirectTo(uri: string, queryParams: object): void {
+        this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
+            this.router.navigate([uri], queryParams));
+    }
+
+}

Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html

@@ -0,0 +1,2 @@
+<h1>404</h1>
+<p>Page not found!</p>

Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts

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

Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts

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

Frontend/src/app/pages/product-detail-page/product-detail-page.component.css

@@ -0,0 +1,3 @@
+#mainComponents {
+    padding: 5em;
+}

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

@@ -0,0 +1,6 @@
+<app-header [showSearch]="true"></app-header>
+<div id="mainComponents">
+    <app-product-details [productId]="productId"></app-product-details>
+    <app-newest-prices-list [productId]="productId"></app-newest-prices-list>
+</div>
+<app-footer></app-footer>

Frontend/src/app/pages/product-search-page/product-search-page.component.css

@@ -0,0 +1,5 @@
+#mainComponents {
+    margin: 5em;
+    margin-top: .5em;
+    margin-bottom: .5em;
+}

Frontend/src/app/pages/product-search-page/product-search-page.component.html

@@ -0,0 +1,6 @@
+<app-header [showSearch]="true"></app-header>
+<div id="mainComponents">
+    <app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
+                      type="search"></app-product-list>
+</div>
+<app-footer></app-footer>

Frontend/src/app/pages/product-search-page/product-search-page.component.spec.ts

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

Frontend/src/app/pages/product-search-page/product-search-page.component.ts

@@ -0,0 +1,21 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+    selector: 'app-product-search-page',
+    templateUrl: './product-search-page.component.html',
+    styleUrls: ['./product-search-page.component.css']
+})
+export class ProductSearchPageComponent implements OnInit {
+    searchTerm: string;
+
+    constructor(
+        private route: ActivatedRoute
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.searchTerm = this.route.snapshot.queryParamMap.get('q');
+    }
+
+}

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

@@ -1,2 +0,0 @@
-<p>product-detail-page works! Product: {{productId}}</p>
-<app-footer></app-footer>

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

@@ -1,46 +0,0 @@
-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;
-    type: string;
-
-    constructor(
-        private apiService: ApiService,
-        private router: Router
-    ) {
-    }
-
-    ngOnInit(): void {
-        this.getProducts();
-        console.log(this.showProductPicture);
-
-        if (!this.numberOfProducts) {
-            this.numberOfProducts = 10;
-        }
-        if (!this.showProductPicture) {
-            this.showProductPicture = false;
-        }
-        this.type = 'PLP';
-
-        console.log(this.showProductPicture);
-    }
-
-    getProducts(): void {
-        this.apiService.getProducts().subscribe(products => this.products = products);
-    }
-
-    clickedProduct(product: Product): void {
-        this.router.navigate([('/product/' + product.product_id)]);
-    }
-
-}

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

@@ -0,0 +1,101 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
+import process from 'process';
+import {Product} from '../models/product';
+import {Price} from '../models/price';
+import {Observable, of} from 'rxjs';
+import {Vendor} from '../models/vendor';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ApiService {
+    apiUrl = 'https://backend.betterzon.xyz';
+
+    constructor(
+        private http: HttpClient
+    ) {
+    }
+
+    getProduct(id): Observable<Product> {
+        try {
+            const prod = this.http.get<Product>((this.apiUrl + '/products/' + id));
+            return prod;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getProductsByQuery(query): Observable<Product[]> {
+        try {
+            const prods = this.http.get<Product[]>((this.apiUrl + '/products/search/' + query));
+            return prods;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getProducts(): Observable<Product[]> {
+        try {
+            const prods = this.http.get<Product[]>((this.apiUrl + '/products'));
+            return prods;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getPrices(): Observable<Price[]> {
+        try {
+            const prices = this.http.get<Price[]>((this.apiUrl + '/prices'));
+            return prices;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getLowestPrices(productId): Observable<Price[]> {
+        try {
+            let params = new HttpParams();
+            params = params.append('product', productId);
+            params = params.append('type', 'lowest');
+            const prices = this.http.get<Price[]>((this.apiUrl + '/prices'), {params});
+            return prices;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getAmazonPrice(productId): Observable<Price> {
+        try {
+            let params = new HttpParams();
+            params = params.append('product', productId);
+            params = params.append('vendor', '1');
+            params = params.append('type', 'newest');
+            const price = this.http.get<Price>((this.apiUrl + '/prices'), {params});
+            return price;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getCurrentPricePerVendor(productId): Observable<Price[]> {
+        try {
+            let params = new HttpParams();
+            params = params.append('product', productId);
+            params = params.append('type', 'newest');
+            const prices = this.http.get<Price[]>((this.apiUrl + '/prices'), {params});
+            return prices;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+
+    getVendors(): Observable<Vendor[]> {
+        try {
+            const vendors = this.http.get<Vendor[]>((this.apiUrl + '/vendors'));
+            return vendors;
+        } catch (exception) {
+            process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+        }
+    }
+}

Frontend/src/styles.css

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+    margin: 0;
+    font-family: sans-serif;
+}