javascript - 如何使用按钮将时间传递给 Postgresql DB 而不是表单中的 rails time_select 框

Question

我正在用 Rails 4 Ruby 2 构建一个 CAD 应用程序

我想做的是给用户一个按钮，让他在屏幕上按下(因为大多数用户将使用触摸屏计算机)来记录现场时间和清除场景时间。目前我有默认的 Rails time_select 输入框，但我决定尝试让事情变得有趣一点。

我想知道这是否完全可行，如果可以的话，我想知道如何实现这一目标的一些想法和帮助。

我的第二个问题是，如果 unit_2 - unit_4 在它们各自的数据库列中有任何内容，我如何才能显示这些时间框。 (我将在下面发布图片)

我的表格看起来像:

<%= form_for(@call) do |f| %>
    <div class="panel panel-success" id="responding-box">
          <div class="panel-heading"><center><h4>Units Responding</h4></center></div>
          <table class="table">
            <thead>
              <tr>
                <th><center>Primary Responder</center></th>
                <th><center>Time On Scene</center></th>
                <th><center>Time Clear</center></th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td><center><%= f.collection_select(:user_id, User.all, :id, :employee_ident, {}, { :multiple => false } ) %></center></td>
                <td><center><%= f.time_select :unit_on_scene, {:include_blank => true, :default => nil} %></center></td>
                <td><center><%= f.time_select :unit_clear, {:include_blank => true, :default => nil} %></center></td>
              </tr>
            </tbody>
          </table>
          <br>
          <table class="table">
            <thead>
              <tr>
                <th><center>Backing Unit #1</center></th>
                <th><center>Time On Scene</center></th>
                <th><center>Time Clear</center></th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td><center><%= f.text_field :unit_2 %></center></td>
                <td><center><%= f.time_select :unit2_os, {:include_blank => true, :default => nil} %></center></td>
                <td><center><%= f.time_select :unit2_cl, {:include_blank => true, :default => nil} %></center></td>
              </tr>
            </tbody>
          </table>
          <br>
          <table class="table">
            <thead>
              <tr>
                <th><center>Backing Unit #2</center></th>
                <th><center>Time On Scene</center></th>
                <th><center>Time Clear</center></th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td><center><%= f.text_field :unit_3 %></center></td>
                <td><center><%= f.time_select :unit3_os, {:include_blank => true, :default => nil} %></center></td>
                <td><center><%= f.time_select :unit3_cl, {:include_blank => true, :default => nil} %></center></td>
              </tr>
            </tbody>
          </table>
          <br>
          <table class="table">
            <thead>
              <tr>
                <th><center>Backing Unit #3</center></th>
                <th><center>Time On Scene</center></th>
                <th><center>Time Clear</center></th>
              </tr>
            </thead>

            <tbody>
              <tr>
              <td><center><%= f.text_field :unit_4 %></center></td> 
                <td><center><%= f.time_select :unit4_os, {:include_blank => true, :default => nil} %></center></td>
                <td><center><%= f.time_select :unit4_cl, {:include_blank => true, :default => nil} %></center></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

我的 Controller 看起来像:

class CallsController < ApplicationController
  before_action :set_call, only: [:show, :edit, :update, :destroy]

  # GET /calls
  # GET /calls.json
  def index
    @calls = Call.all
    @active_calls = @calls.select{|x| x.status == 'ACTIVE'}
    @pending_calls = @calls.select{|x| x.status == 'PENDING'}
  end

  # GET /calls/1
  # GET /calls/1.json
  def show

  end

  # GET /calls/new
  def new
    @call = Call.new
  end

  # GET /calls/1/edit
  def edit
    @call = Call.find(params[:id])
  end

  # POST /calls
  # POST /calls.json
  def create
    @call = Call.new(call_params)


    respond_to do |format|
      if @call.save
        format.html { redirect_to @call, notice: 'Call was successfully created.' }
        format.json { render :show, status: :created, location: @call }
      else
        format.html { render :new }
        format.json { render json: @call.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /calls/1
  # PATCH/PUT /calls/1.json
  def update
    respond_to do |format|
      if @call.update(call_params)
        format.html { redirect_to @call, notice: 'Call was successfully updated.' }
        format.json { render :show, status: :ok, location: @call }
      else
        format.html { render :edit }
        format.json { render json: @call.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /calls/1
  # DELETE /calls/1.json
  def destroy
    @call.destroy
    respond_to do |format|
      format.html { redirect_to calls_url, notice: 'Call was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_call
      @call = Call.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def call_params
      params.require(:call).permit(:call_time, :status, :primary_type, :secondary_type, :site, :address, :unit_1, :unit_2, :unit_3, :unit_4, :call_details, :unit_on_scene, :unit_clear, :call_num, :site_id, :user_id, :unit2_os, :unit2_cl, :unit3_os, :unit3_cl, :unit4_os, :unit4_cl)
    end
end

这是我想要“增添趣味”的表格部分的图片

如您所见，每个单元都有两个时间选择框。我希望将它们变成记录时间的按钮并将其发布到相应的表列，以便我可以在 show.html.erb 页面中显示它们。

至于第二个问题，如果 unit_2、3、4 框(字符串)中没有捕获任何内容，那么我希望这些框/按钮在填充之前隐藏起来。

截至目前，我对时代的按钮非常满意。如果您能在其中一项或两项方面提供帮助，我将不胜感激!提前致谢。

编辑:这是我添加到我的 Rails 创建的表单中的内容。当我单击按钮时，它会跟随提交路径并将我带到 show.html.erb 页面，但不会更新表格以反射(reflect)时间。

    <script>
    $('#unit_on_scene').on("click", function() {
    $('#unit_on_scene').val(Date());
    alert('unit_on_scene set to ' + $('#unit_on_scene').val());
    return false;
    })
    </script>

    <form action="" method="POST">
        <input type="hidden" id="unit_on_scene"></input>
        <button class="btn btn-nav btn-primary" id="unit_on_scene" type="submit">On Scene</button>
    </form>
    </center></td>

Answer 1

问题 1 使用 JavaScript 应该很容易实现。例如，您可以有一个绑定(bind)到 JavaScript 事件的按钮，该事件将隐藏输入设置为当前时间。

示例(使用 jQuery)Fiddle - https://jsfiddle.net/k6emjoLt/

<script type="text/javascript">
  $('#timeBtn').on("click", function(){
     $('#timeField').val(Date());
  })
</script>

问题 2 也很简单。在您的 Controller 中为您的 View 创建一个变量，让您知道这些字段是否已被填充。

示例(需要在 Controller 中设置@unit2)

<% if @unit2.present? %>
  <tr>
    <td><center><%= f.text_field :unit_2 %></center></td>
    <td><center><%= f.time_select :unit2_os, {:include_blank => true, :default => nil} %></center></td>
    <td><center><%= f.time_select :unit2_cl, {:include_blank => true, :default => nil} %></center></td>
  </tr>
<% end %>