Rails dynamic data progress bar using bootrap progress bar

user_2330283 0
Viewed 110

Hi can anyone help with trying to get a bootrap 5 progress bar to show dynamic data from my meetings table ? Rails 6.0.4 Ruby 2.7.0p0

I have a table rails g Scaffold meetings name:string start_date:datetime end_date:datetime duration:integer

Duration is a calculated field in my meetings.rb which is saved to my db

def set_duration
      self.duration = (end_date - start_date).to_i
    end

in my meeting.index.erb i have

<% @meetings.each do |meeting| %>

<td><%= meeting.start_date %></td>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><%= Time.at(meeting.duration).utc.strftime("%H hours and %M minutes ")  %></div>
</div>
<% end %>

im trying to show it so i can see the total duration hours out of a total of 8 hours or 28800 seconds but the bar will not show bootrab is working as i can generate progress bar without dynamic data. Can anyone point me in right direction? enter image description here

enter image description here

screenshot after code update progress bar still wont appear dynamically enter image description here

bootstrap-4 progress-bar ruby-on-rails
1 Answers

Read the document and example well.

style="width: 25%" aria-valuenow="25" represent progress. So you need to calculate how % from meeting duration against 24 hours.

So your Meeting model can have the following method returning %

def duration_percent
  duration / 24.hours.to_f * 100
end

and modify your ERB template to render percentage

<% @meetings.each do |meeting| %>

<div class="progress">
  <div class="progress-bar" role="progressbar"  style="width: <%= meeting.duration_percent %>%;" aria-valuenow="<%= meeting.duration_percent %>" aria-valuemin="0" aria-valuemax="100"><%= Time.at(meeting.duration).utc.strftime("%H hours and %M minutes ")  %></div</div>
<% end %>
user_3988630
Related