0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】学習アプリにおける進捗状況をprogressバーで表現する

Last updated at Posted at 2021-09-25

rails 初学者のアウトプット用投稿です。同じ結果を得られるより良い書き方がございましたらコメントでご教示頂けると幸いです。

#実現したいこと
学習アプリ作成においてユーザーの個人ページ(user_controllerのshowアクション)に一週間、どのくらい学習を行なったのかをhtmlのprogressタグで見える化する。

今回はanswerモデルにそれぞれの学習内容が保存されており、answerの作成数をカウントし、それを学習量の算出基準とする。

イメージ図(下記)
FEBA03C7-F478-4A4E-B8ED-545C9F588945_4_5005_c.jpeg

#実装の流れ
①userに紐づいたanswerモデルから一週間分のデータを配列として取り出す。

②①で取り出したデータからさらに曜日だけを配列として取り出す。

③show.html.erb内のprogressタグ、value属性の値に②の配列の数を代入する。

#実際のコード

def show
 @wdays = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
    @contributions = @user.answers.where(created_at: Time.current.all_week)
    @contributions = @contributions.map{|days| days.created_at.strftime('%a')}
end

@wdaysに曜日を配列として保存。
where(created_at: Time.current.all_week)で一週間以内の日にちが含まれるcreated_atを有するデータを検索できる。
created_at.strftime('%a')で曜日だけを取り出せる。

show.html.erb
<% @wdays.each do |day|  %>
    <section>
      <span><%= day %></span><progress value=<%="#{@contributions.count{|i| i == day}}" %> max="30"></progress>
      <span><%="#{@contributions.count{|i| i == day}}" %></span></section>
<% end %>

progressタグのvalue属性にanswerの数分の曜日が収容されている@contributionsを埋め込み、それぞれの曜日に保存されたanswerの数をcount{|i| i == day}で取得し、表示する。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?