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)