update oqs action cable for order cahnnel and oqs channel

app/assets/javascripts/OQS.js

@@ -19,12 +19,7 @@
 
 $(document).ready(function(){
 	
-	// auto refresh every 10 seconds
-	// setTimeout(function(){
-	//    window.location.reload(1);
-	// }, 10000);
-	// $oqs_count = document.getElementById("oqsBox").style.order =1;
-	// $("#oqsBox").css("order", 1);
+
 
 	$(".nav-completed").on("click", function(){
        $("#completed").removeClass('hide')
@@ -33,14 +28,18 @@ $(document).ready(function(){
 
     $(".oqs_click").on("click", function(){
        $(".oqs_click").removeClass('oqs_active');
+       $(".queue_station").removeClass('queue_station_box');
        $("#completed").addClass('hide');
        $(".oqs_append").removeClass('hide');
        $(this).addClass('oqs_active');
+       $(".queue_station").addClass('queue_station_box');
        var oqs_id = $(this).find(".oqs-id").text();
        var url    = 'oqs/get_items/'+oqs_id;
       
        show_details(url); 
 
+       
+
     }); //End Click
  
 	function show_details(url){  
@@ -66,7 +65,7 @@ $(document).ready(function(){
 	          var date = new Date(data[field]["created_at"]); 
           var show_date = date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() + ' ' +  date.getHours()+ ':' +  date.getMinutes();
 	           
-	          row ='<div class="card queue_station">'
+	          row ='<div class="card queue_station" data-order="'+date+'">'
 	                  +'<div class="card-block">'
 	                      +'<h4 class="card-title">'
 	                        +'<span class="order-zone-type">'+data[field]["table_type"]+'- </span>'

app/assets/javascripts/channels/order_queue_station.js

@@ -11,7 +11,7 @@ App.order_queue_station = App.cable.subscriptions.create('OrderQueueStationChann
   	items = data.order;
   	for(var field in items) {
   		var price = parseFloat(items[field].price).toFixed(2);
-  		if (items[field]["options"] == "[]" || data[field]["options"] == "") {
+  		if (items[field]["options"] == "[]" || items[field]["options"] == "") {
   			var options = "";
   		}else{
   			var options = items.options;
@@ -34,7 +34,8 @@ App.order_queue_station = App.cable.subscriptions.create('OrderQueueStationChann
 
   		if (oqs_id == items[field]["order_queue_station_id"]) {
 
-  			row ='<div class="card queue_station" id="oqsBox" style="order: initial;">'
+  			row ='<div class="card queue_station queue_station_box" data-date="'+date+'">'
+          +'<strong class="hidden">'+items[field]["order_id"]+'</strong>'
 		  		+'<div class="card-block">'
 		  		+'<h4 class="card-title">'
 		  		+'<span class="order-zone-type">'+items[field]["table_type"]+'- </span>'
@@ -65,11 +66,18 @@ App.order_queue_station = App.cable.subscriptions.create('OrderQueueStationChann
 		  		+'<button id="edit_'+ items[field]["assigned_order_item_id"]+'" class="btn btn-warning order-item order-item-edit">EDIT</button>'
 		  		+' <button id="assigned_queue_' + items[field]["assigned_order_item_id"] +'" class="btn btn-primary order-item order-complete">COMPLETE</button>'
 		  		+'</div>'
-			+'</div>'; 
-  		$('.oqs_append').append(row);
+			    +'</div>'; 
+  		  $('.oqs_append').append(row);
   		}
-  	}
-     // $("[data-behaviour='message']").html(data.order);
+  	}//end looping
+
+    var $divs = $("div.queue_station");
+    var SortListDivs = $divs.sort(function (a, b) {
+      first = $(a).attr('data-date');
+      next  = $(b).attr('data-date');
+      return new Date(first).getTime() < new Date(next).getTime();
+    });
+    $("#oqs_container").html(SortListDivs);
  },
 
 });

app/views/oqs/home/index.html.erb

@@ -110,7 +110,7 @@
 
       <!-- End Panel 0 - Completed -->
         <!--- Order Items -->
-        <div class="card-columns oqs_append" style="padding-top:10px; column-gap: 1.2rem;">       
+        <div class="card-columns oqs_append" id="oqs_container" style="padding-top:10px; column-gap: 1.2rem;">       
         </div>
          <!--- end of Items-->
     </div>