Rails 6中如何用Bootstrap5进度条展示meetings表的动态时长数据

你当前的进度条无法动态展示的核心原因是width属性和aria-valuenow属性均为硬编码的固定值，没有和会议时长的占比绑定，同时存在HTML结构不规范的问题，按照以下步骤修改即可：

1. 确认模型层回调配置
   首先要确保meetings.rb中已经添加了触发set_duration的回调，否则duration字段不会自动计算保存：

# app/models/meeting.rb
before_save :set_duration # 缺少该行的话需要补充

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

2. 修正视图层代码
   首先要把进度条放在<td>标签内保证HTML结构合法，同时动态计算进度占比，总时长为28800秒，计算时需要做边界处理，避免超过8小时的会议时长导致进度条溢出：

<% @meetings.each do |meeting| %>
  <tr>
    <td><%= meeting.start_date %></td>
    <td>
      <% 
        # 计算进度占比，最大不超过100%
        duration_percent = [(meeting.duration.to_f / 28800 * 100).round(2), 100].min
      %>
      <div class="progress">
        <div 
          class="progress-bar" 
          role="progressbar"  
          style="width: <%= duration_percent %>%;" 
          aria-valuenow="<%= duration_percent %>" 
          aria-valuemin="0" 
          aria-valuemax="100"
        >
          <%= Time.at(meeting.duration).utc.strftime("%H小时%M分钟")  %>
        </div>
      </div>
    </td>
  </tr>
<% end %>

你可以在Rails控制台验证计算逻辑：2小时对应7200秒，计算后占比为25%，进度条宽度为25%；10小时对应36000秒，经过边界处理后占比为100%，进度条满格显示。

内容的提问来源于stack exchange，提问作者Sarah Duffy