change UI for CRM/Queue

This commit is contained in:
phyusin
2017-11-22 17:00:13 +06:30
parent afcf7725f5
commit 5a3ced9746

View File

@@ -1,10 +1,13 @@
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<%= simple_form_for([:crm,@dining_queue]) do |f| %> <div class="card">
<%= f.error_notification %> <div class="row p-l-20">
<p class="hidden generate_no"><%= @queue_no %></p> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<!-- <div class="col-md-6"> --> <%= simple_form_for([:crm,@dining_queue]) do |f| %>
<div class="form-inputs"> <%= 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.input :queue_no , :class => "dining",:id => "dining", :readonly => true%>
<%= f.hidden_field :customer_id %> <%= f.hidden_field :customer_id %>
<%= f.input :name %> <%= f.input :name %>
@@ -16,66 +19,68 @@
<div class="form-actions"> <div class="form-actions">
<%= f.submit t('views.btn.submit'),:class => 'btn btn-primary btn-lg waves-effect' %> <%= f.submit t('views.btn.submit'),:class => 'btn btn-primary btn-lg waves-effect' %>
</div> </div>
<!-- </div> --> <!-- </div> -->
<% end %> <% end %>
</div> </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="col-xs-12 col-sm-12 col-md-5 col-lg-5"> <div class="row bottom">
<div class="row"> <div class="col-md-12 m-l--5">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="row m-l--5">
<div class="p-l-20 m-t-60"> <div class="col-md-3 left cashier_number" data-value="4" data-type="num">4</div>
<div class="row bottom"> <div class="col-md-3 left cashier_number" data-value="5" data-type="num">5</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-l--5"> <div class="col-md-3 left cashier_number" data-value="6" data-type="num">6</div>
<div class="row m-l--5"> </div>
<div class="col-md-3 left cashier_number" data-value="1" data-type="num">1</div> </div>
<div class="col-md-3 left cashier_number" data-value="2" data-type="num">2</div> </div>
<div class="col-md-3 left cashier_number" data-value="3" data-type="num">3</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>
</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>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
@@ -83,15 +88,15 @@
<div class="body"> <div class="body">
<h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5> <h5><i class="material-icons md-18">view_headline <%= t("views.right_panel.header.page_detail") %></i></h5>
<p> <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> 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> 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> 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> 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> 5) <%= t("views.right_panel.detail.remark") %> - <%= t("views.right_panel.detail.write_txt") %> <%= t("views.right_panel.detail.remark_txt") %> <br>
</p> </p>
<h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5> <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
<p> <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> 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> </p>
<h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5> <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
<p> <p>
@@ -106,21 +111,21 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
if($('form').attr('id') == "new_dining_queue"){ if($('form').attr('id') == "new_dining_queue"){
var queue_no = $('.generate_no').text(); var queue_no = $('.generate_no').text();
$('#dining_queue_queue_no').val(queue_no); $('#dining_queue_queue_no').val(queue_no);
} }
$( "input" ).focusin(function() {
$('.addfocus').removeClass('addfocus');
$( this ).addClass('addfocus');
});
$(".cashier_number").on('click', function(event){ $( "input" ).focusin(function() {
$('.addfocus').removeClass('addfocus');
$( this ).addClass('addfocus');
});
$(".cashier_number").on('click', function(event){
if(event.handled !== true) { if(event.handled !== true) {
var original_value=''; var original_value='';
original_value = $('.addfocus').val(); original_value = $('.addfocus').val();
@@ -162,8 +167,8 @@ $(document).ready(function(){
minLength: 1, minLength: 1,
source: '<%= crm_dining_queues_path() %>', source: '<%= crm_dining_queues_path() %>',
focus: function(event, ui) { focus: function(event, ui) {
$('#dining_queue_name').val(ui.item.name); $('#dining_queue_name').val(ui.item.name);
return false; return false;
}, },
select: function(event, ui) { select: function(event, ui) {
$('#dining_queue_name').val(ui.item.name); $('#dining_queue_name').val(ui.item.name);
@@ -171,10 +176,10 @@ $(document).ready(function(){
return false; return false;
} }
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) { }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" ) return $( "<li></li>" )
.data( "item.autocomplete", item ) .data( "item.autocomplete", item )
.append( "<a>" + item.name + "</a>" ) .append( "<a>" + item.name + "</a>" )
.appendTo( ul ); .appendTo( ul );
}; };
}); });
</script> </script>