[RAILS] Zeigen Sie den Durchschnittswert der Bewertung als Stern an

Beschreibt, wie der Durchschnittswert der Bewertung jedes Geschäfts auf der Listenanzeigeseite angezeigt wird! Das Bild sieht so aus.

Diese Implementierung ist Farstep [Programmierkurs] [[Ruby on Rails] Erstellen wir eine Sternüberprüfungsfunktion (TEIL 1) So erstellen Sie eine Sternebewertung mit Ruby on Rails](https://www.youtube.com/watch? v = NOOYABsAip0) wird als Referenz verwendet.

Nutzungsumgebung

ruby 2.6.5 Ruby on Rails 6.0.3.3 Bootstrap 4 wird für einige Ränder verwendet.

Implementierungsdetails

Modellimplementierung

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

Zunächst wird der Durchschnittswert berechnet, wenn der Kommentar vorhanden ist, je nachdem, ob er leer ist oder nicht. Verwenden Sie die Durchschnittsmethode, um den Durchschnittswert der Spaltennamen zu ermitteln. Durch Setzen von round (1) wird es auf die zweite Ziffer gerundet.

Die Methode avg_score_percentage berechnet den Prozentsatz und übergibt ihn an die Ansicht.

Implementierung anzeigen

Der Code ist unten.

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 %>Punkt)
 </div>
</div>

css

.average-score {
  display: flex;　//★ und zeigt nebeneinander
  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; //Blenden Sie den Teil aus, der über die angegebene Breite hinausgeht.
  white-space: nowrap;　//Vermeiden Sie das Umwickeln, wenn die Breite nicht ausreicht.
  color: #ffcc33;
  height: 25px;
}
.star-rating-back {
  color: #ccc;
}

Wir werden es implementieren, indem wir zwei 5 Sterne (★★★★★) vorbereiten und die beiden überlagern. ・ .Star-Rating-Front ・ ・ ・ Geben Sie die Breite an, indem Sie den gelben Sternteil oben mit "width: <% = laundry.avg_score_percentage%>%` `überlagern. ・ .Star-Rating-Back`` ・ ・ ・ Füllen Sie den grauen Stern, den Teil, der nicht gelb wurde, indem Sie ihn darunter platzieren.

Ich denke, die folgenden zwei Punkte sind die Punkte.

1. Geben Sie overflow: hidden; an. Durch Angabe von overflow: hidden; wird der Teil, der über die angegebene Breite hinausgeht, ausgeblendet und der graue Stern dahinter angezeigt. Wenn Sie dies nicht angeben, wird der Teil, der über die Breite hinausgeht, auch dann nicht ausgeblendet, wenn Sie die Breite angeben. Daher wird er immer mit 5 Sternen bewertet. Überlauf: versteckt; keine

2. Wenn Sie white-space: nowrap; einstellen, wird es nicht umgebrochen, wenn die Breite nicht ausreicht. Wenn Sie dies angeben, werden die Punkte nach dem Dezimalpunkt auch in den Sternen wiedergegeben. Leerraum: nowrap; Ja

white-space: nowrap; none

Sie können jetzt die durchschnittliche Bewertung als Stern anzeigen!