bug: page orders resolvido

gestaoRaul/templates/static/orders/css/orders.css

@@ -1,24 +1,22 @@
-/* .grid-container {
-    display: grid;
-    grid-template-columns: repeat(3, 2fr);
-    gap: 20px;
-    max-width: 800px;
-    margin: 0 auto; 
-  }
 
-.card {
-    width: 120px;
-    height: 120px;
-    background-color: #f2f2f2;
-    border-radius: 15px;
-    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    line-height: 120px; 
-    font-size: 20px;
-    font-weight: bold;
-    color: #333;
-    transition: transform 0.2s;
-  }*/
+  @keyframes girar {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading {
+
+  align-items: center;
+  align-content: center;
+  align-self: center;
+  margin: 0 auto;
+  animation: girar 4s infinite linear;
+}
+
 .m-card {
     /* width: 50px; */
     height: 100%;
@@ -40,7 +38,6 @@
   }
 
 
-
 .tab {
   display: flex;
   justify-content: space-between;
@@ -49,7 +46,6 @@
   border-bottom: 2px solid #cccccc93;
 }
 
-/* Estilo para cada aba */
 .tab button {
   width: 24%;
   background-color: #4446d636;
@@ -60,15 +56,12 @@
   border-radius: 20px 20px 0px 0px;
 }
 
-/* Estilo para a aba ativa */
 .tab button.active {
   background-color: #4446d6;
 }
 
-/* Estilo para o conteúdo das abas */
 .tabcontent {
-  /* display: none; */
+  display: none;
   padding: 6px 12px;
-  /* border: 1px solid #ccc; */
-  /* border-top: none; */
+
 }

gestaoRaul/templates/static/orders/js/orders.js

@@ -15,6 +15,12 @@ function openTab(evt, etapa) {
     // console.log(evt.currentTarget.className += " active");
   }
 
+  function displayBlock(etapa) {
+
+    document.getElementById('loading').style.display = "none";
+    document.getElementById(etapa).style.display = "block";
+  }
+
 
   tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
@@ -23,7 +29,17 @@ function openTab(evt, etapa) {
   tabcontent[0].style.display = "block";
 
 
-  function delayTab(evt,tab){
-    setTimeout(function() {
-      openTab(evt, tab);}, 200);
-  }
+  function delayTab(tab){
+    document.getElementById('Fila').style.display = "none";
+    document.getElementById('Preparo').style.display = "none";
+    document.getElementById('Finalizado').style.display = "none";
+    document.getElementById('Entregue').style.display = "none";
+    document.getElementById('loading').style.display = "block";
+  
+    
+        setTimeout(function() {
+      displayBlock(tab);}, 1000);
+  }
+
+
+  displayBlock('Fila');