update addorder

app/views/origami/addorders/show.html.erb

@@ -49,47 +49,6 @@
             </div>
         </div>
     </div>
-    
-    <!-- Large modal -->
-
-<div class="modal fade sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
-    <div class="modal-content">
-        <div class="modal-header" style="background-color: #54A5AF;">
-        <h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
-           <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">&times;</button>
-            
-        </div>
-        <div class="modal-body">
-            <div class="row">
-              <div class="col-md-5">
-                  <%= image_tag "logo.png" ,width: '', height: '', :style => '' %>
-                  <br><br>
-                  <div class="form-group">
-                    <h4 class="col-md-12">Quantity</h4>
-                    <input type="number" name="qty" class="form-control col-md-12 input-number change_qty" id="modal-qty" value="" min="1" max="100">
-                  </div>
-                  <div class="form-group row">
-                    <h4 class="col-md-6">Total</h4>
-                    <h4 class="col-md-6" id="total_price"> Ks</h4>
-                  </div>
-              </div>
-              <div class="col-md-7">
-                <h4>Options</h4>
-
-                <h4>Attributes</h4>
-
-              </div>
-            </div>
-        </div>
-        <div class="modal-footer">
-            
-            <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
-            <button type="button" class="btn btn-success" data-dismiss="modal" id="save_order">Add Order</button>
-        </div>
-    </div>
-  </div>
-</div>
 
     <!-- Modal -->
     <div class="modal fade" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true">
@@ -129,6 +88,47 @@
       </div>
     </div>
 
