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

<div class="row">
  <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 cashier_number" data-value="1" data-type="num">1</div>
                <div class="col-md-3 left cashier_number" data-value="2" data-type="num">2</div>
                <div class="col-md-3 left 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 cashier_number" data-value="4" data-type="num">4</div>
                <div class="col-md-3 left cashier_number" data-value="5" data-type="num">5</div>
                <div class="col-md-3 left 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 cashier_number" data-value="7" data-type="num">7</div>
                <div class="col-md-3 left cashier_number" data-value="8" data-type="num">8</div>
                <div class="col-md-3 left 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 cashier_number" data-value="0" data-type="num">0</div>
                <div class="col-md-3 left cashier_number" data-value="." data-type="num">.</div>
                <div class="col-md-3 left 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 cashier_number"></div>
                <div class="col-md-3 left cashier_number red" data-type="del">DEL</div>
                <div class="col-md-3 left cashier_number green" data-type="clr">CLR</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>