Question

我试图在Ruby中创建一个与下图相似的计算表单

（它是我使用HTML和Javascript codepen创建的截图：

http://codepen.io/salman15/pen/pNELXM）

a busy cat

它假设像这样工作

预算部分你添加一个预算，它除以三个输入字段和它下面的结果。

权重部分您有九个输入字段，您输入的值将除以前一个字段的结果

然后最后是目标部分，您可以在其中添加和删除7列行

这很复杂，但我刚刚完成了Micheal Hart教程，我不知道如何处理这个问题。

我正在考虑创建一个名为Management

的模型

但是，我是否必须在模块中创建所有值输入？

$ rails generate model Budget budget:text weighings:text objectives:text confrences:text prob:text  user:references

或者我应该创建单独的模型？

因为我的Migrate看起来像这样，而且我不确定如何保存额外的输入值

迁移

    class CreateBudgets < ActiveRecord::Migration[5.0]
  def change
    create_table :budgets do |t|
      t.text :budget
      t.text :weighings
      t.text :objectives
      t.text :confrences
      t.text :prob
      t.references :user, foreign_key: true

      t.timestamps
    end
  end
end

另外我使用代码在JavaScript中添加列（你可以在代码笔链接中看到它）

我谦虚地说我可以使用JavaScript进行计算，一旦按下提交结果就会保存？

Answer 1

我找到的答案是使用codepen示例中使用的相同JS并将nested forms添加到我的应用中，以便我可以动态添加新字段来运行计算

以下是代码的一部分：

<强>管理

   class ManagmentsController < ApplicationController
  before_action :logged_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy

    def index
     @managments = current_user.managments
     @micropost = current_user.microposts.build
    end

    def show
      @microposts = Micropost.paginate(page: params[:page])
      @managment = Managment.find_by(id: params[:id])
      if !@managment
        raise ActionController::RoutingError.new('Not Found')
      end
      @user = @managment.user
    end

    def new
      @user = User.new
      @managment = Managment.new
      @microposts = Micropost.paginate(page: params[:page])
    end

    def edit
      @managment = Managment.find(params[:id])
      @microposts = Micropost.paginate(page: params[:page])
    end

    def create
      @managment = current_user.managments.build(managment_params)
      if @managment.save
        flash[:success] = "Managment created!"
        redirect_to @managment
      else
        @feed_items = current_user.feed.paginate(page: params[:page])
        render 'new'
      end
    end

    def update
      @managment = Managment.find(params[:id])
      if @managment.update(managment_params)
        redirect_to @managment
      else
        render 'edit'
      end
    end

    def destroy
      @managment.destroy
      flash[:success] = "Managment deleted"
      redirect_to managments_path
    end

    private

    def managment_params
      params.require(:managment).permit( 
      :title,  :budget,
      :procent1, :procent2, :procent3, :procent4,
      :procent5, :procent6, :procent7,
      :procent8, :procent9, :procent10,
      :procent11, :procent12, :result1,
      :result2, :result3,
      :lowprocent1, :lowprocent2, :lowprocent3,
      :medprocent1, :medprocent2, :medprocent3,
      :highprocent1, :highprocent2, :highprocent3,

      objectives_attributes: [
      :id, :objectivesname1,
      :lowobjectives1, :medobjectives1,
      :highobjectives1, :lowobjectives1,
      :medobjectives1, :highobjectives1,
      :lowprocent1,:medprocent1,:highprocent1,
      :_destroy],

       continentals_attributes: [
      :id, :objectivesname2,
      :lowobjectives2, :medobjectives2,
      :highobjectives2, :lowobjectives2, 
      :medobjectives2, :highobjectives2,
      :lowprocent2,:medprocent2,:highprocent2,
      :_destroy],

       internationals_attributes: [
      :id, :objectivesname3,
      :lowobjectives3, :medobjectives3,
      :highobjectives3, :lowobjectives3,
      :medobjectives3, :highobjectives3,
      :lowprocent3,:medprocent3,:highprocent3,
      :_destroy])
    end

    def correct_user
      @managment = current_user.managments.find_by(id: params[:id])
      redirect_to managments_path if @managment.nil?
    end

end

