[RAILS] Afficher la valeur moyenne de l'évaluation sous forme d'étoile

Décrivez comment afficher la valeur moyenne de l'évaluation de chaque magasin sur la page d'affichage de la liste! L'image ressemble à ceci.

Cette implémentation est Farstep [Cours de programmation] [[Ruby on Rails] Créons une fonction de révision d'étoiles (PART1) Comment créer un classement par étoiles avec Ruby on Rails](https://www.youtube.com/watch? v = NOOYABsAip0) est utilisé comme référence.

environnement d'utilisation

ruby 2.6.5 Ruby on Rails 6.0.3.3 Bootstrap 4 est utilisé pour certaines marges.

Détails d'implémentation

Implémentation du modèle

model

class Laundry < ApplicationRecord
  def avg_score
    unless self.comments.empty?
      comments.average(:rate_id).round(1)
    else
      0.0
    end
  end
  
 def avg_score_percentage
   unless self.comments.empty?
     comments.average(:rate_id).round(1).to_f*100/5
   else
     0.0
   end
 end
end

Tout d'abord, la valeur moyenne est calculée si le commentaire existe selon qu'il est vide ou non. Utilisez la méthode moyenne pour obtenir la valeur moyenne des noms de colonne. En réglant `` round (1) '', il sera arrondi au deuxième chiffre.

La méthode avg_score_percentage calcule le pourcentage et le transmet à la vue.

Voir l'implémentation

Le code est ci-dessous.

html

<div class="average-score mb-3">
 <div class="star-rating ml-2">
   <div class="star-rating-front" style="width: <%= laundry.avg_score_percentage %>%">★★★★★</div>
   <div class="star-rating-back">★★★★★</div>
 </div>
 <div class="average-score-display">
   （<%= laundry.avg_score %>point)
 </div>
</div>

css

.average-score {
  display: flex;　//★ et points côte à côte
  justify-content: center;
}

.star-rating {
  position: relative;
  width: 5em;
  height: 1em;
  font-size: 17px;

}
.star-rating-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; //Masquez la partie qui dépasse la largeur spécifiée.
  white-space: nowrap;　//Évitez l'emballage lorsque la largeur n'est pas suffisante
  color: #ffcc33;
  height: 25px;
}
.star-rating-back {
  color: #ccc;
}

Nous allons le mettre en œuvre en préparant deux 5 étoiles (★★★★★) et en superposant les deux. ・ .Star-rating-front ・ ・ ・ Spécifiez la largeur en superposant la partie étoile jaune sur le dessus avec "width: <% =undry.avg_score_percentage%>%` `. ・ .Star-rating-back`` ・ ・ ・ Remplissez la partie en étoile grise, la partie qui n'a pas jauni en la plaçant en dessous.

Je pense que les deux points suivants sont les points.

1. Spécifiez débordement: caché; ''. En spécifiant overflow: hidden; '', la partie qui s'étend au-delà de la largeur spécifiée est masquée et l'étoile grise derrière elle est affichée. Si vous ne le spécifiez pas, même si vous spécifiez la largeur, la partie qui s'étend au-delà de la largeur n'est pas masquée, elle sera donc toujours notée 5 étoiles. débordement: caché; aucun

2. En définissant white-space: nowrap; '', il ne s'enroulera pas lorsque la largeur ne sera pas suffisante. En spécifiant cela, les points après la virgule décimale seront également reflétés dans les étoiles. white-space: nowrap; `` Oui

espace blanc: nowrap; aucun

Vous pouvez désormais afficher la note moyenne sous forme d'étoile!