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 %}