feat: toast

gestaoRaul/comandas/templates/viewcomanda.html

@@ -155,13 +155,16 @@ Detalhes {{comanda.name}}
   </div>
 
   
-    <!-- <dialog id="Modal-add-product" style="display: none;" >
+
-      <article> -->
+      
       
       <div id="addProduct" popover class="popover">
+        <div id="toast" class="toast">
+          <p id="toast-message"></p>
+        </div>
         <form id="productForm" >
-          <div style="display: flex;justify-content: space-around;">
+          <div style="display: flex;justify-content: space-between;">
-            <h2>Adicionar Produto</h2> <button class="btn-cancel" type="button" onclick="closeModal()">Fechar</button>
+            <h2>Adicionar Produto</h2> <img class="close" src="{% static 'midia/icons/close-circle.svg' %}"  onclick="closeModal()">
           </div>
           
           <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br>
@@ -178,8 +181,6 @@ Detalhes {{comanda.name}}
           </div>
           
 
-      <!-- </article>
-    </dialog> -->
           
           <dialog id="modal-obs" style="display: none;">
             <article>
@@ -315,4 +316,5 @@ Detalhes {{comanda.name}}
 </body>
 
 
+
 {% endblock %}

gestaoRaul/templates/base.html

@@ -97,6 +97,10 @@
     {% endblock  %}
     <script src="{% static 'htmx_base.js' %}"></script>
     <script src="{% static 'base.js' %}"></script>
+    
+    <div id="toast" class="toast">
+        <p id="toast-message"></p>
+      </div>
 </body>
 
 
@@ -125,4 +129,5 @@
 
 
 </footer>
+
 </html>

gestaoRaul/templates/static/base.css

