I am currently developing a CAD App in Rails 4 with Ruby 2. The goal is to provide users with a button on the screen to log an on-scene time and clear scene time, especially since most users will be using touch screen computers. Instead of using the default Rails time_select input boxes, I wanted to explore different options.
I'm curious if it's possible to implement this feature, and if so, I would appreciate some ideas and guidance on how to achieve it.
Additionally, I have another question regarding displaying these time boxes only if unit_2 - unit_4 have any content in their respective DB Columns.
This is what my form looks like:
<%= 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>
<!-- Code for other units goes here -->
</div>
</div>
This image shows the section of the form that needs enhancement: https://i.stack.imgur.com/aSUG0.png
Each unit has two time select boxes, which I aim to turn into buttons that record the time and update the respective table columns for display on the show.html.erb page. Additionally, I want to hide these buttons if the unit_2,3,4 fields are empty until data is entered.
If you can assist with either or both of these tasks, I would greatly appreciate it! Thank you in advance.
EDIT: I have added the following script to my Rails-created form. However, clicking the button redirects me to the show.html.erb page without updating the table:
<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>