diff --git a/Backend/src/models/prices/prices.router.ts b/Backend/src/models/prices/prices.router.ts index 976cc9f..9672efa 100644 --- a/Backend/src/models/prices/prices.router.ts +++ b/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( product, vendor, type); + } else { + prices = await PriceService.findByType( product, 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) => { diff --git a/Backend/src/models/prices/prices.service.ts b/Backend/src/models/prices/prices.service.ts index 81915e7..b0a8038 100644 --- a/Backend/src/models/prices/prices.service.ts +++ b/Backend/src/models/prices/prices.service.ts @@ -106,6 +106,86 @@ export const findByProduct = async (product: number): Promise => { return priceRows; }; +export const findByType = async (product: string, type: string): Promise => { + 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 => { + 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 => { // let conn; // try { diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index a0ea13f..b7d54be 100644 --- a/Frontend/package-lock.json +++ b/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", diff --git a/Frontend/package.json b/Frontend/package.json index 75edaaf..318efaf 100644 --- a/Frontend/package.json +++ b/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" diff --git a/Frontend/src/app/api.service.ts b/Frontend/src/app/api.service.ts deleted file mode 100644 index e029888..0000000 --- a/Frontend/src/app/api.service.ts +++ /dev/null @@ -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 { - try { - const prods = this.http.get((this.apiUrl + '/products')); - console.log(prods); - return prods; - } catch (exception) { - process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); - } - } -} diff --git a/Frontend/src/app/app.module.ts b/Frontend/src/app/app.module.ts index 83b30d8..eef8e23 100644 --- a/Frontend/src/app/app.module.ts +++ b/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 { LandingpageComponent } from './landingpage/landingpage.component'; -import { ProductDetailPageComponent } from './product-detail-page/product-detail-page.component'; -import { FooterComponent } from './footer/footer.component'; +import {ProductListComponent} from './components/product-list/product-list.component'; +import {LandingpageComponent} from './pages/landingpage/landingpage.component'; +import {ProductDetailPageComponent} from './pages/product-detail-page/product-detail-page.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] diff --git a/Frontend/src/app/app.routing.ts b/Frontend/src/app/app.routing.ts index 134bd56..efb2a36 100644 --- a/Frontend/src/app/app.routing.ts +++ b/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 {LandingpageComponent} from './landingpage/landingpage.component'; -import {ProductDetailPageComponent} from './product-detail-page/product-detail-page.component'; +import {ProductListComponent} from './components/product-list/product-list.component'; +import {LandingpageComponent} from './pages/landingpage/landingpage.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({ diff --git a/Frontend/src/app/footer/footer.component.css b/Frontend/src/app/components/footer/footer.component.css similarity index 100% rename from Frontend/src/app/footer/footer.component.css rename to Frontend/src/app/components/footer/footer.component.css diff --git a/Frontend/src/app/footer/footer.component.html b/Frontend/src/app/components/footer/footer.component.html similarity index 100% rename from Frontend/src/app/footer/footer.component.html rename to Frontend/src/app/components/footer/footer.component.html diff --git a/Frontend/src/app/footer/footer.component.spec.ts b/Frontend/src/app/components/footer/footer.component.spec.ts similarity index 100% rename from Frontend/src/app/footer/footer.component.spec.ts rename to Frontend/src/app/components/footer/footer.component.spec.ts diff --git a/Frontend/src/app/footer/footer.component.ts b/Frontend/src/app/components/footer/footer.component.ts similarity index 100% rename from Frontend/src/app/footer/footer.component.ts rename to Frontend/src/app/components/footer/footer.component.ts diff --git a/Frontend/src/app/components/header/header.component.css b/Frontend/src/app/components/header/header.component.css new file mode 100644 index 0000000..e3147c8 --- /dev/null +++ b/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; +} diff --git a/Frontend/src/app/components/header/header.component.html b/Frontend/src/app/components/header/header.component.html new file mode 100644 index 0000000..f99e61f --- /dev/null +++ b/Frontend/src/app/components/header/header.component.html @@ -0,0 +1,14 @@ + +
+
+ +
+ +
+
+ Profile +
+
+
diff --git a/Frontend/src/app/components/header/header.component.spec.ts b/Frontend/src/app/components/header/header.component.spec.ts new file mode 100644 index 0000000..381e8e8 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/header/header.component.ts b/Frontend/src/app/components/header/header.component.ts new file mode 100644 index 0000000..ee76e9f --- /dev/null +++ b/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)); + } + +} diff --git a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.css new file mode 100644 index 0000000..761167b --- /dev/null +++ b/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; +} diff --git a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html new file mode 100644 index 0000000..0c8de11 --- /dev/null +++ b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.html @@ -0,0 +1,14 @@ +
+ + + + + + + + + + + +
VendorCurrent priceVisit
{{vendorMap[price.vendor_id]?.name}}{{price.price_in_cents / 100}}€Visit Shop
+
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: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NewestPricesListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NewestPricesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.ts b/Frontend/src/app/components/newest-prices-list/newest-prices-list.component.ts new file mode 100644 index 0000000..6c490b8 --- /dev/null +++ b/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; + }); + }); + } + +} diff --git a/Frontend/src/app/components/product-details/product-details.component.css b/Frontend/src/app/components/product-details/product-details.component.css new file mode 100644 index 0000000..42dfa5b --- /dev/null +++ b/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; +} diff --git a/Frontend/src/app/components/product-details/product-details.component.html b/Frontend/src/app/components/product-details/product-details.component.html new file mode 100644 index 0000000..f392f00 --- /dev/null +++ b/Frontend/src/app/components/product-details/product-details.component.html @@ -0,0 +1,36 @@ +
+
+ +
+
+ {{product?.name}} +
+
+
+ +
+
+
+
+ {{product?.short_description}} +
+
+
+ Set Price Alarm +
+
+
+ Best price: {{currentlyLowestPrice?.price_in_cents / 100}}€ at + vendor {{vendorMap[currentlyLowestPrice.vendor_id]?.name}}! +
+
+ Amazon-price: {{currentAmazonPrice?.price_in_cents / 100}}€ (+{{getAmazonPriceDifference()}}%) +
+
+
diff --git a/Frontend/src/app/components/product-details/product-details.component.spec.ts b/Frontend/src/app/components/product-details/product-details.component.spec.ts new file mode 100644 index 0000000..4181ef9 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProductDetailsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ProductDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/product-details/product-details.component.ts b/Frontend/src/app/components/product-details/product-details.component.ts new file mode 100644 index 0000000..9c18988 --- /dev/null +++ b/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); + } +} diff --git a/Frontend/src/app/product-list/product-list.component.css b/Frontend/src/app/components/product-list/product-list.component.css similarity index 97% rename from Frontend/src/app/product-list/product-list.component.css rename to Frontend/src/app/components/product-list/product-list.component.css index 814df74..d80c1f5 100644 --- a/Frontend/src/app/product-list/product-list.component.css +++ b/Frontend/src/app/components/product-list/product-list.component.css @@ -24,7 +24,7 @@ .productImage { max-width: 50px; max-height: 50px; - display:block; + display: block; margin: auto; position: absolute; top: 0; diff --git a/Frontend/src/app/product-list/product-list.component.html b/Frontend/src/app/components/product-list/product-list.component.html similarity index 92% rename from Frontend/src/app/product-list/product-list.component.html rename to Frontend/src/app/components/product-list/product-list.component.html index c35c5b1..6f9a8e5 100644 --- a/Frontend/src/app/product-list/product-list.component.html +++ b/Frontend/src/app/components/product-list/product-list.component.html @@ -1,4 +1,6 @@ - +
+ No Products found! +
diff --git a/Frontend/src/app/product-list/product-list.component.spec.ts b/Frontend/src/app/components/product-list/product-list.component.spec.ts similarity index 100% rename from Frontend/src/app/product-list/product-list.component.spec.ts rename to Frontend/src/app/components/product-list/product-list.component.spec.ts diff --git a/Frontend/src/app/components/product-list/product-list.component.ts b/Frontend/src/app/components/product-list/product-list.component.ts new file mode 100644 index 0000000..94bab8a --- /dev/null +++ b/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)]); + } + +} diff --git a/Frontend/src/app/landingpage/landingpage.component.html b/Frontend/src/app/landingpage/landingpage.component.html deleted file mode 100644 index 38488f7..0000000 --- a/Frontend/src/app/landingpage/landingpage.component.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/Frontend/src/app/landingpage/landingpage.component.ts b/Frontend/src/app/landingpage/landingpage.component.ts deleted file mode 100644 index ad70dcb..0000000 --- a/Frontend/src/app/landingpage/landingpage.component.ts +++ /dev/null @@ -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 { - } - -} diff --git a/Frontend/src/app/models/price.ts b/Frontend/src/app/models/price.ts new file mode 100644 index 0000000..49030e8 --- /dev/null +++ b/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; +} diff --git a/Frontend/src/app/models/vendor.ts b/Frontend/src/app/models/vendor.ts new file mode 100644 index 0000000..51afc49 --- /dev/null +++ b/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; +} 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..cac058e --- /dev/null +++ b/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; +} 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..9cc4252 --- /dev/null +++ b/Frontend/src/app/pages/landingpage/landingpage.component.html @@ -0,0 +1,18 @@ + +
+
+ +
+
+
+

