sx-fc/app/views/crm/dining_queues/_form.html.erb

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
    <div class="card">
    <div class="row p-l-20">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
          <%= simple_form_for([:crm,@dining_queue]) do |f| %>
          <%= f.error_notification %>
          <p class="hidden generate_no"><%= @queue_no  %></p>
          <!-- <div class="col-md-6"> -->
          <div class="form-inputs">
            <%= f.input :queue_no , :class => "dining",:id => "dining", :readonly => true%>
            <%= f.hidden_field :customer_id %>
            <%= f.input :name %>
            <%= f.input :contact_no %>
            <%= f.input :seater %>
            <%= f.input :remark %>
          </div>
          <br>
          <div class="form-actions">
            <%= f.submit t('views.btn.submit'),:class => 'btn btn-primary btn-lg waves-effect' %>
          </div>
          <!-- </div> -->
          <% end %>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="p-l-20 m-t-60">
                <div class="row bottom">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-l--5">
                    <div class="row m-l--5">
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="1" data-type="num">1</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="2" data-type="num">2</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="3" data-type="num">3</div>
                    </div>
                  </div>
                </div>

                <div class="row bottom">
                  <div class="col-md-12 m-l--5">
                    <div class="row m-l--5">
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="4" data-type="num">4</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="5" data-type="num">5</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="6" data-type="num">6</div>
                    </div>
                  </div>
                </div>

                <div class="row bottom">
                  <div class="col-md-12 m-l--5">
                    <div class="row m-l--5">
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="7" data-type="num">7</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="8" data-type="num">8</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="9" data-type="num">9</div>
                    </div>
                  </div>
                </div>

                <div class="row bottom">
                  <div class="col-md-12 m-l--5">
                    <div class="row m-l--5">
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="0" data-type="num">0</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="." data-type="num">.</div>
                      <div class="col-md-3 left-margin-1 cashier_number" data-value="00" data-type="num">00</div>
                    </div>
                  </div>
                </div>

                <div class="row bottom">
                  <div class="col-md-12 m-l--5">
                    <div class="row m-l--5">
                      <div class="col-md-3 left-margin-1 cashier_number"></div>
                      <div class="col-md-3 left-margin-1 cashier_number red" data-type="del">DEL</div>
                      <div class="col-md-3 left-margin-1 cashier_number green" data-type="clr">CLR</div>
                    </div>
                  </div>
                </div>  
              </div>              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="card">
      <div class="body">
        <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
        <p>
          1) <%= t("views.right_panel.detail.queue_no") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.queue_no_txt") %> <br>
          2) <%= t("views.right_panel.detail.name") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.name_txt2") %> <br>
          3) <%= t("views.right_panel.detail.contact_no") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.contact_no_txt") %> <br>
          4) <%= t("views.right_panel.detail.seater") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.seat_txt") %> <br>
          5) <%= t("views.right_panel.detail.remark") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.remark_txt") %> <br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
        <p>
          1) <%= t("views.right_panel.button.create") %> <%= t("views.right_panel.button.queue") %> - <%= t("views.right_panel.detail.create_btn_txt") %> <%= t("views.right_panel.detail.queue_txt") %> <br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
        <p>
          1) <%= t("views.right_panel.button.home") %> - <%= t("views.right_panel.detail.home_txt") %> <br>
          2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.home_txt") %> <br>
        </p>
      </div>
    </div> 
  </div>
</div>



<script type="text/javascript">
  $(document).ready(function(){

    if($('form').attr('id') == "new_dining_queue"){
    	var queue_no = $('.generate_no').text();
    	$('#dining_queue_queue_no').val(queue_no);
    }

    $( "input" ).focusin(function() {
      $('.addfocus').removeClass('addfocus'); 
      $( this ).addClass('addfocus');
    });

    $(".cashier_number").on('click', function(event){
      if(event.handled !== true) {

        var original_value='';
        original_value = $('.addfocus').val();

        var input_type = $(this).attr("data-type");

        switch (input_type) {
          case 'num':
          var input_value = $(this).attr("data-value");
          if (original_value == "0.0"){
            $('.addfocus').val(input_value);            
          }
          else{
            $('.addfocus').val(original_value + '' + input_value);            
          }
          break;

          case 'add':
          var input_value = $(this).attr("data-value");
          amount = parseInt(input_value);
          $('.addfocus').val(amount);                   
          break;

          case 'del' :
          var discount_text=$('.addfocus').val();
          $('.addfocus').val(discount_text.substr(0,discount_text.length-1));   
          break;

          case 'clr':
          $('.addfocus').val("");              
          break;
        }
        event.handled = true;
      } else {
        return false;
      }
    });

    $('#dining_queue_name').autocomplete({
      minLength: 1,
      source: '<%= crm_dining_queues_path() %>',
      focus: function(event, ui) {
        $('#dining_queue_name').val(ui.item.name);
        return false;
      },
      select: function(event, ui) {
        $('#dining_queue_name').val(ui.item.name);
        $('#dining_queue_customer_id').val(ui.item.customer_id);
        return false;
      }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + item.name + "</a>" )
      .appendTo( ul );
    };
  });
</script>