newest-prices-list works!
diff --git a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.spec.ts b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.spec.ts new file mode 100644 index 0000000..a03394b --- /dev/null +++ b/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: ComponentFixtureproduct-details works!
+ +
+
diff --git a/Frontend/src/app/components/product-details/product-details.component.ts b/Frontend/src/app/components/product-details/product-details.component.ts
index d04a454..6537665 100644
--- a/Frontend/src/app/components/product-details/product-details.component.ts
+++ b/Frontend/src/app/components/product-details/product-details.component.ts
@@ -1,15 +1,69 @@
-import { Component, OnInit } from '@angular/core';
+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';
+
+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']
+ selector: 'app-product-details',
+ templateUrl: './product-details.component.html',
+ styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
+ @Input() productId: number;
+ product: Product;
+ @ViewChild('chart') chart: ChartComponent;
+ public chartOptions: ChartOptions;
- constructor() { }
+ constructor(
+ private apiService: ApiService
+ ) {
+ }
- ngOnInit(): void {
- }
+ ngOnInit(): void {
+ this.getProduct();
+ this.getChartData();
+ }
+
+ getProduct(): void {
+ this.apiService.getProduct(this.productId).subscribe(product => this.product = product);
+ }
+
+ getChartData(): void {
+ this.chartOptions = {
+ series: [
+ {
+ name: 'Lowest Price',
+ data: [1061.20, 1060, 1070, 1040, 1061.20, 1061, 1100, 1070, 1061.20]
+ }
+ ],
+ chart: {
+ height: 350,
+ type: 'area'
+ },
+ title: {
+ text: 'Lowest price'
+ },
+ xaxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
+ },
+ stroke: {
+ curve: 'stepline'
+ }
+ };
+ }
}
diff --git a/Frontend/src/app/components/product-list/product-list.component.css b/Frontend/src/app/components/product-list/product-list.component.css
index 6ac9a30..814df74 100644
--- a/Frontend/src/app/components/product-list/product-list.component.css
+++ b/Frontend/src/app/components/product-list/product-list.component.css
@@ -1,6 +1,55 @@
+/* Div that contains each product */
.productItem {
border-style: solid;
border-color: dimgrey;
border-radius: .5em;
padding: .25em;
+ margin: auto;
+ margin-bottom: .5em;
+ max-width: 50em;
+ display: grid;
+ grid-template-columns: 10% 80% 10%;
+ grid-template-areas:
+ 'image title price'
+ 'image description price';
+}
+
+/* Image div */
+.productImageContainer {
+ grid-area: image;
+ position: relative;
+}
+
+/* Product Image */
+.productImage {
+ max-width: 50px;
+ max-height: 50px;
+ display:block;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+/* Title div */
+.productTitle {
+ grid-area: title;
+}
+
+/* Price div */
+.productPrice {
+ grid-area: price;
+ text-align: center;
+ margin: auto;
+}
+
+/* Price text */
+.productPrice * {
+}
+
+/* Description div */
+.productDescription {
+ grid-area: description;
}
diff --git a/Frontend/src/app/components/product-list/product-list.component.html b/Frontend/src/app/components/product-list/product-list.component.html
index 13fef09..c35c5b1 100644
--- a/Frontend/src/app/components/product-list/product-list.component.html
+++ b/Frontend/src/app/components/product-list/product-list.component.html
@@ -1,7 +1,20 @@
-
+ 
+
+
+
+ {{product.name}}
+
+
+
+
+
+
+
+
+ {{product.short_description}}
+
+
+ Set Price Alarm
+
+
+ 5€
+
+- {{product.name}} -
-
- Test
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ProductSearchPageComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ProductSearchPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Frontend/src/app/pages/product-search-page/product-search-page.component.ts b/Frontend/src/app/pages/product-search-page/product-search-page.component.ts
new file mode 100644
index 0000000..22a8569
--- /dev/null
+++ b/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');
+ }
+
+}
diff --git a/Frontend/src/app/services/api.service.ts b/Frontend/src/app/services/api.service.ts
index 7487633..bb54404 100644
--- a/Frontend/src/app/services/api.service.ts
+++ b/Frontend/src/app/services/api.service.ts
@@ -16,6 +16,16 @@ export class ApiService {
) {
}
+ getProduct(id): Observable {
+ try {
+ const prod = this.http.get((this.apiUrl + '/products/' + id));
+ console.log(prod);
+ return prod;
+ } catch (exception) {
+ process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`);
+ }
+ }
+
getProducts(): Observable {
try {
const prods = this.http.get((this.apiUrl + '/products'));
+
diff --git a/Frontend/src/app/components/product-list/product-list.component.ts b/Frontend/src/app/components/product-list/product-list.component.ts
index 70f774f..b7a87cb 100644
--- a/Frontend/src/app/components/product-list/product-list.component.ts
+++ b/Frontend/src/app/components/product-list/product-list.component.ts
@@ -12,6 +12,7 @@ export class ProductListComponent implements OnInit {
products: Product[];
@Input() numberOfProducts: number;
@Input() showProductPicture: boolean;
+ type: string;
constructor(
private apiService: ApiService,
@@ -28,6 +29,7 @@ export class ProductListComponent implements OnInit {
if (!this.showProductPicture) {
this.showProductPicture = false;
}
+ this.type = 'PLP';
}
getProducts(): void {
@@ -35,7 +37,7 @@ export class ProductListComponent implements OnInit {
}
clickedProduct(product: Product): void {
- this.router.navigate([('/helloworld/' + product.product_id)]);
+ this.router.navigate([('/product/' + product.product_id)]);
}
}
diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.css b/Frontend/src/app/pages/landingpage/landingpage.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.html b/Frontend/src/app/pages/landingpage/landingpage.component.html
new file mode 100644
index 0000000..810a156
--- /dev/null
+++ b/Frontend/src/app/pages/landingpage/landingpage.component.html
@@ -0,0 +1,3 @@
+
+
+
+
+
+ {{product.name}}
+
+
+ 5€
+
+
+
+ {{product.short_description.substring(0, 300) + "..."}}
+
+
+ {{product.short_description}}
+
+