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

Merge branch 'dev' into Isa

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

289
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);
}
}

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

@ -13,7 +13,7 @@
{{ category }}
</label>
</div>
<div *ngIf="listCategories.length == 0 ">S
<div *ngIf="listCategories.length == 0 ">
Aucune catégorie disponible
</div>
</div>
@ -22,12 +22,12 @@
<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%;">
<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>
<button class="btn btn-success m-3" (click)="onSendValues(minNum, maxNum)">Valider</button>
</div>
</div>
</ul>
@ -36,8 +36,8 @@
<p class="mb-1 fs-5 fw-semibold">Avis</p>
<div class="flex-column justify-content-start">
<app-avis-bar></app-avis-bar>
<a href="#" class="btn btn-success me-2">Valider</a>
<app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
<button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
</div>
</div>
</ul>

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

@ -1,6 +1,5 @@
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-filter-side-bar',
templateUrl: './filter-side-bar.component.html',
@ -9,6 +8,9 @@ import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
export class FilterSideBarComponent implements OnInit {
@Input() listCategories: string[];
@Output() checkCategory = new EventEmitter();
@Output() stateNumber = new EventEmitter();
@Output() rangeNumber = new EventEmitter();
filterStateNumber: number = 0;
public selectedCategory: string[];
@ -39,4 +41,17 @@ export class FilterSideBarComponent implements OnInit {
//console.log("romain" , this.selectedCategory)
}
onStateNumberChange(stateNumber: number): void {
this.filterStateNumber = stateNumber;
}
onSendRating():void {
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);
}
}

11
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" (checkCategory)="onListCategory($event)"></app-filter-side-bar>
<app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)" (checkCategory)="onListCategory($event)"></app-filter-side-bar>
<div class="custom-main container p-3">
<input class="form-control"
type="text"
@ -9,15 +8,15 @@
<div class="py-3">
Trier par :
<button class="btn btn-outline-success btn-sm me-2">Prix</button>
<button class="btn btn-outline-success btn-sm me-2">Ordre Alpha</button>
<button class="btn btn-outline-success btn-sm me-2">Avis</button>
<button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
<button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
<button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
</div>
<div class="row">
<div class="col" *ngFor="let product of listData">
<app-card-plante [plant]="product"
(clickLike)="onEventLike()" >
(clickLike)="onEventLike()">
</app-card-plante>
</div>
</div>

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

@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
import { PlantouneService } from 'src/app/services/plantoune.service';
import * as _ from 'underscore';
@Component({
selector: 'app-page-accueil',
templateUrl: './page-accueil.component.html',
@ -9,15 +12,33 @@ import * as _ from 'underscore';
})
export class PageAccueilComponent implements OnInit {
public listData: any[];
public listDataGlobal : any[];
public listDataGlobal: any[];
public listDataFilter: any[];
public listCategoriesFilter: string[];
public dataFilterCategory : any;
public rangeNumber: number[];
public stateNumber: number;
public isPricingFilterActive: boolean;
public isRatingFilterActive: boolean;
public clickCounter : any;
constructor(private plantouneService: PlantouneService) {
this.listData = [];
this.listDataGlobal=[];
this.listDataGlobal = [];
this.listDataFilter = [];
this.listCategoriesFilter = [];
this.rangeNumber = [];
this.stateNumber = 0;
this.isPricingFilterActive = false;
this.isRatingFilterActive = false;
this.clickCounter = 0;
}
/**
@ -37,16 +58,19 @@ export class PageAccueilComponent implements OnInit {
this.plantouneService.getData().subscribe(
(listPlant: any[]) => {
console.log(listPlant);
this.listDataGlobal=[...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
*/
const listAllCategories = listPlant.map(product => product.product_breadcrumb_label);
console.log(listAllCategories);
// console.log(listAllCategories);
const listUniqCategories = _.uniq(listAllCategories)
console.log(listUniqCategories);
// console.log(listUniqCategories);
/**
@ -60,7 +84,7 @@ export class PageAccueilComponent implements OnInit {
this.listData = listPlant;
this.listData.length = 9;
console.log(this.listData);
}
)
}
@ -94,5 +118,89 @@ export class PageAccueilComponent implements OnInit {
}
}
onRatingFilter(stateNumber: number): void {
this.stateNumber = stateNumber;
this.isRatingFilterActive = true;
this.onApplyFilters();
}
onPriceFilter(rangeNumber: number[]) {
this.rangeNumber = [...rangeNumber];
this.isPricingFilterActive = true;
this.onApplyFilters();
}
onApplyFilters(): void {
this.clickCounter = 0;
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;
}
//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(a.product_price) - parseFloat(b.product_price));
}else{
this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.product_price));
}
}
//Tri des noms des plantes par ordre alphanumérique
onAlphaTri() : void {
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)
}
}
}