alterar modal dialog para popover em addProduct

gestaoRaul/comandas/htmx_views.py

@@ -38,6 +38,9 @@ def listProduct(request, comanda_id):
 
 @group_required(groupName='Garçom')
 def addProduct(request, product_id, comanda_id):
+    config = {
+        'taxa': False
+        }
     obs = request.GET.get("obs")
     product_comanda = ProductComanda(comanda_id=comanda_id, product_id=product_id)
     product_comanda.save()
@@ -50,7 +53,7 @@ def addProduct(request, product_id, comanda_id):
     consumo = ProductComanda.objects.filter(comanda=comanda_id)
     valores = somar(consumo,comanda)
     
-    return render(request, "htmx_components/comandas/htmx_list_products_in_comanda.html",{'valores':valores,'parcials':parcial,'consumo': consumo,'comanda':comanda})
+    return render(request, "htmx_components/comandas/htmx_list_products_in_comanda.html",{'config':config, 'valores':valores,'parcials':parcial,'consumo': consumo,'comanda':comanda})
 
 @group_required(groupName='Garçom')
 def editOrders(request, productComanda_id, obs):
@@ -62,13 +65,16 @@ def editOrders(request, productComanda_id, obs):
 
 @group_required(groupName='Garçom')
 def removeProductComanda(request, productComanda_id):
+    config = {
+        'taxa': False
+        }
     product_comanda = ProductComanda.objects.get(id=productComanda_id)
     comanda = Comanda.objects.get(id= product_comanda.comanda.id)
     parcial = Payments.objects.filter(comanda=comanda)
     consumo = ProductComanda.objects.filter(comanda=comanda)
     product_comanda.delete()
     valores = somar(consumo,comanda)
-    return render(request, "htmx_components/comandas/htmx_list_products_in_comanda.html",{'valores': valores,'parcials':parcial,'consumo': consumo, 'comanda':comanda})
+    return render(request, "htmx_components/comandas/htmx_list_products_in_comanda.html",{'config':config, 'valores': valores,'parcials':parcial,'consumo': consumo, 'comanda':comanda})
 
 @group_required(groupName='Garçom')
 def closeComanda(request, comanda_id):

gestaoRaul/comandas/templates/viewcomanda.html

@@ -22,7 +22,7 @@ Detalhes {{comanda.name}}
   <input hidden id="id-temp" type="number">
   <div class="grid-container" >
     <div>
-      <button class="btn-primary" id="openModal" onclick="openModal()"
+      <button class="btn-primary" id="openModal" onclick="openModal()" popovertarget="addProduct"
       {%  if comanda.status != 'OPEN'%}
        disabled
        {% endif %}
@@ -155,8 +155,10 @@ Detalhes {{comanda.name}}
   </div>
 
 
-    <dialog id="Modal-add-product" style="display: none;" >
+    <!-- <dialog id="Modal-add-product" style="display: none;" >
-      <article>
+      <article> -->
+
+        <div id="addProduct" popover class="popover">
         <form id="productForm" >
           <div style="display: flex;justify-content: space-around;">
             <h2>Adicionar Produto</h2> <button class="btn-cancel" type="button" onclick="closeModal()">Fechar</button>
@@ -166,15 +168,18 @@ Detalhes {{comanda.name}}
               <div id="product-list" class="grid-list-products">
                 {% for product in products %}
 
-                <article class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
+                <div class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
                   {{product.name}} <br>
                   R$ {{product.price}}
-                </article >
+                </div >
                 {% endfor %}
               </div>
         </form>
-      </article>
+      </div>
-    </dialog>
+
+
+      <!-- </article>
+    </dialog> -->
 
     <dialog id="modal-obs" style="display: none;">
       <article>

gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html

@@ -2,7 +2,7 @@
 
 {% for product in products %}
 
-<article 
+<div 
         onclick="addProductComanda({{product.id}})" 
         class="card-product"
         hx-get="{% url 'addProduct' product.id comanda_id %} " 
@@ -10,7 +10,7 @@
         hx-target="#list-products-comanda">
         {{product.name}} <br>
         R$ {{product.price}}
-</article>
+</div>
 
 {% endfor %}
 

