matriz do mapa de mesas

This commit is contained in:
2024-12-31 11:43:32 -03:00
parent 7698cfae47
commit 79409843d0
6 changed files with 77 additions and 39 deletions

View File

@@ -1,7 +1,6 @@
from django.db import models from django.db import models
# Create your models here.
from django.db import models
class Mesa(models.Model): class Mesa(models.Model):
id = models.AutoField(primary_key=True) id = models.AutoField(primary_key=True)

View File

@@ -2,7 +2,6 @@
{% load static %} {% load static %}
{% block 'head' %} {% block 'head' %}
<link rel="stylesheet" href="{% static 'mesas/css/mesas.css' %}"> <link rel="stylesheet" href="{% static 'mesas/css/mesas.css' %}">
{% endblock %} {% endblock %}
@@ -15,21 +14,76 @@ RRB&C - Mapa de Mesas
<!-- <div class="card" <style>
{% if mesa.active == True %} .container {
style="background-color: indianred;" display: flex;
{% endif %} justify-content: space-around;
>{{mesa.name}} }
</div> -->
.column {
border: 1px solid #ccc;
padding: 10px;
}
.task {
width: 50px;
height: 50px;
background: #f0f0f0;
padding: 10px;
cursor: move;
}
</style>
<script>
function eventEnter(event) {
console.log(event)
}
const columns = document.querySelectorAll('.column');
columns.forEach(column => {
column.addEventListener('dragover', (e) => {
e.preventDefault();
});
column.addEventListener('drop', (e) => {
const task = document.querySelector('.dragging');
column.appendChild(task);
});
});
document.addEventListener('dragstart', (e) => {
e.target.classList.remove('dragging');
});
document.addEventListener('dragend', (e) => {
e.target.classList.add('dragging');
});
</script>
<div id="mapa"> <div id="mapa">
{% for eixo in eixosXY %}
<div
id="{{eixo.y}}-{{eixo.y}}"
class="column"
ondragenter="eventEnter(event)"
style="background-color: rgba(0, 0, 255, 0.103);
width: 50px;
height: 50px;
left: {{eixo.y}}px;
top: {{eixo.x}}px;position: absolute"></div>
{% endfor %}
{% for mesa in mesas %} {% for mesa in mesas %}
{% if mesa.active == True %} {% if mesa.active == True %}
<div class="m-card" style= " {{ mesa.location }} background-color: indianred;" >{{mesa.name}}</div> <div class="m-card" ondragend="eventEnter(event)" draggable="true" style=" background-color: indianred;" >{{mesa.name}}</div>
{% else %} {% else %}
<div class="m-card" style= " {{ mesa.location }} " >{{mesa.name}}</div> <div class="m-card" ondragend="eventEnter(event)" draggable="true" >{{mesa.name}}</div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
@@ -38,26 +92,4 @@ style="background-color: indianred;"
<!-- <body>
<div class="grid-container">
{% for mesa in mesas %}
<div class="card" style="right: 20px; bottom: 30px;">Elemento 2</div>
<div class="card"
{% if mesa.active == True %}
style="background-color: indianred;"
{% endif %}
>{{mesa.name}}
</div>
{% endfor %}
</div>
</body> -->
{% endblock %} {% endblock %}

View File

@@ -10,8 +10,14 @@ def mesas(request):
def mapMesas(request): def mapMesas(request):
eixosXY = []
for i in range(0,25):
for j in range(0,15):
item = {'x':j*50, 'y':i*50}
eixosXY.append(item)
mesas = Mesa.objects.all() mesas = Mesa.objects.all()
return render(request, 'mesas_map.html', {'mesas': mesas}) return render(request, 'mesas_map.html', {'mesas': mesas, 'eixosXY': eixosXY})
# def onOffmesa(request): # def onOffmesa(request):
# id = request.POST.get('id-mesa') # id = request.POST.get('id-mesa')

View File

@@ -20,18 +20,19 @@
transition: transform 0.2s; transition: transform 0.2s;
} }
.m-card { .m-card {
width: 80px; width: 50px;
height: 80px; height: 50px;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 15px; border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
line-height: 80px; /* Centraliza o texto verticalmente */ line-height: 50px; /* Centraliza o texto verticalmente */
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
position: absolute; /* position: absolute; */
transition: transform 0.2s; transition: transform 0.2s;
cursor: move;
} }
.card:hover { .card:hover {