Javascript / jQuery-价格计算

Question

I'm building an events app using Ruby on Rails. At the moment a user who wishes to book onto an event can only book and pay for one space at a time. I need to offer the facility for them to book multiple spaces and pay the appropriate price - so 5 spaces for £10 each = £50 to pay etc. I've looked for appropriate solutions in RoR to sort this but I'm hitting a brick wall. However, I believe I've perhaps approached this the wrong way and that a solution using javascript or jQuery is the best way forward. I'm very much a novice at both and need some assistance in achieving this objective.

Here's my payment/booking page -

I want a User to be able to place the number of spaces in the first text area and for the price (total amount) to change accordingly.

Here's my other relevant code -

booking.rb -

class Booking < ActiveRecord::Base

    belongs_to :event
    belongs_to :user

    def total_amount

        #quantity.to_i * @price_currency.to_money
        quantity.to_i * strip_currency(event.price)
    end

    private

        def strip_currency(amount = '')
            amount.to_s.gsub(/[^\D\.]/, '').to_f
        end



end

bookings_controller.rb

class BookingsController < ApplicationController

    before_action :authenticate_user!

    def new
        # booking form
        # I need to find the event that we're making a booking on
        @event = Event.find(params[:event_id])
        # and because the event "has_many :bookings"
        @booking = @event.bookings.new(quantity: params[:quantity])
        # which person is booking the event?
        @booking.user = current_user
        #@booking.quantity = @booking.quantity
        @total_amount = @booking.quantity.to_f * @event.price.to_f
    end

    def create
        # actually process the booking
        @event = Event.find(params[:event_id])
        @booking = @event.bookings.new(booking_params)
        @booking.user = current_user
        @price = price
        @quantity = quantity
        #@total_amount = @booking.quantity.to_f * @event.price.to_f

        Booking.transaction do

            @event.reload
            if @event.bookings.count > @event.number_of_spaces
            flash[:warning] = "Sorry, this event is fully booked."
            raise ActiveRecord::Rollback, "event is fully booked"
            end 
        end

        if @booking.save

            # CHARGE THE USER WHO'S BOOKED
            # #{} == puts a variable into a string
            Stripe::Charge.create(amount: @event.price_pennies, currency: "gbp",
                card: @booking.stripe_token, description: "Booking number #{@booking.id}")

            flash[:success] = "Your place on our event has been booked"
            redirect_to event_path(@event)
        else
            flash[:error] = "Payment unsuccessful"
            render "new"
        end

        if @event.is_free?

            @booking.save!
            flash[:success] = "Your place on our event has been booked"
            redirect_to event_path(@event)
        end
    end

    #def total_amount
        #@total_amount = @booking.quantity * @event.price
    #end

    private

      def booking_params
        params.require(:booking).permit(:stripe_token, :quantity)
      end

end

bookings.new.html.erb

<div class="col-md-6 col-md-offset-3" id="eventshow">
  <div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2>Confirm Your Booking</h2>
        </div>

            <div class="panel-body">    
                <p>Confirm number of spaces you wish to book here:
                  <input type="number" placeholder="1"  min="1" value="1"></p>
                <p>Total Amount   £<%= @event.price %></p>
                <%= simple_form_for [@event, @booking], id: "new_booking" do |form| %>



                 <span class="payment-errors"></span>

                <div class="form-row">
                    <label>
                      <span>Card Number</span>
                      <input type="text" size="20" data-stripe="number"/>
                    </label>
                </div>

                <div class="form-row">
                  <label>
                  <span>CVC</span>
                  <input type="text" size="4" data-stripe="cvc"/>
                  </label>
                </div>

                <div class="form-row">
                    <label>
                        <span>Expiration (MM/YYYY)</span>
                        <input type="text" size="2" data-stripe="exp-month"/>
                    </label>
                    <span> / </span>
                    <input type="text" size="4" data-stripe="exp-year"/>
                </div>
            </div>
            <div class="panel-footer">    

               <%= form.button :submit %>


            </div> 

<% end %>
<% end %>

      </div>
  </div>
</div>    

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script type="text/javascript">
  Stripe.setPublishableKey('<%= STRIPE_PUBLIC_KEY %>');
  var stripeResponseHandler = function(status, response) {
    var $form = $('#new_booking');

    if (response.error) {
    // Show the errors on the form
    $form.find('.payment-errors').text(response.error.message);
    $form.find('input[type=submit]').prop('disabled', false);
    } else {
    // token contains id, last4, and card type
    var token = response.id;
    // Insert the token into the form so it gets submitted to the server
    $form.append($('<input type="hidden" name="booking[stripe_token]"     />').val(token));
    // and submit
    $form.get(0).submit();
    }
  };

  // jQuery(function($)  { - changed to the line below
  $(document).on("ready page:load", function () {

    $('#new_booking').submit(function(event) {
      var $form = $(this);

      // Disable the submit button to prevent repeated clicks
      $form.find('input[type=submit]').prop('disabled', true);

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from submitting with the default action
      return false;
    });
  });
</script>

One aspect of building this site which I didn't appreciate is how difficult and complex it can be to deal with money when using RoR. A few of the suggestions I've received stated I should be using the monetize gem (I'm not, I'm using money-rails) and this coupled with some model method/MVC magic would achieve this. However, I think I'd prefer this route if the right solution can be found.

Answer 1

As you suggest, one approach is to use JavaScript to calculate the total.

You could change this snippet of your view:

<p>
  Confirm number of spaces you wish to book here:
  <input type="number" placeholder="1"  min="1" value="1">
</p>
<p>Total Amount   £<%= @event.price %></p>

to make it easier to target with jQuery and to provide a reference to the price per space. For example:

<div class="calculate-total">
  <p>
    Confirm number of spaces you wish to book here:
    <input type="number" placeholder="1"  min="1" value="1">
  </p>
  <p>
    Total Amount
    £<span class="total" data-unit-cost="<%= @event.price %>">0</span>
  </p>
</div>

Using JavaScript, you can listen for a keyup event on the input field and perform the calculation.

$('.calculate-total input').on('keyup', calculateBookingPrice);

function calculateBookingPrice() {
  var unitCost = parseFloat($('.calculate-total .total').data('unit-cost')),
      numSpaces = parseInt($('.calculate-total .num-spaces').val()),
      total = (numSpaces * unitCost).toFixed(2);

  if (isNaN(total)) {
    total = 0;
  }

  $('.calculate-total span.total').text(total);
}

Having the function separated from the event listener means you could also call it when the page loads so that you have a starting value.

Here's a fiddle to demonstrate (it assumes @event.price is 10).

UPDATE

The key here is that @event.price should return the unit price of a booking. Your new action can be as simple as this:

def new
  # Find the event for the booking.
  @event = Event.find(params[:event_id])
  # @event.price should return the unit cost of a booking.

  # Don't need to set attributes here -- you can add them in create.
  @booking = @event.bookings.new
end

Also note that if you want to store quantity and/or total_amount on your @booking object, you should move the fields inside your form ( simple_form_for ) and adjust the markup so they are submitted as part of the booking. something like this:

<%= simple_form_for [@event, @booking], id: "new_booking" do |form| %>
  <%= f.input :quantity %>
  <%= f.input :total_amount %>
  ...

And adjust your JavaScript to target these inputs (instead of the input and span in my original post).