@@ -7,7 +7,6 @@
   @keyframes jump {
     0% {
       transform: scale(0.0);
-      /* transform: translate(#000000); */
     }
     70% {
       transform: scale(1);
@@ -295,8 +294,31 @@ input, textarea, select {
   transform: translateY(-10px);
 }
 
+.toast {
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #599100;
+  color: #000000;
+  font-weight: bold;
+  padding: 15px;
+  border-radius: 10px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+  z-index: 200 !important;
+}
+
+.toast p {
+  color: #000000;
+}
+
+.toast.show {
+  opacity: 1;
+  visibility: visible;
+}
 
-  /* .dropdown:hover .dropbtn {background-color: #3e8e41;} */
 
 @media screen and (max-width: 730px) {
     .dropdown-content {

gestaoRaul/templates/static/base.js

@@ -14,9 +14,31 @@ var elem = document.getElementById("all");
 function openFullscreen() {
     if (elem.requestFullscreen) {
       elem.requestFullscreen();
-    } else if (elem.webkitRequestFullscreen) { /* Safari */
+    } else if (elem.webkitRequestFullscreen) { 
       elem.webkitRequestFullscreen();
-    } else if (elem.msRequestFullscreen) { /* IE11 */
+    } else if (elem.msRequestFullscreen) { 
       elem.msRequestFullscreen();
     }
   }
+
+  function showToast(message, type ,duration = 3000) {
+    const toast = document.getElementById('toast');
+  
+    if (type === 'success') {
+      toast.style.backgroundColor = '#28a745';
+    } else if (type === 'error') {
+      toast.style.backgroundColor = '#dc3545';
+    } else if (type === 'info') {
+      toast.style.backgroundColor = '#ffc107';
+    }
+  
+  
+    const toastMessage = document.getElementById('toast-message');
+  
+    toastMessage.textContent = message;
+    toast.classList.add('show');
+  
+    setTimeout(() => {
+      toast.classList.remove('show');
+    }, duration);
+  }

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

@@ -6,14 +6,16 @@
     margin: 0 auto; 
   }
 
-  .grid-list-products {
+  body {
+    z-index: 0;
+  }
 
+  .grid-list-products {
     justify-items: center;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     max-width: 800px;
-    /* margin: 0 auto;  */
   }
   
   .card-product {
@@ -27,12 +29,12 @@
     background: var(--main-gradient);
     box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
     border-radius: 5px;
-  
+    transition: transform 0.4s, box-shadow 0.4s;
     }
   
   .card-product:hover {
     transform: scale(1.05);
-    transition: transform 0.4s;
+    transition: transform 0.4s, box-shadow 0.4s;
     box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
   }
   
@@ -40,15 +42,25 @@
     text-align: center;
   }
   
+  .close {
+    height: 45px;
+    transition: transform 0.4s;
+  }
+  .close:hover {
+    transform: scale(1.2);
+    transition: transform 0.4s;
+    filter: drop-shadow(0px 0px 8px rgba(255, 1, 1, 0.452));
+  }
 
   .popover{
+    position: relative;
     width: 98%;
-    height: 98%;
+    height: 96%;
     max-width: 800px;
     top: 20px;
     left: 25%;
     padding: 20px;
-    /* background-color: #f2f2f29d; */
+    background-color: #1f1f1fb6;
     border-radius: 15px;
     border: none;
     box-shadow: 0px 0px 8px rgba(143, 143, 143, 0.2);
@@ -56,20 +68,19 @@
     line-height: 50px; 
     font-size: 18px;
     font-weight: bold;
+    z-index: 1;
     /* color: #333; */
-    transition: transform 0.2s;
+    transition: transform 0.4s;
     animation: jump 0.5s;
   }
 
+
   .popover::backdrop {
-    background-color: rgba(0, 0, 0, 0.315);
+    background-color: rgba(39, 39, 39, 0.315);
     backdrop-filter: blur(5px);
-    /* animation: jump 0.2s; */
   }
 
 
-
-
   @media screen and (max-width: 730px) {
 
     .popover{
@@ -78,7 +89,6 @@
       max-width: 800px;
       top: 20px;
       left: 10px;
-
       }
 
       .card-product {
@@ -89,6 +99,5 @@
         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

@@ -91,7 +91,6 @@ function imprimirFichas() {
 
     if (element) {
       var content = element.innerHTML;
-    //   console.log(content);
       content = content.replace( /<img[^>]*>/gi,'');
       content = content.replace(/<tfoot[^>]*>(?:(?!<\/tfoot>)[\s\S])*<\/tfoot>/gi,'');
 
@@ -128,7 +127,6 @@ function imprimirConta() {
 
     if (element) {
       var content = element.innerHTML;
-    //   console.log(content);
       content = content.replace(/<img[^>]*>/gi,'');
       content = content.replace(/<th[^>]*>(?:(?!<\/th>)[\s\S])*<\/th>/gi,'');
       // content = content.replace('icons','');
@@ -180,20 +178,6 @@ function troco(){
 }
 
 
-// document.onkeydown = teclado
-
-// function teclado(event){
-//   if (document.getElementById('payment-comanda').style.display == 'block'){
-//     if (event.keyCode == 13){
-//       troco()
-//     }else{
-//       console.log(event.keyCode)
-//     }
-//   }else{
-//     console.log('')
-//   }
-
-// }
 function addOrder(){
   obs = document.getElementById('obs').value
   var id = document.getElementById('id-temp').value
@@ -206,9 +190,9 @@ function addOrder(){
     .then(function(response) {
       if(response.status == 200){
         closeModalObs()
-        alert('Pedido atualizado com sucesso!')
+        showToast('✅Pedido atualizado com sucesso!😁','success')
       }else{
-        alert('Erro ao atualizar pedido!')
+        showToast('❌Ocorreu um erro!😢','error')
       }
       
   })
@@ -232,23 +216,13 @@ function addProductComanda(productId,comandaId, cuisine) {
   .then(function(response) {
     return response.text();
   }).then(function(text) {
-    console.log(text);
     var listProductsBalcaoElement = document.getElementById("list-products-comanda");
     listProductsBalcaoElement.innerHTML = text;
   })
       
-  // const receber = document.getElementById('pagarComanda')
+  showToast('Produto adicionado com sucesso!😁','success');
-  // const imprimir = document.getElementById('imprimirFichas')
-  // var search = document.getElementById('search-product')
-
-  // setTimeout(function() {
-  //   updateTotal();}, 100);
-    
-  alert('Produto adicionado com sucesso!');
   }
 
-
-
 }
 
 function taxa(){

gestaoRaul/templates/static/midia/icons/close-circle.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+