Popular Searches

+ +
+
+

Best Deals

+ +
+
+
+ diff --git a/Frontend/src/app/landingpage/landingpage.component.spec.ts b/Frontend/src/app/pages/landingpage/landingpage.component.spec.ts similarity index 100% rename from Frontend/src/app/landingpage/landingpage.component.spec.ts rename to Frontend/src/app/pages/landingpage/landingpage.component.spec.ts diff --git a/Frontend/src/app/pages/landingpage/landingpage.component.ts b/Frontend/src/app/pages/landingpage/landingpage.component.ts new file mode 100644 index 0000000..d62ca82 --- /dev/null +++ b/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)); + } + +} diff --git a/Frontend/src/app/landingpage/landingpage.component.css b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.css similarity index 100% rename from Frontend/src/app/landingpage/landingpage.component.css rename to Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.css diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html new file mode 100644 index 0000000..8e032b3 --- /dev/null +++ b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.html @@ -0,0 +1,2 @@ +

404

+

Page not found!

diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.spec.ts new file mode 100644 index 0000000..67193bb --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageNotFoundPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageNotFoundPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts b/Frontend/src/app/pages/page-not-found-page/page-not-found-page.component.ts new file mode 100644 index 0000000..9de002b --- /dev/null +++ b/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 { + } + +} diff --git a/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css new file mode 100644 index 0000000..e4095ed --- /dev/null +++ b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.css @@ -0,0 +1,3 @@ +#mainComponents { + padding: 5em; +} diff --git a/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html new file mode 100644 index 0000000..a0b0822 --- /dev/null +++ b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.html @@ -0,0 +1,6 @@ + +
+ + +
+ diff --git a/Frontend/src/app/product-detail-page/product-detail-page.component.spec.ts b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.spec.ts similarity index 100% rename from Frontend/src/app/product-detail-page/product-detail-page.component.spec.ts rename to Frontend/src/app/pages/product-detail-page/product-detail-page.component.spec.ts diff --git a/Frontend/src/app/product-detail-page/product-detail-page.component.ts b/Frontend/src/app/pages/product-detail-page/product-detail-page.component.ts similarity index 100% rename from Frontend/src/app/product-detail-page/product-detail-page.component.ts rename to Frontend/src/app/pages/product-detail-page/product-detail-page.component.ts diff --git a/Frontend/src/app/pages/product-search-page/product-search-page.component.css b/Frontend/src/app/pages/product-search-page/product-search-page.component.css new file mode 100644 index 0000000..653b875 --- /dev/null +++ b/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; +} diff --git a/Frontend/src/app/pages/product-search-page/product-search-page.component.html b/Frontend/src/app/pages/product-search-page/product-search-page.component.html new file mode 100644 index 0000000..793cf38 --- /dev/null +++ b/Frontend/src/app/pages/product-search-page/product-search-page.component.html @@ -0,0 +1,6 @@ + +
+ +
+ diff --git a/Frontend/src/app/pages/product-search-page/product-search-page.component.spec.ts b/Frontend/src/app/pages/product-search-page/product-search-page.component.spec.ts new file mode 100644 index 0000000..8b90832 --- /dev/null +++ b/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; + + 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/product-detail-page/product-detail-page.component.css b/Frontend/src/app/product-detail-page/product-detail-page.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/Frontend/src/app/product-detail-page/product-detail-page.component.html b/Frontend/src/app/product-detail-page/product-detail-page.component.html deleted file mode 100644 index 8a56bb9..0000000 --- a/Frontend/src/app/product-detail-page/product-detail-page.component.html +++ /dev/null @@ -1,2 +0,0 @@ -

