Rails集成Bootstrap进度条：减重进度百分比计算求助

Hey there! I’ve been where you are—staring at a progress bar that just won’t add up, so let’s walk through this step by step. First, let’s nail down the core math, then hook it up to your Bootstrap bar and existing Rails code.

Step 1: Define the Calculation Logic #

The key to the progress percentage is measuring how much of your total weight loss goal you’ve already achieved. Here’s the formula to use:

Progress % = (Weight Lost ÷ Total Weight to Lose) × 100

We need to handle edge cases too (like if your target weight is higher than your initial, or you’ve already hit your goal):

• If Total Weight to Lose (initial - target) is ≤ 0: Either show an error (since you can’t lose weight to reach a higher target) or adjust for a gain goal if that’s your use case.
• If Weight Lost (initial - current) exceeds Total Weight to Lose: Cap the progress at 100%—you’ve crushed your goal!

Step 2: Implement the Calculation in Rails #

Since you’re using Rails (from the ERB snippet), let’s calculate these values in your controller (cleaner than doing it directly in the view):

Example Controller Code #

# In your weights_controller.rb or dashboard_controller.rb
def show
  @weights = Weight.all # Or your existing query logic
  @initial_weight = @weights.first&.value # Grab the first recorded weight
  @current_weight = @weights.last&.value # Get the latest weight (matches your .last(1) call)
  @target_weight = current_user.target_weight # Assuming target is stored on your User model

  if @initial_weight && @target_weight && @current_weight
    total_to_lose = @initial_weight - @target_weight
    if total_to_lose > 0
      weight_lost = @initial_weight - @current_weight
      # Cap progress at 100% if user has exceeded their target
      @progress_percentage = [(weight_lost / total_to_lose.to_f) * 100, 100].min
    else
      @progress_percentage = 0 # Or show a message about invalid target weight
    end
  else
    @progress_percentage = nil # Flag to prompt user to set up their weights
  end
end

Step 3: Add the Bootstrap Progress Bar to Your View #

Now plug this into your existing card code. Here’s how to integrate it with your ERB snippet:

<div class="card-body">
  <% if @progress_percentage %>
    <!-- Progress Bar Section -->
    <div class="mb-3">
      <h5>Weight Loss Progress</h5>
      <div class="progress" style="height: 25px;">
        <div class="progress-bar bg-success" 
             role="progressbar" 
             style="width: <%= @progress_percentage %>%;" 
             aria-valuenow="<%= @progress_percentage %>" 
             aria-valuemin="0" 
             aria-valuemax="100">
          <%= @progress_percentage.round(1) %>% <!-- Round to 1 decimal for readability -->
        </div>
      </div>
      <small class="text-muted mt-1 d-block">
        Initial: <%= @initial_weight %> lbs | Current: <%= @current_weight %> lbs | Target: <%= @target_weight %> lbs
      </small>
    </div>
  <% else %>
    <p class="text-warning">Please set your initial weight and target weight to track your progress!</p>
  <% end %>

  <!-- Your existing weight entry display -->
  <% @weights.last(1).each do |weight| %>
    <p>Latest Weight: <%= weight.value %> lbs on <%= weight.created_at.strftime("%m/%d/%Y") %></p>
  <% end %>
</div>

Quick Tips to Avoid Headaches #

• Use to_f in division: Ruby does integer division by default, so 5 / 10 would return 0 instead of 0.5—adding to_f ensures you get an accurate decimal for your percentage.
• Handle nil values: Always check if your weight values exist before calculating, otherwise you’ll run into unexpected errors.
• Customize Bootstrap styling: Swap bg-success for bg-primary or other Bootstrap color classes to match your app’s design.

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