mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-21 22:03:58 +00:00
kunden component is done.
This commit is contained in:
parent
b291c0b828
commit
c8cbc53c91
38
Frontend/src/app/components/kunden/kunden.component.html
Normal file
38
Frontend/src/app/components/kunden/kunden.component.html
Normal file
|
@ -0,0 +1,38 @@
|
|||
<section class="page-section portfolio" id="unsere-kunden">
|
||||
<div class="container">
|
||||
<!-- Portfolio Section Heading-->
|
||||
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">SIE VERTRAUEN UNS</h2>
|
||||
<!-- Icon Divider-->
|
||||
<div class="divider-custom">
|
||||
<div class="divider-custom-line"></div>
|
||||
</div>
|
||||
<!-- Portfolio Grid Items-->
|
||||
<div class="row justify-content-center">
|
||||
<!-- Portfolio Item 1-->
|
||||
<div class="col-md-6 col-lg-4 mb-5">
|
||||
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
|
||||
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
|
||||
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="productImage" src="assets/images/Betterzon.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-5">
|
||||
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
|
||||
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
|
||||
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="productImage" src="assets/images/Betterzon.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 mb-5">
|
||||
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
|
||||
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
|
||||
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
|
||||
</div>
|
||||
<img class="productImage" src="assets/images/Betterzon.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
25
Frontend/src/app/components/kunden/kunden.component.spec.ts
Normal file
25
Frontend/src/app/components/kunden/kunden.component.spec.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { KundenComponent } from './kunden.component';
|
||||
|
||||
describe('KundenComponent', () => {
|
||||
let component: KundenComponent;
|
||||
let fixture: ComponentFixture<KundenComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ KundenComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(KundenComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
67
Frontend/src/app/components/kunden/kunden.component.ts
Normal file
67
Frontend/src/app/components/kunden/kunden.component.ts
Normal file
|
@ -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)]);
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user