From 5a3ced97467f2a6ac3195d0277c1394bbaa26879 Mon Sep 17 00:00:00 2001
From: phyusin <phyusinthant@code2lab.com>
Date: Wed, 22 Nov 2017 17:00:13 +0630
Subject: [PATCH] change UI for CRM/Queue

---
 app/views/crm/dining_queues/_form.html.erb | 177 +++++++++++----------
 1 file changed, 91 insertions(+), 86 deletions(-)

diff --git a/app/views/crm/dining_queues/_form.html.erb b/app/views/crm/dining_queues/_form.html.erb
index 73681d8a..7796e9a9 100755
--- a/app/views/crm/dining_queues/_form.html.erb
+++ b/app/views/crm/dining_queues/_form.html.erb
@@ -1,10 +1,13 @@
 <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">
+  <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 %>
@@ -16,66 +19,68 @@
           <div class="form-actions">
             <%= f.submit t('views.btn.submit'),:class => 'btn btn-primary btn-lg waves-effect' %>
           </div>
-      <!-- </div> -->
-    <% end %>
-  </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="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 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 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 class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
@@ -83,15 +88,15 @@
       <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>
+          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>
+          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>
@@ -106,21 +111,21 @@
 
 
 <script type="text/javascript">
-$(document).ready(function(){
-	
-  if($('form').attr('id') == "new_dining_queue"){
+  $(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){
+    $( "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();
 
@@ -162,8 +167,8 @@ $(document).ready(function(){
       minLength: 1,
       source: '<%= crm_dining_queues_path() %>',
       focus: function(event, ui) {
-          $('#dining_queue_name').val(ui.item.name);
-          return false;
+        $('#dining_queue_name').val(ui.item.name);
+        return false;
       },
       select: function(event, ui) {
         $('#dining_queue_name').val(ui.item.name);
@@ -171,10 +176,10 @@ $(document).ready(function(){
         return false;
       }
     }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
-        return $( "<li></li>" )
-            .data( "item.autocomplete", item )
-            .append( "<a>" + item.name + "</a>" )
-            .appendTo( ul );
+      return $( "<li></li>" )
+      .data( "item.autocomplete", item )
+      .append( "<a>" + item.name + "</a>" )
+      .appendTo( ul );
     };
-});
+  });
 </script>