queue and crm view updated

app/views/crm/home/_booking.html.erb

@@ -6,29 +6,29 @@
   <% @booking.each do |booking| %>
     <% if booking.booking_status == "new" %>
     <div class="card">
-      <div class="card-block booking_click" data-id="sfddf" data-ref="<%= api_booking_path booking.id%>" id="card-block booking_block"  >
-       <p class="hidden booking-id"><%= booking.id  %></p> 
-        <h4 class="card-title">
-           <%= @i += 1 %> . <%= booking.dining_facility.name %>
-           - <%= booking.id %>
-        </h4>
-        <!-- <p class="card-text">Medium, Fries, Salad</p> -->
-        <p class="card-text">
-          <small class="text-muted">
-            Order at  <%= booking.checkin_at.strftime("%H,%m") %>, <%= booking.checkin_by %>
-          </small>
-        </p>
-      </div>
-      <div class="card-footer">
-        <div class="row">
-          <div class="col-md-6">
-         
+        <div class="card-block booking_click" data-id="sfddf" data-ref="<%= api_booking_path booking.id%>" id="card-block booking_block"  >
+           <p class="hidden booking-id"><%= booking.id  %></p> 
+           <h4 class="card-title">
+             <%= @i += 1 %> . <%= booking.dining_facility.name %>
+             - <%= booking.id %>
+           </h4>
+           <!-- <p class="card-text">Medium, Fries, Salad</p> -->
+           <p class="card-text">
+            <small class="text-muted">
+              Order at  <%= booking.checkin_at.strftime("%H,%m") %>, <%= booking.checkin_by %>
+            </small>
+          </p>
         </div>
-         <div class="col-md-6">
-          
+        <div class="card-footer">
+          <div class="row">
+            <div class="col-md-6">
+
+            </div>
+            <div class="col-md-6">
+
+            </div>
+          </div>
         </div>
-        </div>
-      </div>
     </div>
   <% end %>
 <% end %>
@@ -38,67 +38,95 @@
 $(function(){
 
   $(".booking_click").on("click", function(){
-      $(".summary-items tbody tr").remove();
-      $("#cancel").removeAttr("disabled");
-      $("#assign").removeAttr("disabled");
-     
-      var booking_id = $(this).find(".booking-id").text();
-      $("#crm_print").val(booking_id);
-      $("#crm_print").removeAttr("disabled");
+    $(this).css('background-color', '#CCC');
+    $(".summary-items tbody tr").remove();
+    $("#cancel").removeAttr("disabled");
+    $("#assign").removeAttr("disabled");
 
-      var url = $(this).attr('data-ref');
-      show_details(url); 
+    var booking_id = $(this).find(".booking-id").text();
+    $("#crm_print").val(booking_id);
+    $("#crm_print").removeAttr("disabled");
 
-  }); 
+    var url = $(this).attr('data-ref');
+    show_details(url); 
+
+  }); //End Booking Click
+
+  $('.nav-link').click(function () {
+    var href = $(this).attr('href');
+    if(href== "#customer" || href == "#queue"){
+      $("#cancel").attr("disabled","disabled");
+      $("#assign").attr("disabled","disabled");
+    }
+  });
+  //End nav-liik
 
   $('.crm_print').click(function() {
-      var booking_id = $('#crm_print').val();
+    var booking_id = $('#crm_print').val();
 
-        $.ajax({      
-            type: "GET",         
-            url: "crm/print/"+booking_id,
-            data: {},
-            dataType: "json",
-            success: function(data) {
-            
-            }  
-        });
+    $.ajax({      
+      type: "GET",         
+      url: "crm/print/"+booking_id,
+      data: {},
+      dataType: "json",
+      success: function(data) {
+
+      }  
+    });
   });
+  //End Print Click
 
   $('.assign').click(function(e){
-      var booking_id = $(this).val()
-      var type       = $(this).attr("data-type")
+    var booking_id = $(this).val()
+    var type       = $(this).attr("data-type")
 
-      update_booking(booking_id,type)
+    update_booking(booking_id,type)
   });
+  //End Assing Click
 
   $('.cancel').click(function(e){
-      var booking_id = $(this).val()
-      var type       = $(this).attr("data-type")
+    var booking_id = $(this).val()
+    var type       = $(this).attr("data-type")
 
-      update_booking(booking_id,type)
+    update_booking(booking_id,type)
   });
