【Rails】 학습 앱의 진행 상황을 progress bar로 표현

2565 단어 루비Rails
rails 초학자의 아웃풋용 투고입니다. 같은 결과를 얻을 수 있는 보다 좋은 쓰는 방법이 있으면 코멘트로 교시 받을 수 있으면 다행입니다.

실현하고 싶은 것



학습 앱 작성에 있어서 사용자의 개인 페이지(user_controller의 show 액션)에 일주일, 얼마나 학습을 실시했는지를 html의 progress 태그로 보이게 한다.

이번에는 answer 모델에 각각의 학습 내용이 보존되어 있어 answer의 작성수를 카운트하고, 그것을 학습량의 산출 기준으로 한다.

이미지도(아래)


구현 흐름



①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 .

좋은 웹페이지 즐겨찾기