<强> _managment.html.rb

 <div class="field" id="weighings">
    <div class="colum">
    <h4>Low presence</h4>
    <input class="inputbudget procentages" id="lowplow" onkeydown="return false"  value="<%= managment.procent4 %>">%
    <input class="inputbudget procentages" id="lowpmed" onkeydown="return false"  value="<%= managment.procent5 %>">%
    <input class="inputbudget procentages" id="lowphigh" onkeydown="return false"  value="<%= managment.procent6 %>">%
    </div>

    <div class="colum">
    <h4>Medium presence</h4>
    <input class="inputbudget procentages" id="medplow"  onkeydown="return false"  value="<%= managment.procent7 %>">%
    <input class="inputbudget procentages" id="medpmed"  onkeydown="return false"  value="<%= managment.procent8 %>">%
    <input class="inputbudget procentages" id="medphigh"  onkeydown="return false"  value="<%= managment.procent9 %>">%
    </div>

    <div class="colum">
    <h4>High presence</h4>
    <input class="inputbudget procentages" id="highplow"  onkeydown="return false"  value="<%= managment.procent10 %>">%
    <input class="inputbudget procentages" id="highpmed"  onkeydown="return false"  value="<%= managment.procent11 %>">%
    <input class="inputbudget procentages" id="highphigh"  onkeydown="return false"  value="<%= managment.procent12 %>">%
    </div>
  </div>

    <div class="field">
      <h1>Objectives</h1>

    <h4>low presence</h4>
    <input class="inputbudget procentages" id="objectiveinput" onkeydown="return false"  value="<%= managment.objectivesname1 %>">
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.lowprocent1 %>">%
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.medprocent1 %>">%
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.highprocent1 %>">%
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.lowobjectives1 %>">
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.medobjectives1 %>">
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.highobjectives1 %>">

    <h4>Medium presence</h4>
    <input class="inputbudget procentages" id="objectiveinput"  onkeydown="return false"  value="<%= managment.objectivesname2 %>">
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.lowprocent2 %>">%
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.medprocent2 %>">%
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.highprocent2 %>">%
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.lowobjectives2 %>">
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.medobjectives2 %>">
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.highobjectives2 %>">

    <h4>High presence</h4>
    <input class="inputbudget procentages" id="objectiveinput"  onkeydown="return false"  value="<%= managment.objectivesname3 %>">
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.lowprocent3 %>">%
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.medprocent3 %>">%
    <input class="inputbudget procentages" id="procentages"  onkeydown="return false"  value="<%= managment.highprocent3 %>">%
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.lowobjectives3 %>">
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.medobjectives3 %>">
    <input class="inputbudget procentages" id="procentages"   onkeydown="return false"  value="<%= managment.highobjectives3 %>">

  </div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Data</h3>
            <!--START BUDGET FORM -->
      <form class="budgetresultsoutput" id="totalbudget">
        <!--End budget output-->

        <!--Procentages output-->
        <div class="row datarowbudget">
          <div class="colum" id="columtext">
            <p>P.O.I</p>
            <input class="box names" type="text" id="title3-0" value="Domestic" onkeydown="return false" placeholder="Slice #1 title" />
            <input class="box names" type="text" id="title2-1" value="Continental" onkeydown="return false" placeholder="Slice #1 title" />
            <input class="box names" type="text" id="title2-2" value="International" onkeydown="return false" placeholder="Slice #1 title" />
            <input class="box" type="text" id="title2-2" value="Total" onkeydown="return false" placeholder="Slice #1 title" />
          </div>

          <!-- COLUM 1/LOW-->
          <div class="colum" id="regio">
            <p>Low</p>
            <input class="box" value="1" id="value3-0" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-1" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-2" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-9" type="text" onkeydown="return false" />
          </div>
          <!-- COLUM 2 MEDIUM -->
          <div class="colum" id="regio">
            <p>Medium</p>
            <input class="box" value="1" id="value3-3" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-4" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-5" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-10" type="text" onkeydown="return false" />
          </div>
          <!-- COLUM 3 HIGH -->
          <div class="colum" id="regio">
            <p>High</p>
            <input class="box" value="1" id="value3-6" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-7" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-8" type="text" onkeydown="return false" />
            <input class="box" value="1" id="value3-11" type="text" onkeydown="return false" />
          </div>
          <!--Budget output-->
          <div class="colum columbudget" id="regio">
            <p>Budget</p>
            <input id="budgetdata" type="text" name="budget" value="<%= managment.budget %>" onkeydown="return false"><br>
          </div>
          <div class="colum" id="regioprec">
            <!--Low presence:-->
            <p>Procentages</p>
            <input class="procentages" id="lowdata" type="text" name="low" value="<%= managment.procent1 %>" onkeydown="return false">%<br>
            <input class="procentages"id="meddata" type="text" name="low" value="<%= managment.procent2 %>" onkeydown="return false">%<br>
            <input class="procentages" id="highdata" type="text" name="low" value="<%= managment.procent3 %>" onkeydown="return false">%<br>
          </div>
        </div>
        <!--End procentages input-->
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Desired return sheet</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Expected return sheet</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
        <div id="menu4" class="tab-pane fade">
      <h3>Cost sheet</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>



  <span class="timestamp">

    <% if current_user?(managment.user) %>
      <%= link_to "delete", managment, method: :delete,
                                       data: { confirm: "You sure?" } %>
    <% end %>
  </span>
