Merge branch 'rating4'

src/app/components/decks/decks.component.css

@@ -42,6 +42,23 @@
     border: solid var(--amarillo);
     cursor: pointer;
 }
+
+.checked{
+    color: var(--amarillo);
+}
+
+.show{
+    color: var(--amarillo);
+}
+
+mat-icon{
+    cursor: pointer;
+    color: #b3b3b3d3;
+}
+
+.icon{
+    color: #b3b3b377;
+}
 @media screen and (max-width: 1025px){
     .datos{
         font-size: 14pt;

src/app/components/decks/decks.component.html

@@ -5,12 +5,24 @@
     <div class="datos explorar" (click)="explora(mazo.id_deck)">Explora</div>
     <div  class="datos estrellas">
     <div class="datos puntuacion">
-        <div class="estrellas">
-            <app-rating  (onRating)="Handle(mazo.id_deck, $event)" [mediaScore] = "mazo.mediaScore" [typeRating]="typeRating" [id_deck] = mazo.id_deck [mazo] = 'mazo'></app-rating>
+        <div *ngIf="typeRating == 1" class="estrellas puntuar">
+            <mat-icon *ngFor="let icon of maxRatingArr; let index= index" 
+            (mouseover) = "HandleMouseEnter(index)"
+            (mouseleave) = "HandleMouseLeave()"
+            (click)="rating(index, mazo.id_deck)"
+            [ngClass]="{checked: mazo.selectedStar > index || mazo.previousScore.score > index}">
+            star
+            </mat-icon>
+            <!-- <app-rating  (onRating)="Handle(mazo.id_deck, $event)" [mediaScore] = "mazo.mediaScore" [typeRating]="typeRating" [mazo] = 'mazo'></app-rating> -->
+        </div>
+        <div *ngIf="typeRating == 2" class="estrellas">
+            <mat-icon *ngFor="let icon of maxRatingArr; let index= index"
+            [ngClass]="{checked:index <  roundMediaScore()}">
+        star
+        </mat-icon>
+            <!-- <app-rating  (onRating)="Handle(mazo.id_deck, $event)" [mediaScore] = "mazo.mediaScore" [typeRating]="typeRating" [mazo] = 'mazo'></app-rating> -->
         </div>
         <div >{{ mazo.mediaScore}}</div>
-
-
     </div>
 </div>
 

src/app/components/decks/decks.component.ts

@@ -1,30 +1,86 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Deck } from 'src/app/models/deck';
+import { User } from 'src/app/models/user';
+import { DeckService } from 'src/app/shared/deck.service';
+import { UsersService } from 'src/app/shared/users.service';
 
 @Component({
   selector: 'app-decks',
   templateUrl: './decks.component.html',
   styleUrls: ['./decks.component.css']
 })
-export class DecksComponent {
-public explorar: boolean = false
-public score: number;
-public selectedStar: number
+export class DecksComponent implements OnInit {
 @Input () typeRating: number;
 @Input () mazo: Deck
+@Input() maxrating: number = 5;
 @Output() eventoExplorar = new EventEmitter<number>();
 @Output() eventoPuntuacion = new EventEmitter<{id_deck:number, score:number}>()
 
-public explora(id_deck:number){
-  this.explorar = true
-  this.eventoExplorar.emit(id_deck)
+public maxRatingArr:number[] = [1,2,3,4,5]
+public explorar: boolean = false
+public score: number;
+public currentUser: User;
+constructor(private deckService:DeckService, private userService:UsersService ){
+
 }
 
-Handle(id_deck:number, score:number){
-  this.eventoPuntuacion.emit({id_deck, score})
+async ngOnInit(): Promise<void> {
+  await this.loadCurrentUser();
+  this.deckService.getScore(this.currentUser.id_user, this.mazo.id_deck).subscribe((res:any) => {
+    if (res.data[0]) {
+      console.log(res.data[0].date);
+      this.mazo.previousScore = { date: res.data[0].date, id_user: res.data[0].id_user, score: res.data[0].score };
+      console.log(this.mazo.previousScore);
+    } else {
+      this.mazo.previousScore = { date: '', id_user: 0, score: 0 };
+    }
+  });
 
-  this.selectedStar = score;
-  console.log(this.selectedStar);
-
+}
+
+private async loadCurrentUser(): Promise<void> {
+  return new Promise<void>((resolve) => {
+    this.userService.currentUserChanges().subscribe(user => {
+      this.currentUser = user;
+      resolve(); 
+    });
+  });
+}
+
+HandleMouseEnter(index:number){
+  this.mazo.selectedStar=index+1
+}
+
+HandleMouseLeave(){
+  if(this.mazo.previousScore.score !== 0){
+    this.mazo.selectedStar = this.mazo.previousScore.score
+  }
+  else {
+    this.mazo.selectedStar = 0
+  }
+}
+
+rating(index:number, id_deck){
+  if(this.mazo.previousScore.score == 0 && this.mazo.id_user != this.currentUser.id_user){
+    this.mazo.selectedStar= index + 1; 
+    this.mazo.previousScore.score= this.mazo.selectedStar
+  }
+  this.score = this.mazo.selectedStar
+  this.eventoPuntuacion.emit({id_deck, score:this.score});
+}
+
+roundMediaScore(){
+  let resultado;
+  if (this.mazo.mediaScore !== undefined) {
+    resultado =  Math.round(this.mazo.mediaScore);
+  } else {
+  resultado = 0
+  }
+  return resultado
+}
+
+public explora(id_deck:number){
+  this.explorar = true
+  this.eventoExplorar.emit(id_deck)
 }
 }

src/app/components/rating/rating.component.ts

@@ -11,6 +11,7 @@ export class RatingComponent{
   @Input() mazo: Deck
   @Input() mediaScore: number;
   @Input () typeRating: number;
+  @Input () i: number
   @Output() onRating = new EventEmitter<number>()
   public selectedStar: number
   public showStar: number = 0
@@ -24,18 +25,17 @@ export class RatingComponent{
     this.selectedStar = index +1
   }
   HandleMouseLeave(){
-    // if(this.previoSelection != 0){
-    //   this.selectedStar = this.previoSelection
-    // }else 
+    if(this.previoSelection != 0){
+      this.selectedStar = this.previoSelection
+    }else 
     this.selectedStar = 0
   }
 
   rating(index:number){
 
     this.selectedStar = index + 1; 
     this.previoSelection = this.selectedStar
-    console.log(this.mazo);
-
+    console.log(this.mazo)
     console.log(this.previoSelection);
     this.onRating.emit(this.selectedStar);
 

src/app/models/deck.ts

@@ -10,7 +10,8 @@ export class Deck {
         public cards?: Card[],
         public URLphoto?:string,
         public id_user?: number,
-        public previousScore?: { date: string, userVotes: number, score:number }[],
+        public previousScore?: { date: string, id_user: number, score:number },
+        public selectedStar?: number,
         public typeRating?:number
        ){}
 }

src/app/pages/explora/explora.component.html

@@ -43,7 +43,7 @@ <h2 class="tituloh2" >Vota y descubre los mejores mazos</h2>
 
             <cdk-virtual-scroll-viewport itemSize="50" class="scroll">
 
-                    <div *cdkVirtualFor="let mazo of mazos" class="bucle" >
+                    <div *ngFor="let mazo of mazos" class="bucle" >
                         <app-decks [mazo] = "mazo" (eventoExplorar) = 'seleccionMazo($event)'
                         (eventoPuntuacion) = "score($event)" [typeRating] = 1></app-decks>
                     </div>

src/app/pages/explora/explora.component.ts

@@ -136,6 +136,7 @@ export class ExploraComponent implements OnInit {
   }
 
   public score(event:{id_deck:number, score:number}){
+    this.loadCurrentUser();
     this.mazos.find ((deck) => {
       if(deck.id_deck == event.id_deck){
         this.deckService.putMediaScore(this.currentUser.id_user,event.id_deck, event.score).subscribe((res:any) => {

src/app/shared/deck.service.ts

@@ -59,6 +59,7 @@ export class DeckService {
 
   public getScore(id_user:number, id_deck:number){
     return this.http.get(`${this.urlExplora}/score?id_user=${id_user}&id_deck=${id_deck}`)
+
   }
 
   public getDeckById(id_deck:number,filter:string){