Ruby on Rails - ein Berechnungsformular

Question

Im Erstellen versuchen, eine Berechnungsform in Ruby similiar auf das unten stehende Bild

zu erstellen (es ist ein Screenshot von dem aus, dass ich erstellt mit HTML und Javascript codepen:

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

Es ist angenommen, wie diese

Das Budget zu arbeiten Teil U fügen Sie ein Budget hinzu und es wird durch die drei Eingabefelder und die Ergebnisse darunter geteilt.

Die Gewichtungen Teil Sie haben neun Eingänge Feld und die Sie den Wert eingeben dort die Ergebnisse der vorherigen

Dann schließlich die Ziele Teil aufteilen, wo Sie hinzufügen und entfernen 7 Spalten Reihen

Es ist ziemlich kompliziert, aber ich habe gerade das Micheal Hart-Tutorial beendet und bin mir nicht sicher, wie ich das angehen soll.

ich ein Modell namens Managements zu schaffen

dachte aber ich würde dann die Werteingänge alle im Modul hat zu schaffen?

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

Oder sollte ich separate Modelle erstellen?

Weil mein Migrate sieht wie folgt aus, und ich bin nicht sicher, wie der zusätzliche Eingangswert würde der

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 

auch gespeichert werden ich einen Code wurde mit Spalten in JavaScript hinzufügen (Sie können es in der Code-Stift-Verbindung sehen)

Ich bin bescheiden, kann ich JavaScript für die Berechnungen verwenden und die Ergebnisse werden gespeichert, sobald ich auf "submit" drücke?

Answer 1

Die Antwort, die ich fand, war durch die gleichen JS auf dem codepen Beispiel verwendet verwendet und das Hinzufügen von nested forms meine app, so konnte ich dynamisch neue Felder hinzufügen, um die Berechnung auszuführen

Unten ist ein Teil des Codes:

-Management

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>