ruling_timer/app/views/admin/ruling_timers/edit_timer.html.erb

<style type="text/css">
  .timer_block input{
    width: 5em;
  }
  .remove_btn{
    color: red;
    margin-right: 0.3em;
    background: transparent;
    border: 1px solid red;
  }
  .remove_btn:hover{
    font-weight: bold;
  }
</style>
<%
  if @timer.class == RulingTimerTemp
    @timer.check_and_store 
    @timer_history = @timer.instance_variable_get(:@timer_history)
    if @timer_history
      @timer = @timer_history
    end
  end
%>
<%= form_for @timer, url: update_timer_admin_ruling_timer_path(@timer), html: {class: "form-horizontal main-forms previewable"} do |f| %>
  <fieldset>
    <h3><%= @timer.date.split(" ")[0] + " " + @weekdays[@timer.date.split(" ")[1].to_i] %></h3>
    <% if @timer.class == RulingTimerTemp %>
      <input name="type" value="temp" type="hidden">
    <% end %>
    <div class="control-group">
      <label class="control-label muted" for="edit_summary" ><%= t("ruling_timer.summary") %></label>
      <div class="controls">
        <%= f.text_area :summary,:id=>"edit_summary" %>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label muted"><%=t("ruling_timer.work_time")%></label>
      <div class="controls timer_block">
        <% work_times = @timer.get_work_times(true) %>
        <% work_times.each_with_index do |t,i| %>
          <% if i % 2 == 0
               next_t = work_times[i+1]
             else
               next
             end %>
          <span><button class="remove_btn" type="button">X</button><%= f.text_field_tag "#{f.object_name}[work_times][]", t ,:id=>nil %> ~ <%= f.text_field_tag "#{f.object_name}[work_times][]", next_t ,:id=>nil %></span>
          <hr>
        <% end %>
        <div class="add_target"></div>
        <button type="button" class="btn btn-primary" id="add_timer"><%=t(:add)%></button>
      </div>
    </div>
    <!-- Form Actions -->
    <div class="form-actions">
      <% referer = request.referer rescue nil %>
      <% referer = get_referer_url if referer.blank? || request.host != URI.parse(URI.encode(referer)).host %>
      <%= f.submit t('submit'), class: 'btn btn-primary' %>
      <input type="hidden" name="referer_url" value="<%= referer %>">
      <%= link_to t('cancel'), referer, :class=>"btn" %>  
    </div>
  </fieldset>
  <script>
    $(document).ready(function(){
      $('.timer_block input').ui_timepicker({timeFormat: 'H:mm:ss'});
      $("#add_timer").click(function(){
        var timer_html = $('<span><button class="remove_btn" type="button">X</button><%= f.text_field_tag "#{f.object_name}[work_times][]",nil,:id=>nil %> ~ <%= f.text_field_tag "#{f.object_name}[work_times][]",nil,:id=>nil %></span><hr>');
        $(".add_target").append(timer_html);
        timer_html.find("input").ui_timepicker({timeFormat: 'H:mm:ss'});
      })
      $(document).on("click",".remove_btn",function(){
        var item = $(this).parent();
        item.next("hr").remove();
        item.remove();
      })
    })
  </script>
<% end %>