feat: save location mesa_map

gestaoRaul/mesas/templates/mesas_map.html

@@ -4,6 +4,8 @@
 
 {% block 'head' %}
 <link rel="stylesheet" href="{% static 'mesas/css/mesas.css' %}">
+<script src="{% static 'mesas/js/mesas_map.js' %}"></script>
+
 {% endblock %}
 
 {% block 'title' %}
@@ -12,84 +14,31 @@ RRB&C - Mapa de Mesas
 
 {% block 'body' %}
 
-
-
-<style>
-  .container {
-    display: flex;
-    justify-content: space-around;
-}
-
-.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" style="position: relative">
 
   {% for eixo in eixosXY %}
         <div 
-        id="{{eixo.y}}-{{eixo.y}}" 
-        class="column"
-        ondragenter="eventEnter(event)" 
-        style="background-color: rgba(0, 0, 255, 0.103); 
+        id="{{eixo.x}}-{{eixo.y}}" 
+        class="espaco"
+        style="background-color: rgba(0, 0, 255, 0); 
         width: 50px; 
         height: 50px; 
         left: {{eixo.y}}px; 
-        top: {{eixo.x}}px;position: absolute"></div>
+        top: {{eixo.x}}px;position: absolute">
+      </div>
   {% endfor %}
 
+</div>
 
   {% for mesa in mesas %}
 
   {% if mesa.active == True %}
-  <div class="m-card" ondragend="eventEnter(event)" draggable="true" style="  background-color: indianred;"  >{{mesa.name}}</div>
+  <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" style=" position: absolute;  background-color: indianred;"  >{{mesa.name}} <input type="text" hidden value="{{mesa.location}}"> </div>
    {% else %}
-   <div class="m-card" ondragend="eventEnter(event)" draggable="true"  >{{mesa.name}}</div>
+   <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" >{{mesa.name}} <input type="text" hidden value="{{mesa.location}}"></div>
    {% endif %}
   
   {% endfor %}
-</div>
-
-
 
 
 {% endblock %}

gestaoRaul/mesas/urls.py

@@ -5,6 +5,7 @@ from . import views
 urlpatterns = [
     path('', views.mesas, name='mesas'),
     path('mapMesas/', views.mapMesas, name='mapMesas'),
+    path('locationMesa/<int:mesaId>/<str:location>/', views.locationMesa, name='locationMesa'),
 
 
 

gestaoRaul/mesas/views.py

@@ -1,4 +1,6 @@
-from django.shortcuts import render,redirect
+from django.shortcuts import render,redirect, HttpResponse
+from django.http import JsonResponse
+
 
 from mesas.models import Mesa
 
@@ -19,6 +21,11 @@ def mapMesas(request):
     mesas = Mesa.objects.all()
     return render(request, 'mesas_map.html', {'mesas': mesas, 'eixosXY': eixosXY})
 
+def locationMesa(request, mesaId, location):
+    mesa = Mesa.objects.get(id=mesaId)
+    mesa.location = location
+    mesa.save()
+    return JsonResponse({'status': 'ok'})
 # def onOffmesa(request):
 #     id = request.POST.get('id-mesa')
 #     mesa_id = int(id)

gestaoRaul/templates/static/mesas/css/mesas.css

@@ -27,7 +27,7 @@
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
     text-align: center;
     line-height: 50px; /* Centraliza o texto verticalmente */
-    font-size: 20px;
+    font-size: 10px;
     font-weight: bold;
     color: #333;
     /* position: absolute; */
@@ -54,4 +54,9 @@
 
 .elemento {
     position: absolute;
+}
+
+.espaco {
+  border: 0.3px solid #cccccc56;
+  padding: 0px;
 }

gestaoRaul/templates/static/mesas/js/mesas_map.js

@@ -0,0 +1,70 @@
+document.addEventListener('dragstart', (e) => {
+    e.target.classList.add('dragging');
+});
+
+document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    const target = e.target;
+    if (target.classList.contains('column')) {
+        target.style.backgroundColor = ''; 
+    }
+});
+
+document.addEventListener('dragend', (e) => {
+    e.target.classList.remove('dragging');
+    document.querySelectorAll('.column').forEach(column => {
+        column.style.backgroundColor = '';
+    });
+});
+
+document.addEventListener('drop', (e) => {
+    e.preventDefault();
+    const draggable = document.querySelector('.dragging');
+    e.target.appendChild(draggable);
+});
+function manipularCards() {
+  const cards = document.querySelectorAll('.m-card');
+
+  cards.forEach(card => {
+    const input = card.querySelector('input');
+    const inputValue = input.value; 
+    const targetElement = document.getElementById(inputValue); 
+
+    if (targetElement) {
+      targetElement.appendChild(card);
+    } else {
+      console.error(`Elemento com ID ${inputValue} não encontrado.`);
+    }
+  });
+}
+
+function saveLocal() {
+  const draggedElement = event.dataTransfer.getData('text/plain');
+
+const mesaElement = event.target;
+const targetElement = event.target.parentNode;
+const mesaId = mesaElement.id
+
+const targetId = targetElement.id;
+const url = `/mesas/locationMesa/${mesaId}/${targetId}/`;
+var resposta =   fetch(url, {method: 'GET', headers: {'Content-Type': 'application/json'
+    },}).then(response => response.json())
+  .then(data => {
+    console.log(data); 
+    if(data.status == 'ok'){
+      alert('Mesa movida com sucesso!')
+    }
+  })
+  .catch(error => {
+    console.error('Erro ao salvar local:', error);
+  });
+
+}
+
+setTimeout(function() {
+  manipularCards();}, 1);
+
+  setTimeout()
+  
+  
+