trocado addProduct de htmx por ajax

gestaoRaul/balcao/htmx_views.py

@@ -30,7 +30,7 @@ def addProductBalcao(request, product_id, comanda_id, qtd):
         total += produto.product.price
     return render(request, "htmx_components/htmx_list_products_in_balcao.html",{'consumo': consumo, 'total': total})
 
-
+@csrf_exempt
 def addProductBalcaoTeclado(request, product_id, comanda_id, qtd):
     qtd = int(request.COOKIES.get('qtd'))
     for i in range(qtd):

gestaoRaul/balcao/templates/viewBalcao.html

@@ -80,7 +80,14 @@
               placeholder="Buscar Produto" 
               
               >
-            <input type="number" id="qtd-product" name="qtd-product" value="1" required min="1"><br>
+            <input 
+            type="number" 
+            id="qtd-product" 
+            name="qtd-product" 
+            value="1" 
+            required min="1"
+            
+            ><br>
           </div>
             <div id="product-list" class="grid-list-products">
                 {% for product in products %} 
@@ -90,7 +97,7 @@
                 <article 
                 name="productBox"
                 id="productId-{{ product.id }}" 
-              
+                onclick="addProductClick({{product.id}} , {{comanda.id}})"
                 style="background-color: #293552;" 
                 
                 >
@@ -105,6 +112,7 @@
                 <article 
                 name="productBox"
                 id="productId-{{ product.id }}" 
+                onclick="addProductClick({{product.id}} , {{comanda.id}})"
                 style="background-color: #293552;" 
                 
                 >

gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html

@@ -8,7 +8,7 @@
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 style="background-color: #293552;" 
-                
+                onclick="addProductClick({{product.id}} , {{comanda_id}})"
                 >
                 <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
                 <p hidden id="comanda{{forloop.counter0}}" >{{comanda_id}}</p>
@@ -22,7 +22,7 @@
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 style="background-color: #293552;" 
-                
+                onclick="addProductClick({{product.id}} , {{comanda_id}})"
                 >
                 {{product.name}} <br>
                 R$ {{product.price}}

gestaoRaul/templates/static/comandas/js/viewbalcao.js

@@ -104,7 +104,7 @@ document.onkeydown = teclado
 function teclado(event){
   if (event.keyCode == 13){
     addProductBalcao()
-    reloadPage()
+    // reloadPage()
   }else{
     console.log(event.keyCode)
   }
@@ -128,8 +128,15 @@ function addProductBalcao() {
     },
 
   })
+  .then(function(response) {
+    return response.text();
+  }).then(function(text) {
+    var listProductsBalcaoElement = document.getElementById("list-products-balcao");
+    listProductsBalcaoElement.innerHTML = text;
+  })
 
-  reloadPage()
+
+  // reloadPage()
 }
 
 
@@ -168,16 +175,21 @@ function searchProduct() {
 }
 
 function addProductClick(productId, comandaId) {
-  var xhr = new XMLHttpRequest();
+ console.log(productId, comandaId)
-  xhr.open("GET", "{% url 'addProductBalcaoTeclado' product.id comanda.id 1 %}", true);
+  var qtd = document.getElementById('qtd-product').value
-  xhr.onreadystatechange = function() {
+  fetch(`/balcao/addProductBalcaoTeclado${productId}/${comandaId}/${qtd}`, {
-    if (xhr.readyState === 4 && xhr.status === 200) {
+    method: 'GET',
-      var response = JSON.parse(xhr.responseText);
+     headers: {
-      var listProductsBalcaoElement = document.getElementById("list-products-balcao");
+      'Content-Type': 'application/json'}
-      listProductsBalcaoElement.innerHTML = response.html;
+  })
-    }
+  
-  };
+  .then(function(response) {
-  xhr.send();
+    return response.text();
+  }).then(function(text) {
+    var listProductsBalcaoElement = document.getElementById("list-products-balcao");
+    listProductsBalcaoElement.innerHTML = text;
+  })
+
 }