bug: page orders resolvido

This commit is contained in:
2025-01-22 19:08:34 -03:00
parent 04e78a0f79
commit 80aebd2030
7 changed files with 204 additions and 190 deletions

Binary file not shown.

View File

@@ -25,7 +25,6 @@
<h1>Pedidos cozinha</h1>
<div id="list-orders">
<div class="tab">
@@ -37,106 +36,106 @@
<div id="etapas">
<div id="Fila" class="tabcontent">
{% for order in orders %}
{% if order.preparing == None and order.productComanda != Null %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab(event, 'Fila')"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
>Preparar</button>
<div id="Fila" class="tabcontent">
{% for order in orders %}
{% if order.preparing == None and order.productComanda != Null %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Fila')"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
>Preparar</button>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
<div id="Preparo" class="tabcontent">
{% for order in orders %}
{% if order.finished == None and order.preparing != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab(event, 'Preparo')"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
>Finalizar</button>
<div id="Preparo" class="tabcontent">
{% for order in orders %}
{% if order.finished == None and order.preparing != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab( 'Preparo')"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
>Finalizar</button>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
<div id="Finalizado" class="tabcontent">
{% for order in orders %}
{% if order.delivered == None and order.finished != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab(event, 'Finalizado')"
hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
>Entregar</button>
<div id="Finalizado" class="tabcontent">
{% for order in orders %}
{% if order.delivered == None and order.finished != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab( 'Finalizado')"
hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
>Entregar</button>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
<div id="Entregue" class="tabcontent">
{% for order in orders %}
{% if order.delivered != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<!-- <button>Preparar</button> -->
<div id="Entregue" class="tabcontent">
{% for order in orders %}
{% if order.delivered != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<dialog id="loading" >
<div class="loading">
<img src="{% static 'midia/icons/loading.svg' %}" alt="">
</div>
<br><br>
<h1>Carregando...</h1>
</dialog>
<script src="{% static 'orders/js/orders.js' %}"></script> {% endblock %}
</body>

View File

@@ -10,93 +10,92 @@
<div id="Fila" class="tabcontent">
{% for order in orders %}
{% if order.preparing == None and order.productComanda != Null %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab(event, 'Fila')"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
>Preparar</button>
</div>
{% endif %}
{% if order.preparing == None and order.productComanda != Null %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Fila')"
hx-get="{% url 'preparing' order.id %} " hx-trigger="click" hx-target="#etapas"
>Preparar</button>
</div>
{% endif %}
{% endfor %}
</div>
<div id="Preparo" class="tabcontent">
{% for order in orders %}
{% if order.finished == None and order.preparing != None %}
{% if order.finished == None and order.preparing != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab(event, 'Preparo')"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
>Finalizar</button>
</div>
{% endif %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Preparo')"
hx-get="{% url 'finished' order.id %} " hx-trigger="click" hx-target="#etapas"
>Finalizar</button>
</div>
{% endif %}
{% endfor %}
</div>
<div id="Finalizado" class="tabcontent">
{% for order in orders %}
{% if order.delivered == None and order.finished != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab(event, 'Finalizado')"
hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
>Entregar</button>
</div>
{% endif %}
{% if order.delivered == None and order.finished != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button onclick="delayTab('Finalizado')"
hx-get="{% url 'delivered' order.id %} " hx-trigger="click" hx-target="#etapas"
>Entregar</button>
</div>
{% endif %}
{% endfor %}
</div>
<div id="Entregue" class="tabcontent">
{% for order in orders %}
{% if order.delivered != None %}
{% if order.delivered != None %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
</div>
{% endif %}
<div class="m-card"
{% if order.productComanda == Null %}
style="background-color: rgb(253, 69, 69);"
{% elif order.obs != '' %}
style="background-color: rgb(243, 165, 75);"
{% endif %}
>
<h4>{{order.id_product.name}}</h4>
<h4>{{order.obs}} </h4>
<h4>{{order.id_comanda.name}} - {{order.id_comanda.mesa.name}} </h4>
<h4> Atendente: {{order.id_comanda.user.first_name}} </h4>
<h4>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
</div>
{% endif %}
{% endfor %}
</div>

View File

@@ -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 height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 392.14 392.14" xml:space="preserve" fill="#808080" stroke="#808080" stroke-width="0.00392138">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -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; */
}

View File

@@ -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');