Change table view in OQS

app/assets/javascripts/OQS.js

@@ -33,9 +33,25 @@ $(document).on('turbolinks:load', function() {
 
     $(".tables").on("click", function(){
 
-       var table_id = $(this).val();
-       $('#table_id').val(table_id);
-       oqs_id = $("#oqs_id").val();
+ 		active     = $(this).hasClass('selected-table');
+ 		if (active) {      
+	        $(this).removeClass('bg-blue');
+	        $(this).addClass('green');
+	        $(this).removeClass('selected-table');
+	    }else{      
+	        $(this).removeClass('green');
+	        $(this).addClass('bg-blue');
+	        $(this).addClass('selected-table');
+	    }
+ 		var list = document.getElementsByClassName('selected-table');
+		var i;
+		var table_id =[];
+		for (i = 0; i < list.length; i++) {
+		    table_id.push(list[i].value);
+		} 
+       	$('#table_id').val(table_id);
+
+        oqs_id = $("#oqs_id").val();
     	if (table_id){
     		var table = table_id
     	}else{

app/assets/javascripts/custom.js

@@ -13,6 +13,16 @@ $(document).ready(function() {
     touchScrollStep : 50
   });
 
+  $('#table-slimscroll').slimScroll({
+      height: height,
+      size: '5px',
+      color: 'rgba(0,0,0,0.5)',
+      alwaysVisible: false,
+      borderRadius: '0',
+      railBorderRadius: '0',
+      touchScrollStep : 50
+  });
+
   $('#order-detail-slimscroll').slimScroll({
     height: height-$('#order-detail-slimscroll').attr('data-height'),
     size: '5px',

app/controllers/oqs/backhome_controller.rb

@@ -89,6 +89,7 @@ class Oqs::HomeController < BaseOqsController
 
   # Query for OQS with delivery status
   def queue_items_query(status) 
+    byebug
     AssignedOrderItem.select("assigned_order_items.assigned_order_item_id, oqs.id as station_id, oqs.station_name, oqs.is_active, oqpz.zone_id, df.name as zone, df.type as type, odt.order_id, odt.item_code, odt.item_name, odt.price, odt.qty, odt.item_order_by, odt.options, cus.name as customer_name, odt.created_at")
     .joins(" left join order_queue_stations as oqs on oqs.id = assigned_order_items.order_queue_station_id
               left join order_queue_process_by_zones as oqpz on oqpz.order_queue_station_id = oqs.id

app/controllers/oqs/home_controller.rb

@@ -161,9 +161,9 @@ class Oqs::HomeController < BaseOqsController
       oqs = "and assigned_order_items.order_queue_station_id = '#{oqs_id}' "
     end
 
-    if table_id.to_i>0
-       table = "and df.id = '#{table_id}' "
-       
+    if !table_id.empty?
+       tableId = table_id.to_a.map{|h| h}.join(",")
+       table = "and df.id IN (#{tableId})"
     else
      table = ''
     end

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

@@ -1,9 +1,10 @@
 <!-- Column One -->
 <div class="row clearfix" style="">
-  <div class="col-lg-11 col-md-11 col-sm-11">  
+  <div class="col-lg-8 col-md-8 col-sm-8">  
     <div class="body p-l-10">
       <div class="row clearfix">
-        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
+        <div class="form-group col-md-2">
+          <label>Select Station</label>
           <span class="hidden" id="oqs_active"></span>
           <select class="form-control select oqs_click" name="oqs_id" id="oqs_id">
             <option value="0"  data-id="0">Processed</option>
@@ -15,16 +16,6 @@
             <% end %> 
           </select>
         </div>
-        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
-        <span class="hidden" id="table_id"></span>
-          <select class="form-control select tables" name="table_id" id="tables">
-            <option value="">Select Table</option>
-            <% @tables.each do |table|  %>
-              <option value="<%= table.id %>" data-id="<%= table.id %>"> <%= table.name %></option>
-              
-            <% end %> 
-          </select>
-        </div>
 <!-- 
         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
         <span class="hidden" id="room_id"></span>
@@ -151,6 +142,35 @@
   </div>
  -->
   <!-- Column Three -->
+  <div class="col-lg-3 col-md-3 col-sm-3">
+  <p class="hidden filter"><%= @filter %></p>
+    <div class="card">
+      <div class="card-block">
+        <div class="tab-content" id="table-slimscroll" style="">
+          <ul class="nav nav-tabs">
+            <li class="active"><a data-toggle="tab" href="#table" id="defaultOpen">Table</a></li>
+            <li><a data-toggle="tab" href="#room">Room</a></li>
+          </ul>
+          <div class="tab-content">
+            <div id="table" class="tab-pane fade">
+              <% @tables.each do |table|  %>
+                <div class="col-lg-4 col-md-4 col-sm-4" style="float: left;">
+                  <button class='btn btn-lg waves-effect green tables' style="width: 100%; text-align: center;" value="<%= table.id %>" data-id="<%= table.id %>"> <%= table.name %></button>
+                </div>
+              <% end %> 
+            </div>
+            <div id="room" class="tab-pane fade">
+              <% @rooms.each do |room|  %>
+                <div class="col-lg-4 col-md-4 col-sm-4" style="float: left;">
+                  <button class='btn btn-lg waves-effect green tables' style="width: 100%;" value="<%= room.id %>" data-id="<%= room.id %>"> <%= room.name %></button>
+                </div>
+              <% end %> 
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>      
+  </div>
   <div class="col-lg-1 col-md-1 col-sm-1">
     <!-- OQS Buttons -->
     <br>
@@ -168,4 +188,6 @@
         window.location.href = '/dashboard';
     });
   });
+  document.getElementById("defaultOpen").click();
+
 </script>