bug: toast

gestaoRaul/comandas/templates/viewcomanda.html

@@ -159,8 +159,8 @@ Detalhes {{comanda.name}}
       
       
       <div id="addProduct" popover class="popover">
-        <div id="toast" class="toast">
+        <div id="toast-add" class="toast-add">
-          <p id="toast-message"></p>
+          <p id="toast-message-add"></p>
         </div>
         <form id="productForm" >
           <div style="display: flex;justify-content: space-between;">

gestaoRaul/templates/static/base.css

@@ -307,7 +307,7 @@ input, textarea, select {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
-  z-index: 200 !important;
+  z-index: 999 ;
 }
 
 .toast p {

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

@@ -80,7 +80,30 @@
     backdrop-filter: blur(5px);
   }
 
+  .toast-add {
+    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-add p {
+    color: #000000;
+  }
+  
+  .toast-add.show {
+    opacity: 1;
+    visibility: visible;
+  }
   @media screen and (max-width: 730px) {
 
     .popover{

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

@@ -197,7 +197,27 @@ function addOrder(){
       
   })
 }
+function showToastAdd(message, type ,duration = 3000) {
+  const toast = document.getElementById('toast-add');
 
+  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-add');
+
+  toastMessage.textContent = message;
+  toast.classList.add('show');
+
+  setTimeout(() => {
+    toast.classList.remove('show');
+  }, duration);
+}
 function addProductComanda(productId,comandaId, cuisine) {
   obs = document.getElementById('obs');
   console.log(obs.value);
@@ -220,7 +240,7 @@ function addProductComanda(productId,comandaId, cuisine) {
     listProductsBalcaoElement.innerHTML = text;
   })
       
-  showToast('Produto adicionado com sucesso!😁','success');
+  showToastAdd('Produto adicionado com sucesso!😁','success');
   }
 
 }