product-detail-page works! Product: {{productId}}

- diff --git a/Frontend/src/app/product-list/product-list.component.ts b/Frontend/src/app/product-list/product-list.component.ts deleted file mode 100644 index 9ead8f8..0000000 --- a/Frontend/src/app/product-list/product-list.component.ts +++ /dev/null @@ -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)]); - } - -} diff --git a/Frontend/src/app/api.service.spec.ts b/Frontend/src/app/services/api.service.spec.ts similarity index 100% rename from Frontend/src/app/api.service.spec.ts rename to Frontend/src/app/services/api.service.spec.ts diff --git a/Frontend/src/app/services/api.service.ts b/Frontend/src/app/services/api.service.ts new file mode 100644 index 0000000..ec91051 --- /dev/null +++ b/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 { + try { + const prod = this.http.get((this.apiUrl + '/products/' + id)); + return prod; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getProductsByQuery(query): Observable { + try { + const prods = this.http.get((this.apiUrl + '/products/search/' + query)); + return prods; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getProducts(): Observable { + try { + const prods = this.http.get((this.apiUrl + '/products')); + return prods; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getPrices(): Observable { + try { + const prices = this.http.get((this.apiUrl + '/prices')); + return prices; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getLowestPrices(productId): Observable { + try { + let params = new HttpParams(); + params = params.append('product', productId); + params = params.append('type', 'lowest'); + const prices = this.http.get((this.apiUrl + '/prices'), {params}); + return prices; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getAmazonPrice(productId): Observable { + 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((this.apiUrl + '/prices'), {params}); + return price; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getCurrentPricePerVendor(productId): Observable { + try { + let params = new HttpParams(); + params = params.append('product', productId); + params = params.append('type', 'newest'); + const prices = this.http.get((this.apiUrl + '/prices'), {params}); + return prices; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } + + getVendors(): Observable { + try { + const vendors = this.http.get((this.apiUrl + '/vendors')); + return vendors; + } catch (exception) { + process.stderr.write(`ERROR received from ${this.apiUrl}: ${exception}\n`); + } + } +} diff --git a/Frontend/src/assets/images/Betterzon.svg b/Frontend/src/assets/images/Betterzon.svg new file mode 100644 index 0000000..406b3fa --- /dev/null +++ b/Frontend/src/assets/images/Betterzon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Frontend/src/styles.css b/Frontend/src/styles.css index 90d4ee0..e6cbeed 100644 --- a/Frontend/src/styles.css +++ b/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; +}