gestaoRaul/templates/htmx_components/comandas/htmx_list_products_in_comanda.html

@@ -42,6 +42,7 @@
   {% endif %}
 </tr>
   {% endfor %}
+  {% if config.taxa %}
   <tr>
     <td>
       Taxa de serviço 10%
@@ -50,6 +51,8 @@
       R$ {{valores.taxa}}
     </td>
   </tr>
+  {% endif %}
+  
   {% if parcials%}
   <td colspan="2" style="text-align: center;"><b>Pagamentos parciais</b></td>
   {% endif %}
@@ -64,8 +67,12 @@
 
 
 <tfoot>
-<tr>
+  <tr>
-  <td colspan="2" style="text-align: center;"><b>Total R$ {{valores.totalComTaxa}}</b></td>
+    {% if config.taxa %}
-</tr>
+    <td colspan="2" style="text-align: center;"><b>Total R$ {{valores.totalComTaxa}}</b></td>
+    {% else %}
+    <td colspan="2" style="text-align: center;"><b>Total R$ {{valores.totalSemTaxa}}</b></td>
+    {% endif %}
+  </tr>
 </tfoot>
 

gestaoRaul/templates/static/comandas/css/comandas.css

@@ -59,3 +59,5 @@ p {
     }
   
 }
+
+

gestaoRaul/templates/static/comandas/css/viewcomanda.css

@@ -17,17 +17,78 @@
   }
   
   .card-product {
+    height: 180px;
+    width: 200px;
+    padding: 10px;
+    align-items: center;
+    align-content: center;
+    text-align: center;
+    line-height: 1.5;
     background: var(--main-gradient);
     box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
+    border-radius: 5px;
   
     }
   
   .card-product:hover {
-      transform: scale(1.05);
+    transform: scale(1.05);
-      box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
+    transition: transform 0.4s;
-    }
+    box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
+  }
   
   table td th {
     text-align: center;
   }
   
+  
+  .popover{
+    width: 98%;
+    height: 98%;
+    max-width: 800px;
+    top: 20px;
+    left: 25%;
+    padding: 20px;
+    /* background-color: #f2f2f29d; */
+    border-radius: 15px;
+    border: none;
+    box-shadow: 0px 0px 8px rgba(143, 143, 143, 0.2);
+    text-align: justify;
+    line-height: 50px; 
+    font-size: 18px;
+    font-weight: bold;
+    /* color: #333; */
+    transition: transform 0.2s;
+    animation: jump 0.5s;
+  }
+  
+  .popover::backdrop {
+    background-color: rgba(0, 0, 0, 0.315);
+    backdrop-filter: blur(5px);
+    /* animation: jump 0.2s; */
+  }
+
+
+
+
+  @media screen and (max-width: 730px) {
+
+    .popover{
+      width: 98%;
+      height: 98%;
+      max-width: 800px;
+      top: 20px;
+      left: 10px;
+
+      }
+
+      .card-product {
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        text-align: center;
+        background: var(--main-gradient);
+        box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
+        font-size: 14px;
+      
+        }
+    }

gestaoRaul/templates/static/comandas/js/viewcomanda.js

@@ -1,11 +1,18 @@
 
 
 function openModal() {
-    document.getElementById('Modal-add-product').style.display = 'block';
+  textField = document.getElementById('search-product')
-    textField = document.getElementById('search-product')
+  textField.value = '';
-    textField.value = '';
+  textField.focus()
-    textField.focus()
 }
+
+
+function closeModal() {
+   var popover = document.getElementById('addProduct');
+   popover.hidePopover()
+}
+
+
 function openModalAlter() {
     document.getElementById('Modal-alter-comanda').style.display = 'block';
     var name = document.getElementById('name-comanda').innerText.replace('Nome: ','').replace(' | ', '')
@@ -62,9 +69,6 @@ function close_modal_payment_comanda() {
     document.getElementById('payment-comanda').style.display = 'none';
 }
 
-function closeModal() {
-    document.getElementById('Modal-add-product').style.display = 'none';
-}
 function closeModalObs() {
     document.getElementById('modal-obs').style.display = 'none';
 }