使用引导进度条的 Rails 动态数据进度条

Posted 2023-03-21

【中文标题】使用引导进度条的 Rails 动态数据进度条

【英文标题】：Rails dynamic data progress bar using bootrap progress bar

【发布时间】：2021-10-30 01:01:17

【问题描述】：

您好，任何人都可以帮助尝试获取 bootrap 5 进度条以显示我的会议表中的动态数据吗？ Rails 6.0.4 Ruby 2.7.0p0

我有一张桌子rails g Scaffold meetings name:string start_date:datetime end_date:datetime duration:integer

持续时间是我的 meeting.rb 中的一个计算字段，它保存到我的数据库中

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

在我的 meeting.index.erb 我有

<% @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 %>

我试图显示它，以便我可以看到总共 8 小时或 28800 秒中的总持续时间，但该栏不会显示 bootrab 正在工作，因为我可以在没有动态数据的情况下生成进度条。谁能指出我正确的方向？

代码更新进度条后的截图仍然不会动态出现

【参考方案1】：

Read the document and example well.

style="width: 25%" aria-valuenow="25" 代表进度。因此，您需要计算会议持续时间与 24 小时的百分比。

所以你的Meeting 模型可以有以下方法返回 %

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

并修改您的 ERB 模板以呈现百分比

<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 %>

【讨论】：

嗨 Amit Patel 感谢您的帮助，由于某种原因进度条仍然没有显示给我，我添加了添加代码后得到的输出屏幕截图。不知道为什么它不会动态显示但会很好地显示静态进度条？