+    <!-- Large modal -->
+
+    <div class="modal fade sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: #54A5AF;">
+            <h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
+               <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">&times;</button>
+                
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                  <div class="col-md-5">
+                      <%= image_tag "logo.png" ,width: '', height: '', :style => '' %>
+                      <br><br>
+                      <div class="form-group">
+                        <h4 class="col-md-12">Quantity</h4>
+                        <input type="number" name="qty" class="form-control col-md-12 input-number change_qty" id="change_qty" value="" min="1" max="100">
+                      </div>
+                      <div class="form-group row">
+                        <h4 class="col-md-6">Total</h4>
+                        <h4 class="col-md-6" id="total_price"> </h4>
+                        <p class="hidden" id="unit_price"></p>
+                      </div>
+                  </div>
+                  <div class="col-md-7">                    
+                     <div class="option-list">
+                        <h4 id="attributes-type"></h4>
+                     </div>
+                  </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                
+                <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
+                <button type="button" class="btn btn-success" data-dismiss="modal" id="save_order">Add Order</button>
+            </div>
+        </div>
+      </div>
+    </div>
+
 <script type="text/javascript">
 
 $(function(){
@@ -143,7 +143,7 @@ $(function(){
 
     $(".change_qty").change(function(){
        qty = $(this).val();
-       price = $("#total_price").text();
+       price = $("#unit_price").text();
        $("#total_price").text(qty*price);
        
     }); 
@@ -160,43 +160,39 @@ $(function(){
         data: {},
         dataType: "json",
         success: function(data) {
-          console.log(data);
             var menu_items_list = $('.menu_items_list');
             menu_items_list.empty();
-            menu_items = data.menu_items;
-            console.log(data);
-            for(var field in menu_items) {  
-                
-                var code   = menu_items[field].instances[0].code
-                var name   = menu_items[field].instances[0].name
-                var price  = parseFloat(menu_items[field].instances[0].price).toFixed(2);
-                var is_available    = menu_items[field].instances[0].is_available 
-                var is_on_promotion = menu_items[field].instances[0].is_on_promotion
-                var item_attributes = menu_items[field].instances[0].item_attributes
-                var promotion_price = menu_items[field].instances[0].promotion_price
 
-                
+            menu_items = data.menu_items;
-                row = '<div class="card">'
+
+            for(var field in menu_items) {  
+              
+              instances = menu_items[field].instances ;
+
+              $(instances).each(function(i){
+                if (instances[i].is_default === true) {
+                   code            = instances[i].code;
+                   name            = instances[i].name;
+                   price           = parseFloat(instances[i].price).toFixed(2);
+                   is_available    = instances[i].is_available ;
+                   is_on_promotion = instances[i].is_on_promotion;
+                   item_attributes = instances[i].item_attributes;
+                   promotion_price = instances[i].promotion_price;
+                   code            = instances[i].code;
+                }
+              }); 
+           
+              row = '<div class="card">'
                         +'<div class="card-head" style="line-height:14px;">'
                           +'<small class="col-md-9">'+ menu_items[field].name +'</small>'
-                          +'<div class="col-md-3 add_icon"'
+                          +"<div class='col-md-3 add_icon' data-item-code='"+ menu_items[field].item_code +"' data-name='"+ menu_items[field].name +"' data-price = '"+ price +"' data-instance-code = '"+ code +"' data-instance = '"+ name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"+ JSON.stringify(item_attributes) +"'>'"
-                             +'data-id="'+ menu_items[field].name +'"'
-                             +'data-item-code="'+ menu_items[field].item_code +'"'
-                             +'data-name="'+ menu_items[field].name +'"'
-                             +'data-price="'+ price +'"'
-                             +'data-available="'+ is_available +'"'
-                             +'data-promotion="'+ is_on_promotion +'"'
-                             +'data-attributes="'+ item_attributes +'"'
-                             +'data-instance-code="'+ code +'"'
-                             +'data-instance="'+ name +'"'
-                             +'data-promotion-price="'+ promotion_price +'"'
-                            +'>'
                           +'<i class="fa fa-plus "'
                           + 'style="margin-top:4px;">'
                           +'</i></div>'
                         +'</div>'
 
-                        +'<div class="menu_item_box" data-toggle="modal" data-target=".sx_item_detailModal">'
+                        +"<div class='menu_item_box' data-id = '"+JSON.stringify(menu_items[field].attributes)+"' data-item = '"+JSON.stringify(item_attributes)+"' data-toggle='modal' data-target='.sx_item_detailModal'>'"
+
                           +'<div class="card-block">'
                             +'<%= image_tag "logo.png" ,width: '75', height: '75', :style => '' %>'
                           +'</div>'
@@ -212,7 +208,39 @@ $(function(){
       });
       //end Ajax 
     }
-    //end show detail function
+    //end show list function
+
+    //click item row for add order
+     $(document).on('click', '.menu_item_box', function(event){ 
+        data =  $(this).parent().children().children('.add_icon');
+        attributes    = $(this).data('id');
+        selected_item = $(this).data('item');
+         
+        for(var field in attributes) { 
+            value = attributes[field]["value"];
+
+            row = "<h4>"+attributes[field]["type"]+"</h4>"
+
+            $(value).each(function(i){
+                $(selected_item).each(function(item){
+                  if (value[i] == selected_item[item]) {
+                    $('.custom-btn').addClass('selected-option');
+                  }else{
+                    $('.custom-btn').removeClass('selected-option');
+                  }
+                }); 
+                console.log(jQuery.inArray(value[i], selected_item));
+                
+                row +='<button id="selected-option" data-type="'+attributes[field]["type"]+'" class="btn btn-default custom-btn">'+value[i]+'</button>';
+            }); 
+           
+          $(".option-list").append(row);
+        }
+        $('#change_qty').val(1);
+        $('#title_name').text(data.attr('data-name'));
+        $('#total_price').text(data.attr('data-price'));
+        $('#unit_price').text(data.attr('data-price'));
+    });
 
     // click plus icon for add 
     $(document).on('click', '.add_icon', function(event){ 
@@ -225,9 +253,9 @@ $(function(){
       qty           = 1;
       append        = 0;
       price         = parseFloat(data.attr('data-price')).toFixed(2);
-      instance_code = data.attr('data-instance');
+      instance_name = data.attr('data-instance');
 
-      if (instance_code == "undefined"){
+      if (instance_name == "undefined"){
         instance = '';
       }else{
         instance = "("+data.attr('data-instance')+")";
@@ -249,9 +277,9 @@ $(function(){
       }); 
 
       if (append===0) {
-        row ="<tr class='item_box' data-price ='"+price+ "'data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"+instance+ "'data-code='"+data.attr('data-item-code')+"'>"
+        row ="<tr class='item_box' data-price ='"+price+ "'data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"+instance+ "' data-code='"+data.attr('data-item-code')+"' data-instance-code='"+data.attr('data-instance-code')+"' data-attributes='"+data.attr('data-attributes')+"'>"
                 +'<td class="item-cell-no">'+rowCount+'</td>'
-                +'<td class="item-cell-name" id="item_name" >' + data.attr('data-name')+ ' ' + instance + '</td>'
+                +'<td class="item-cell-name" id="item_name" >' + data.attr('data-name')+ ' ' + instance + data.attr('data-attributes')+'</td>'
                 +'<td class="item-cell-qty" id="item_qty">' + qty + '</td>'
                 +'<td class="item-cell-price" id="item_price">' 
                   + parseFloat(price).toFixed(2)
@@ -271,14 +299,6 @@ $(function(){
       $('#modal-qty').val(qty);
     });
 
-    //click item row for update qty
-     $(document).on('click', '.menu_item_box', function(event){ 
-
-      data =  $(this).parent().children().children('.add_icon');
-      $('#title_name').text(data.attr('data-name'));
-      $('#total_price').text(data.attr('data-price'));
-    });
-
     //click remove buttom in modal box
     $('#sx_itemModal').on('click','#remove', function(){
         $('.summary-items tr').filter(function(){
@@ -412,6 +432,17 @@ $(function(){
     padding-top: 100px;
 
 }
+.selected-option {
+  color: #fff !important;
+  background-color: green !important;
+}
+.custom-btn {
+  white-space: normal !important;
+  height: 60px;
+  width: 90px;
+  margin-bottom: 5px;
+  margin-right: 5px;
+}
 </style>