Append Order Detail view finished

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

@@ -1,26 +1,111 @@
 <!--- Booking Items -->
-        <div class="card-columns" style="padding-top:10px">
-        
-        <% @i = 0 %>
-          <% @booking.each do |booking| %>
-            <div class="card">
-              <div class="card-block">
-                <h4 class="card-title">
-                   <%= @i += 1 %> . <%= booking.dining_facility.name %>
-                   - <%= booking.item_name %>
-                </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">
-                <button id="#id" class="btn btn-primary btn-lg btn-block">COMPLETE</button>
-              </div>
-            </div>
-          <% end %>
-          <!--- end of Items-->
-        </div>
+<div class="card-columns" style="padding-top:10px">
+
+  <% @i = 0 %>
+  <% @booking.each do |booking| %>
+  <div class="card booking_click" data-ref="<%= api_booking_path booking.id%>" id="booking_block">
+    <div class="card-block" id="card-block"  style="width:100%;">
+      <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">
+        <button id="#id" class="btn btn-primary btn-sm btn-block">ASSIGN</button>
+      </div>
+       <div class="col-md-6">
+        <button id="cancel" data-ref="<%= booking.id%>" class="btn btn-danger cancel btn-sm btn-block">CANCLE</button>
+      </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+<!--- end of Items-->
+</div>
+<script type="text/javascript">
+$(function(){
+
+    $(".booking_click").on("click", function(){
+      $(".summary-items tbody tr").remove();
+      var url = $(this).attr('data-ref');
+      show_details(url); 
+    }); 
+
+    $('.cancel').click(function(e){
+      var booking = $('#cancel').attr('data-booking-id');
+
+      $.ajax({      
+          type: "GET",         
+          url: "api/update_booking", 
+          data: {},
+          dataType: "json",
+          success: function(data) {
+          
+          
+          }
+
+
+          
+      });
+      /*$.getJSON(update_booking_url,{booking: booking, type: "cancel"}, function(data) { 
+        if(data.status == 'ok'){          
+          
+            
+            showMessage('Order set has delivered!');
+        }
+        else{
+          if(data.status == false){
+            clear_storage();
+            window.location.href = data.url;  
+          }
+          showMessage('Order record not found');        
+        }
+      });*/
+    });
+
+ }); 
+ 
+function show_details(url_item){  
+  
+   $.ajax({      
+          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) 
+      
+          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);
+          }
+
+
+              
+          }
+      });
+    
+  }
+
+</script>