Paddy/Betterzon
1
0
Fork 0
mirror of https://github.com/Mueller-Patrick/Betterzon.git synced 2026-04-27 07:40:10 +00:00
Code Issues Projects Releases Wiki Activity

BETTERZON-25: Finishing prototype of UC

Browse Source
This commit is contained in:
Patrick Müller
2020-12-09 20:35:08 +01:00
parent 6338060b78
commit 31423c630a
18 changed files with 315 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/app/components/header/header.component.html
+1 -1
View File
@@ -5,7 +5,7 @@
<img src="assets/images/Betterzon.svg" alt="Betterzon Logo" width="50px" (click)="clickedLogo()">
</div>
<div class="searchBox">
<input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
<input *ngIf="showSearch===true" type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
</div>
<div class="profileIcon">
Profile
Frontend/src/app/components/header/header.component.ts
+5 -1
View File
@@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
import {Router} from '@angular/router';
@Component({
@@ -8,6 +8,7 @@ import {Router} from '@angular/router';
})
export class HeaderComponent implements OnInit {
searchInput: string;
@Input() showSearch: boolean;
constructor(
private router: Router
@@ -15,6 +16,9 @@ export class HeaderComponent implements OnInit {
}
ngOnInit(): void {
if (!this.showSearch) {
this.showSearch = false;
}
}
clickedLogo(): void {
Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css
+23 -5
View File
@@ -1,7 +1,25 @@
.priceList {
max-width: 50%;
margin: auto;
margin: auto;
align-content: center;
text-align: center;
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
+12 -1
View File
@@ -1,3 +1,14 @@
<div class="priceList">
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.ts
+37 -7
View File
@@ -1,15 +1,45 @@
import { Component, OnInit } from '@angular/core';
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']
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() { }
constructor(
private apiService: ApiService
) {
}
ngOnInit(): void {
}
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
+16 -3
View File
@@ -21,7 +21,7 @@
.productImage {
max-width: 300px;
max-height: 300px;
display:block;
display: block;
margin: auto;
position: absolute;
top: 0;
@@ -57,14 +57,27 @@
border-radius: 5px;
padding: .25em;
margin: auto;
font-size: 1.5em;
}
/* Best price div */
.bestPrice {
/* 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
+11 -4
View File
@@ -3,7 +3,7 @@
<img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
</div>
<div class="productTitle">
<b>{{product.name}}</b>
<b>{{product?.name}}</b>
</div>
<div class="priceChart">
<div style="text-align:center">
@@ -17,13 +17,20 @@
</div>
<div class="productDescription">
<div>
{{product.short_description}}
{{product?.short_description}}
</div>
</div>
<div class="priceAlarm">
Set Price Alarm
</div>
<div class="bestPrice">
5€
<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.ts
+56 -3
View File
@@ -8,6 +8,8 @@ import {
ApexXAxis,
ApexTitleSubtitle, ApexStroke
} from 'ng-apexcharts';
import {Price} from '../../models/price';
import {Vendor} from '../../models/vendor';
export type ChartOptions = {
series: ApexAxisChartSeries;
@@ -25,6 +27,11 @@ export type ChartOptions = {
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;
@@ -35,19 +42,53 @@ export class ProductDetailsComponent implements OnInit {
ngOnInit(): void {
this.getProduct();
this.getChartData();
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: [1061.20, 1060, 1070, 1040, 1061.20, 1061, 1100, 1070, 1061.20]
data: prices
}
],
chart: {
@@ -58,7 +99,7 @@ export class ProductDetailsComponent implements OnInit {
text: 'Lowest price'
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
categories: categs
},
stroke: {
curve: 'stepline'
@@ -66,4 +107,16 @@ export class ProductDetailsComponent implements OnInit {
};
}
getAmazonPriceDifference(): number {
const amazonPrice = this.currentAmazonPrice?.price_in_cents;
const lowestPrice = this.currentlyLowestPrice?.price_in_cents;
const percentage = amazonPrice / lowestPrice;
if (percentage < 1) {
return -Math.round(percentage);
} else {
return +Math.round(percentage);
}
}
}
Frontend/src/app/components/product-list/product-list.component.css
+1 -1
View File
@@ -24,7 +24,7 @@
.productImage {
max-width: 50px;
max-height: 50px;
display:block;
display: block;
margin: auto;
position: absolute;
top: 0;