個人アプリ開発 ☆型評価の実装２

引き続き☆型評価の実装を行いました。

☆型評価の表示（コメント欄）

ビューの編集

.aquarium-comments__wrapper__comment--bottom
        .aquarium-comments__wrapper__comment--bottom__rate
          %p.rate
            .rate-star{id: "star_rate_#{comment.id}"}

               :javascript
               $('#star_rate_#{comment.id}').raty({
                   size: 36,
                   path: '/assets/',
                   score: #{comment.rate},
                   half: true,
                   readOnly: true,
                });

          %p.number
              = comment.rate
          .aquarium-comments__wrapper__comment--bottom__time
              行った時期：#{comment.visit_date}

readOnly: true,
読み取り専用（入力できない）

score: #{comment.rate},
星の入力値を読み込む

.rate-star{id: "star_rate_#{comment.id}"}
動的にidを振り、対象コメントの評価を表示

javascriptは本当はviewではなく別で管理したいが、一旦わかりやすさ（自分にとっての笑）を重視しました。
後日余裕があればリファクタリングで移動したいと思います。

☆型評価の表示（平均点）

ビューの編集

.aquarium__head--left--bottom
          %p.rate
            .rate-star{id: "star_rate_#{@group.id}"}

            :javascript
              $('#star_rate_#{@group.id}').raty({
                size: 36,
                path: '/assets/',
                half: true,
                readOnly: true,
                score: "#{@group.comments.average(:rate).to_f.round(2)}",
              });

            %p.rate-number
              = @group.comments.average(:rate).to_f.round(2)

score: "#{@group.comments.average(:rate).to_f.round(2)}",
averageを使い、記事が持つコメント（点数）の平均点を出す
→平均点を出し、round関数で小数点を切り上げる