mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 21:45:41 +00:00
matriz do mapa de mesas
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -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)
|
||||||
|
|||||||
@@ -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 %}
|
||||||
@@ -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')
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user