</li>


<script type="text/javascript">
//CALCULATE MANAGEMENT
function calculateManagement() {

  //START OF BUDGET(data) PART
  var domesticResultLow = document.getElementById('value3-0');
  var domesticResultMed = document.getElementById('value3-1');
  var domesticResultHigh = document.getElementById('value3-2');
  var domesticResultFinal = document.getElementById('value3-9');

  var continentalResultLow = document.getElementById('value3-3');
  var continentalResultMed = document.getElementById('value3-4');
  var continentalResultHigh = document.getElementById('value3-5');
  var continentalResultFinal = document.getElementById('value3-10');

  var globalResultLow = document.getElementById('value3-6');
  var globalResultMed = document.getElementById('value3-7');
  var globalResultHigh = document.getElementById('value3-8');
  var globalResultFinal = document.getElementById('value3-11');

  var lowProcentageLow = document.getElementById('lowplow').value;
  var lowProcentageMed = document.getElementById('lowpmed').value;
  var lowProcentageHigh = document.getElementById('lowphigh').value;

  var medProcentageLow = document.getElementById('medplow').value;
  var medProcentageMed = document.getElementById('medpmed').value;
  var medProcentageHigh = document.getElementById('medphigh').value;

  var highProcentageLow = document.getElementById('highplow').value;
  var highProcentageMed = document.getElementById('highpmed').value;
  var highProcentageHigh = document.getElementById('highphigh').value;

  var resultOne = document.getElementById('result1').value;
  var resultTwo = document.getElementById('result2').value;
  var resultThree = document.getElementById('result3').value;

  var lowProcentLow = (resultOne /100 )* lowProcentageLow;
  domesticResultLow.value = lowProcentLow;

    var lowProcentMed = (resultOne /100 )* lowProcentageMed;
  domesticResultMed.value = lowProcentMed;

  var lowProcentHigh = (resultOne /100 )* lowProcentageHigh;
  domesticResultHigh.value = lowProcentHigh;


  var medProcentLow = (resultTwo /100 )* medProcentageLow;
  continentalResultLow.value = medProcentLow;

  var medProcentMed = (resultTwo /100 )* medProcentageMed;
  continentalResultMed.value = medProcentMed;

  var medProcentHigh = (resultTwo /100 )* medProcentageHigh;
  continentalResultHigh.value = medProcentHigh;


  var highProcentLow = (resultThree /100 )* highProcentageLow;
  globalResultLow.value = highProcentLow;

  var highProcentMed = (resultThree /100 )* highProcentageMed;
  globalResultMed.value = highProcentMed;

  var highProcentHigh = (resultThree /100 )* highProcentageHigh;
  globalResultHigh.value = highProcentHigh;

  domesticResultFinal.value = resultOne;
  continentalResultFinal.value = resultTwo;
  globalResultFinal.value = resultThree;

  //END OF BUDGET(data) PART

}


//No letters
function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}
//
</script>

Ruby on rails - 创建计算表单

1 个答案: