Рубин на рельсах - Создание расчетной формы

Question

Im пытается создать форму расчета в Ruby, похожий на картинку ниже

(это скриншот из этого, созданных с помощью HTML и Javascript codepen:

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

Это, предполагают, чтобы работать как этот

бюджет part U добавить бюджет, и он делится на три поля ввода и результаты ниже.

Веса часть Вы есть поле девять входов и значение ты войти туда попасть разделить результаты предыдущего одного

Затем, наконец, с целями части, где вы можете добавлять и удалять 7 столбцов строки

Это довольно сложно, но я только что закончил учебник Micheal Hart, и я не уверен, как подойти к этому.

Я думал о создании одна модель под названием Управление

Но я бы тогда придется создавать все входы значений в модуле?

$ 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 для расчетов, и результаты будут сохранены после нажатия кнопки submit?

Answer 1

Ответ я нашел, используя тот же JS используется на codepen примере и добавление 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>