feat: create tabs page orders

This commit is contained in:
2025-01-10 16:43:22 -03:00
parent 0e096207a6
commit b84fd3bb69
15 changed files with 270 additions and 2 deletions

Binary file not shown.

View File

@@ -27,6 +27,7 @@ urlpatterns = [
path('comandas/', include('comandas.urls')),
path('categories/', include('categories.urls')),
path('balcao/', include('balcao.urls')),
path('pedidos/', include('orders.urls')),
]

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,20 @@
# Generated by Django 5.1.4 on 2025-01-10 19:24
import django.db.models.deletion
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('comandas', '0003_comanda_status_alter_productcomanda_product'),
('orders', '0001_initial'),
]
operations = [
migrations.AddField(
model_name='order',
name='productComanda',
field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to='comandas.productcomanda'),
),
]

View File

@@ -1,10 +1,11 @@
from django.db import models
from products.models import Product
from comandas.models import Comanda
from comandas.models import Comanda, ProductComanda
class Order(models.Model):
productComanda = models.ForeignKey(ProductComanda, on_delete=models.SET_NULL, null=True)
id_product = models.ForeignKey(Product, on_delete=models.CASCADE)
id_comanda = models.ForeignKey(Comanda, on_delete=models.CASCADE)
obs = models.TextField(blank=True, null=True)

View File

@@ -0,0 +1,131 @@
{% extends "base.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
{% block 'head' %}
<link rel="stylesheet" href="{% static 'orders/css/orders.css' %}">
{% endblock %}
{% block 'title' %}
Pedidos Cozinha
{% endblock %}
</head>
<body>
{% block 'body' %}
<h1>Pedidos cozinha</h1>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Fila')">Fila</button>
<button class="tablinks" onclick="openTab(event, 'Preparo')">Preparo</button>
<button class="tablinks" onclick="openTab(event, 'Finalizado')">Finalizado</button>
<button class="tablinks" onclick="openTab(event, 'Entregue')">Entregue</button>
</div>
<div id="Fila" class="tabcontent">
{% for order in orders %}
{% if 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>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button>Preparar</button>
</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>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button>Preparar</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>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button>Preparar</button>
</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>{{order.queue|date:"D"}} {{order.queue|date:"d/m/Y - H:i"}}</h4>
<button>Preparar</button>
</div>
{% endif %}
{% endfor %}
</div>
<script src="{% static 'orders/js/orders.js' %}"></script> {% endblock %}
</body>
</html>

View File

@@ -0,0 +1,9 @@
from django.urls import path
from . import views
urlpatterns = [
path('', views.viewsOrders, name='pedidos'),
]

View File

@@ -1,3 +1,8 @@
from django.shortcuts import render
# Create your views here.
from orders.models import Order
def viewsOrders(request):
orders = Order.objects.all()
o = orders[0].id_comanda
return render(request, 'orders.html',{'orders': orders})

View File

@@ -29,6 +29,7 @@
<li class="nav-item"><a href="{% url 'viewBalcao' %}" class="nav-link"> Balcão</a></li>
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link"> Mapa</a></li>
<li class="nav-item"><a href="{% url 'products' %}" class="nav-link"> Produtos</a></li>
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link"> Pedidos</a></li>
</ul>
</div>
<div class="login-button">
@@ -46,6 +47,7 @@
<!-- <li class="nav-item"><a href="{% url 'viewBalcao' %}" class="nav-link">Balcão</a></li> -->
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li>
<li class="nav-item"><a href="{% url 'products' %}" class="nav-link">Produtos</a></li>
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Pedidos</a></li>
</ul>
<div class="login-button">

View File

@@ -0,0 +1,84 @@
/* .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;
}*/
.m-card {
/* width: 50px; */
height: 100%;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 50px;
font-size: 10px;
font-weight: bold;
color: #000000;
transition: transform 0.2s;
padding: 15px;
margin-top: 15px;
}
h4{
color: black;
}
/*
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
.m-card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}*/
.tab {
overflow: auto;
margin-bottom: 0px;
/* border: 1px solid #ccc; */
/* background-color: #f1f1f1; */
}
/* Estilo para cada aba */
.tab button {
width: 23%;
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 10px;
transition: 0.3s;
}
/* Estilo para a aba ativa */
.tab button.active {
background-color: #4446d6;
}
/* Estilo para o conteúdo das abas */
.tabcontent {
/* display: none; */
padding: 6px 12px;
/* border: 1px solid #ccc; */
/* border-top: none; */
}

View File

@@ -0,0 +1,15 @@
function openTab(evt, cityName) {
// Declarar todas as abas e conteúdos
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Mostrar o conteúdo da aba selecionada e marcar a aba como ativa
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}