+  //End cancle Click
+
+
+  $(".customer_detail").on("click", function(){
+    $(this).css('background-color', '#CCC');
+    $(".summary-items tbody tr").remove();
+    $("#crm_print").removeAttr("disabled");
+    var id = $(this).attr('data-ref');
+    $('.customer_detail').removeClass('selected-item');
+    $(this).addClass('selected-item');
+    customer_details(id); 
+
+  });
+  //end customer click 
 
 
 }); 
  
 function show_details(url_item){  
+  //Start Ajax
   $.ajax({      
-          type: "GET",         
-          url: url_item, 
-          data: {},
-          dataType: "json",
-          success: function(data) {
-            item_data = data.order_items;
+    type: "GET",         
+    url: url_item, 
+    data: {},
+    dataType: "json",
+    success: function(data) {
+      item_data = data.order_items;
             //console.log(item_data.length);
-               
+
             $("#table").text(data.table_name) 
             $("#order_at").text(data.checkin_at) 
             $("#order_by").text(data.checkin_by) 
             $("#assign").val(data.id) 
             $("#cancel").val(data.id) 
+
             for(var field in item_data) {  
-              if (item_data[field].item_name){
+                if (item_data[field].item_name){
                   var price = parseFloat(item_data[field].price).toFixed(2);
 
                   row = "<tr>"
@@ -106,32 +134,80 @@ function show_details(url_item){
                   +'<td style="width:33%; text-align:center">' + item_data[field].qty + '</td>'
                   +'<td style="width:33%; text-align:right">' + price + '</td>'
                   +'</tr>'; 
-              } 
-              $(".summary-items tbody").append(row);
+                } 
+                $(".summary-items tbody").append(row);
             }
-
-
-              
-          }
+     }
   });
+  //end Ajax 
+  $('.booking_click').removeClass('selected-item');
+  $(this).addClass('selected-item');
+}
+
+function customer_details(id){  
+  //Start Ajax
+    $.ajax({      
+      type: "GET",         
+      url: "api/customers/get_order/"+id,
+      data: {},
+      dataType: "json",
+        success: function(data) {
+            item_data = data.order_items;
+
+            $("#for-booking").remove();
+            var div_data = "<strong>CUSTOMER DETAILS</strong>";
+            $("#order-title").replaceWith(div_data); 
+
+            $('.customer-detail').removeClass('hide') ;
+
+            $("#cus_name").text(data.name) 
+            $("#cus_email").text(data.email) 
+            $("#cus_contact_no").text(data.contact_no) 
+
+            if(item_data.length>0){
+                for(var field in item_data) {  
+                    if (item_data[field].item_name){
+                      var price = parseFloat(item_data[field].price).toFixed(2);
+
+                      row = "<tr>"
+                      +'<td style="width:33%; text-align:left">' + item_data[field].item_name +'</td>'
+                      +'<td style="width:33%; text-align:center">' + item_data[field].qty + '</td>'
+                      +'<td style="width:33%; text-align:right">' + price + '</td>'
+                      +'</tr>'; 
+                    } 
+                    $(".summary-items tbody").append(row);
+                }
+            }else{
+
+            }
+        }
+    });
+    //End Ajax 
 }
 
 function update_booking(booking_id,type) {
+  //Start Ajax
   $.ajax({      
-          type: "POST",         
-          url: "update_booking/" ,
-          data: {booking_id:booking_id,type:type},
-          dataType: "json",
-          success: function(data) {
-            if(data.status == true && data.type == "cancel")
-            { 
-              alert('Booking has canceled!');
-            }else{
-              alert('Booking has completed!');
-            }
-            location.reload();
-          }  
-  });
+      type: "POST",         
+      url: "update_booking/" ,
+      data: {booking_id:booking_id,type:type},
+      dataType: "json",
+      success: function(data) {
+          if(data.status == true && data.type == "cancel")
+          { 
+            alert('Booking has canceled!');
+          }else{
+            alert('Booking has completed!');
+          }
+          location.reload();
+      }  
+  });//End Ajax
 }
 
-</script>
+</script>
+
+<style type="text/css">
+  .selected-item {
+  background-color: #ccc;
+}
+</style>