+
+
diff --git a/Frontend/src/app/components/auth/registration/registration.component.spec.ts b/Frontend/src/app/components/auth/registration/registration.component.spec.ts
new file mode 100644
index 0000000..6c3a576
--- /dev/null
+++ b/Frontend/src/app/components/auth/registration/registration.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistrationComponent } from './registration.component';
+
+describe('RegistrationComponent', () => {
+ let component: RegistrationComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+ Konto erstellen
+
+
+
+ resetpasswort works!
diff --git a/Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.spec.ts b/Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.spec.ts new file mode 100644 index 0000000..af17ac6 --- /dev/null +++ b/Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResetpasswortComponent } from './resetpasswort.component'; + +describe('ResetpasswortComponent', () => { + let component: ResetpasswortComponent; + let fixture: ComponentFixture
+
+
+
+
diff --git a/Frontend/src/app/components/auth/signin/signin.component.spec.ts b/Frontend/src/app/components/auth/signin/signin.component.spec.ts
new file mode 100644
index 0000000..b19d8bf
--- /dev/null
+++ b/Frontend/src/app/components/auth/signin/signin.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SigninComponent } from './signin.component';
+
+describe('SigninComponent', () => {
+ let component: SigninComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
- ;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CopyrightComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CopyrightComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Frontend/src/app/components/copyright/copyright.component.ts b/Frontend/src/app/components/copyright/copyright.component.ts
new file mode 100644
index 0000000..4db696c
--- /dev/null
+++ b/Frontend/src/app/components/copyright/copyright.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-copyright',
+ templateUrl: './copyright.component.html',
+ styleUrls: ['./copyright.component.css']
+})
+export class CopyrightComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.css b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.html b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.html
new file mode 100644
index 0000000..dfc774e
--- /dev/null
+++ b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.html
@@ -0,0 +1,16 @@
+
+
diff --git a/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.spec.ts b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.spec.ts
new file mode 100644
index 0000000..dfe17d1
--- /dev/null
+++ b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GreetingInfoSliderComponent } from './greeting-info-slider.component';
+
+describe('GreetingInfoSliderComponent', () => {
+ let component: GreetingInfoSliderComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ GreetingInfoSliderComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GreetingInfoSliderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.ts b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.ts
new file mode 100644
index 0000000..9172ea0
--- /dev/null
+++ b/Frontend/src/app/components/greeting-info-slider/greeting-info-slider.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-greeting-info-slider',
+ templateUrl: './greeting-info-slider.component.html',
+ styleUrls: ['./greeting-info-slider.component.css']
+})
+export class GreetingInfoSliderComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css
index 4876607..a9a0257 100644
--- a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css
+++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.css
@@ -1,72 +1,97 @@
-.hot-deal-widget-wrapper{
- width: 1640px;
- height: 820px;
- background-color: #f8f9fa;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-column-gap: 0px;
- grid-row-gap: 0px;
- align-items: center;
+.bbb_deals_wrapper {
+ overflow: hidden;
}
-.product-description {
- /*background-color: #3480E3;*/
- height: 100%;
- display: grid;
- grid-template-columns: 15% 16px 15% 16px 15% 16px 15% 16px 15% 16px 15% 8px;
- grid-template-rows: repeat(5, 1fr);
+.bbb_deals_wrapper:hover {
+ transform: scale(1.2);
}
-.product-image {
-
+.bbb_deals_featured {
+ width: 100%;
}
-#hot-deals{
- /*background-color: #E53167;*/
- justify-self: center;
- align-self: center;
- grid-column: 3/10;
- grid-row: 1/2;
+.bbb_deals {
+ width: 100%;
+ margin-right: 7%;
+ padding-top: 80px;
+ padding-left: 25px;
+ padding-right: 25px;
+ padding-bottom: 34px;
+ box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ margin-top: 0px
}
-#product-name {
- justify-self: center;
- align-self: center;
- grid-column: 3/10;
- grid-row: 2/3;
- /*background-color: #E53167;*/
+.bbb_deals_title {
+ position: absolute;
+ top: 10px;
+ left: 22px;
+ font-size: 18px;
+ font-weight: 500;
+ color: #000000
}
-#product-name > p {
- font-size: 65px;
+.bbb_deals_slider_container {
+ width: 100%
}
-#sales {
- justify-self: center;
- align-self: center;
- grid-column: 3/10;
- grid-row: 3/4;
- /*background-color: #E53167;*/
+.bbb_deals_item {
+ width: 100% !important
}
-#futher-informations {
- justify-self: center;
- align-self: center;
- grid-column: 3/10;
- grid-row: 4/5;
- /*background-color: #E53167;*/
+.bbb_deals_image {
+ width: 40%;
+ height: 40%;
}
-#points {
- justify-self: center;
- align-self: start;
- grid-column: 3/10;
- grid-row: 5/6;
- /*background-color: #E53167;*/
+.bbb_deals_image img {
+ width: 100%
}
-.product-image {
- display: grid;
- justify-content: center;
+.bbb_deals_content {
+ margin-top: 33px
}
+.bbb_deals_item_category a {
+ font-size: 14px;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.5)
+}
+
+#bbb_deals_item_price_a {
+ font-size: 14px;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.6);
+ color: red;
+}
+
+#bbb_deals_item_price_b {
+ font-size: 14px;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.6);
+ color: green;
+}
+
+.bbb_deals_item_name {
+ max-width: 300px;
+ word-wrap: break-word;
+ font-size: 16px;
+ font-weight: 400;
+ color: #000000;
+}
+
+.bbb_deals_item_price {
+ font-size: 24px;
+ font-weight: 500;
+ color: #228B22;
+}
+
+.available {
+ margin-top: 19px
+}
+
+.available_title {
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.5);
+ font-weight: 400
+}
diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html
index ae2d98f..36ea156 100644
--- a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html
+++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.html
@@ -1,23 +1,34 @@
-
-
- FOLGEUNS
-
-
-
-
-
+
diff --git a/Frontend/src/app/components/copyright/copyright.component.css b/Frontend/src/app/components/copyright/copyright.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/app/components/copyright/copyright.component.html b/Frontend/src/app/components/copyright/copyright.component.html
new file mode 100644
index 0000000..8a212d1
--- /dev/null
+++ b/Frontend/src/app/components/copyright/copyright.component.html
@@ -0,0 +1,3 @@
+
+
diff --git a/Frontend/src/app/components/copyright/copyright.component.spec.ts b/Frontend/src/app/components/copyright/copyright.component.spec.ts
new file mode 100644
index 0000000..d1ff341
--- /dev/null
+++ b/Frontend/src/app/components/copyright/copyright.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CopyrightComponent } from './copyright.component';
+
+describe('CopyrightComponent', () => {
+ let component: CopyrightComponent;
+ let fixture: ComponentFixtureCopyright © Your Website 2021
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
diff --git a/Frontend/src/app/components/kunden/kunden.component.spec.ts b/Frontend/src/app/components/kunden/kunden.component.spec.ts
new file mode 100644
index 0000000..3977b33
--- /dev/null
+++ b/Frontend/src/app/components/kunden/kunden.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KundenComponent } from './kunden.component';
+
+describe('KundenComponent', () => {
+ let component: KundenComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ KundenComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(KundenComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Frontend/src/app/components/kunden/kunden.component.ts b/Frontend/src/app/components/kunden/kunden.component.ts
new file mode 100644
index 0000000..416be2e
--- /dev/null
+++ b/Frontend/src/app/components/kunden/kunden.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-kunden',
+ templateUrl: './kunden.component.html',
+ styleUrls: ['./kunden.component.css']
+})
+export class KundenComponent 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/components/top-bar/top-bar.component.css b/Frontend/src/app/components/top-bar/top-bar.component.css
index 74e9f16..e69de29 100644
--- a/Frontend/src/app/components/top-bar/top-bar.component.css
+++ b/Frontend/src/app/components/top-bar/top-bar.component.css
@@ -1,54 +0,0 @@
-.top-bar-wrapper {
- display: grid;
- grid-template-columns: 200px 360px 820px 20px 250px;
- grid-template-rows: 40px;
- grid-column-gap: 0px;
- grid-row-gap: 0px;
- align-items: center;
-}
-
-.top-logo {
- grid-area: 1/1;
-}
-
-#better {
- font-size: 28px;
- font-weight: bold;
- color: #3480E3;
-}
-
-#zon {
- font-size: 28px;
- font-weight: bold;
- color: #E53167;
-}
-
-.search-button {
- /*background-color: #E53167;*/
-}
-
-.sign-up {
- /*background-color: #E53167;*/
- margin-left: 50px;
- margin-right: 25px;
-}
-
-.login {
- margin-right: 25px;
-}
-
-#signin {
- border-radius: 25px;
- background-color: #E53167;
-}
-
-._links > a {
- /*background-color: #E53167;*/
- margin-left: 10px;
- margin-right: 10px;
-}
-
-._signing_links > a {
- /*background-color: #E53167;*/
- margin-left: 50px;
-}
diff --git a/Frontend/src/app/components/top-bar/top-bar.component.html b/Frontend/src/app/components/top-bar/top-bar.component.html
index 921a3cf..b8b6697 100644
--- a/Frontend/src/app/components/top-bar/top-bar.component.html
+++ b/Frontend/src/app/components/top-bar/top-bar.component.html
@@ -1,26 +1,22 @@
-
-
+
+
diff --git a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts
index f41d5da..031dc53 100644
--- a/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts
+++ b/Frontend/src/app/components/hot-deals-widget/hot-deals-widget.component.ts
@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+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-hot-deals-widget',
@@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
})
export class HotDealsWidgetComponent implements OnInit {
- constructor() { }
+ 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)]);
+ }
- ngOnInit(): void {
- }
}
diff --git a/Frontend/src/app/components/kunden/kunden.component.css b/Frontend/src/app/components/kunden/kunden.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/app/components/kunden/kunden.component.html b/Frontend/src/app/components/kunden/kunden.component.html
new file mode 100644
index 0000000..0012423
--- /dev/null
+++ b/Frontend/src/app/components/kunden/kunden.component.html
@@ -0,0 +1,38 @@
+HOT DEALS
+
+
+
- TOP-ANGEBOTE
+ +
+
-
- Neues Apple iPhone 12 Pro
+
+
- Neues Apple iPhone 12 Pro
(512 GB) - Graphit
+
+
+
+
+
+
+ 
+
+
+
+
+
+ {{product.name}}
+
+
+ Amazon: 699.00$
+
+
+
+ Plantshub: 599,00$
+
- SPARE BIS ZU 7%!
-
-
- Weitere Informationen
-
-
- points
-
-
- 
-
-
-
+
+
+SIE VERTRAUEN UNS
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+