isa44.74/brief-la-belle-plante2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2 from Julian30520/Julian

Browse Source 
Julian
This commit is contained in:
Julian 2022-01-11 20:27:23 +01:00 committed by GitHub
commit 9a5868dfc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 18843 additions and 6149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12101
db.json
View File

File diff suppressed because it is too large Load Diff

12705
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
src/app/components/avis-bar/avis-bar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-avis-bar',
@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
})
export class AvisBarComponent implements OnInit {
starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[];
@Output() stateNumber = new EventEmitter
starStateNumber: number = 0;
constructor() {
this.starStates = [];
@ -50,13 +52,17 @@ export class AvisBarComponent implements OnInit {
}
onClickStar(starIndex: number) {
this.starStateNumber = 0;
for (let i = 0; i < this.starStates.length ; i++) {
if(i <= starIndex) {
this.starStates[i].stateSelectedUser = true;
this.starStateNumber++;
} else {
this.starStates[i].stateSelectedUser = false;
}
}
//console.log(`Rating : ${this.starStateNumber}`);
this.stateNumber.emit(this.starStateNumber);
}
}

62
src/app/components/filter-side-bar/filter-side-bar.component.html
View File

@ -9,36 +9,36 @@
<input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}">
<label class="form-check-label" for="checkBoxCategory{{indexCat}}">
{{ category }}
</label>
</div>
<div *ngIf="listCategories.length == 0 ">
Aucune catégorie disponible
</div>
</div>
</ul>
<ul class="list-unstyled ps-0 border-top">
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Prix</p>
<div class="d-flex justify-content-center">
<input id="number" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
<input id="number" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
</div>
<label class="form-check-label" for="checkBoxCategory{{indexCat}}">
{{ category }}
</label>
</div>
<div *ngIf="listCategories.length == 0 ">
Aucune catégorie disponible
</div>
</div>
</ul>
<ul class="list-unstyled ps-0 border-top">
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Prix</p>
<div class="d-flex justify-content-center">
<input #minNum id="numberMin" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
<input #maxNum id="numberMax" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
</div>
<div class="d-flex justify-content-center">
<a href="#" class="btn btn-success m-3">Valider</a>
</div>
</div>
</ul>
<ul class="list-unstyled ps-0 border-top">
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Avis</p>
<div class="flex-column justify-content-start">
<app-avis-bar (stateNumber)="onStateNumberChange"></app-avis-bar>
<button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
</div>
</div>
</ul>
<div class="d-flex justify-content-center">
<button class="btn btn-success m-3" (click)="onSendValues(minNum, maxNum)">Valider</button>
</div>
</div>
</ul>
<ul class="list-unstyled ps-0 border-top">
<div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Avis</p>
<div class="flex-column justify-content-start">
<app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
<button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
</div>
</div>
</ul>
</div>

10
src/app/components/filter-side-bar/filter-side-bar.component.ts
View File

@ -8,9 +8,10 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
export class FilterSideBarComponent implements OnInit {
@Input() listCategories: string[];
@Output() stateNumber = new EventEmitter();
@Output() rangeNumber = new EventEmitter();
filterStateNumber: number = 0;
constructor() {
constructor() {
this.listCategories = [];
}
@ -25,4 +26,9 @@ export class FilterSideBarComponent implements OnInit {
this.stateNumber.emit(this.filterStateNumber);
}
onSendValues(minNum: any, maxNum: any): void {
let rangeArray: number[] = [parseFloat(minNum.value), parseFloat(maxNum.value)];
console.log(typeof(rangeArray[0]));
this.rangeNumber.emit(rangeArray);
}
}

3
src/app/pages/page-accueil/page-accueil.component.html
View File

@ -1,6 +1,5 @@
<div class="d-flex align-items-stretch">
<app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
<app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)"></app-filter-side-bar>
<div class="custom-main container p-3">
<input class="form-control"
type="text"

103
src/app/pages/page-accueil/page-accueil.component.ts
View File

@ -12,19 +12,27 @@ import * as _ from 'underscore';
})
export class PageAccueilComponent implements OnInit {
public listData: any[];
public listRate: any[];
public listPricePlant : any[];
public clickCounter : any;
public listDataGlobal: any[];
public listDataFilter: any[];
public listCategoriesFilter: string[];
public rangeNumber: number[];
public stateNumber: number;
public isPricingFilterActive: boolean;
public isRatingFilterActive: boolean;
constructor(private plantouneService: PlantouneService) {
this.listData = [];
this.listRate = [];
this.listDataGlobal = [];
this.listDataFilter = [];
this.listCategoriesFilter = [];
this.listPricePlant = [];
this.clickCounter = 0;
this.rangeNumber = [];
this.stateNumber = 0;
this.isPricingFilterActive = false;
this.isRatingFilterActive = false;
}
/**
@ -44,6 +52,9 @@ export class PageAccueilComponent implements OnInit {
this.plantouneService.getData().subscribe(
(listPlant: any[]) => {
console.log(listPlant);
this.listDataGlobal = [...listPlant];
this.listDataFilter = [...this.listDataGlobal];
console.log(this.listDataGlobal);
/**
* Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes
@ -66,7 +77,8 @@ export class PageAccueilComponent implements OnInit {
this.listCategoriesFilter = listUniqJsCategories;
this.listData = listPlant;
this.listData.length = 9;
// console.log(this.listData);
console.log(this.listData);
}
)
}
@ -75,36 +87,55 @@ export class PageAccueilComponent implements OnInit {
this.plantouneService.plantLiked$.next('')
}
//Tri des prix des plantes par ordre croissant ou décroissant
onPriceTri() : void {
this.clickCounter ++
console.log(this.clickCounter)
if (this.clickCounter %2) {
this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.product_price));
}else{
this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price));
}
onRatingFilter(stateNumber: number): void {
this.stateNumber = stateNumber;
this.isRatingFilterActive = true;
this.onApplyFilters();
}
//Tri des noms des plantes par ordre alphanumérique
onAlphaTri() : void {
onPriceFilter(rangeNumber: number[]) {
this.rangeNumber = [...rangeNumber];
this.isPricingFilterActive = true;
this.onApplyFilters();
}
this.clickCounter ++
if (this.clickCounter %2) {
this.listData.sort((a, b) => (a.product_name > b.product_name) ? 1 : -1)
}else{
this.listData.sort((a, b) => (b.product_name > a.product_name) ? 1 : -1)
}
}
//Tri des avis des plantes par ordre croissant ou décroissant
onRatingTri() : void{
this.clickCounter ++
if (this.clickCounter %2) {
this.listData.sort((a, b) => (a.product_rating > b.product_rating) ? 1 : -1)
}else{
this.listData.sort((a, b) => (b.product_rating > a.product_rating) ? 1 : -1)
}
onApplyFilters(): void {
if(this.isPricingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
}
if(this.isRatingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(product.product_rating >= this.stateNumber) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
}
if(this.isPricingFilterActive && this.isRatingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0]
&& parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]
&& product.product_rating >= this.stateNumber) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
console.log(this.listData);
}
if(this.listData.length >= 9) this.listData.length = 9;
}
}