Add docs and few fixes

app/javascript/controllers/maps_controller.js

@@ -13,8 +13,7 @@ import {
   getSpeedColor
 } from "../maps/polylines";
 
-import { fetchAndDrawAreas } from "../maps/areas";
-import { handleAreaCreated } from "../maps/areas";
+import { fetchAndDrawAreas, handleAreaCreated } from "../maps/areas";
 
 import { showFlashMessage, fetchAndDisplayPhotos, debounce } from "../maps/helpers";
 
@@ -67,7 +66,7 @@ export default class extends Controller {
       imperial: this.distanceUnit === 'mi',
       metric: this.distanceUnit === 'km',
       maxWidth: 120
-    }).addTo(this.map)
+    }).addTo(this.map);
 
     // Add stats control
     const StatsControl = L.Control.extend({
@@ -107,7 +106,8 @@ export default class extends Controller {
     // Create a proper Leaflet layer for fog
     this.fogOverlay = createFogOverlay();
 
-    this.areasLayer = L.layerGroup(); // Initialize areas layer
+    this.areasLayer = L.layerGroup(); // Initialize areasLayer
+
     this.photoMarkers = L.layerGroup();
 
     this.setupScratchLayer(this.countryCodesMap);
@@ -123,7 +123,7 @@ export default class extends Controller {
       Heatmap: this.heatmapLayer,
       "Fog of War": new this.fogOverlay(),
       "Scratch map": this.scratchLayer,
-      Areas: this.areasLayer,
+      Areas: this.areasLayer, // Add areasLayer to the control
       Photos: this.photoMarkers
     };
 
@@ -166,6 +166,20 @@ export default class extends Controller {
     // Fetch and draw areas when the map is loaded
     fetchAndDrawAreas(this.areasLayer, this.apiKey);
 
+    // Add a simple test circle to the map
+    const testCircle = L.circle([52.514568, 13.350111], {
+      radius: 100,
+      color: 'blue',
+      fillColor: '#30f',
+      fillOpacity: 0.5,
+      interactive: true,
+      zIndexOffset: 1000
+    }).addTo(this.map);
+
+    testCircle.on('mouseover', () => {
+      console.log('Mouse over test circle');
+    });
+
     let fogEnabled = false;
 
     // Hide fog by default
@@ -248,10 +262,13 @@ export default class extends Controller {
     }
     // Store panel state before disconnecting
     if (this.rightPanel) {
-      const finalState = document.querySelector('.leaflet-right-panel').style.display !== 'none' ? 'true' : 'false';
+      const panel = document.querySelector('.leaflet-right-panel');
+      const finalState = panel ? (panel.style.display !== 'none' ? 'true' : 'false') : 'false';
       localStorage.setItem('mapPanelOpen', finalState);
     }
-    this.map.remove();
+    if (this.map) {
+      this.map.remove();
+    }
   }
 
   setupSubscription() {
@@ -567,17 +584,26 @@ export default class extends Controller {
           },
         },
       },
+      edit: {
+        featureGroup: this.drawnItems
+      }
     });
 
     // Handle circle creation
-    this.map.on(L.Draw.Event.CREATED, (event) => {
+    this.map.on('draw:created', (event) => {
       const layer = event.layer;
 
       if (event.layerType === 'circle') {
-        handleAreaCreated(this.areasLayer, layer, this.apiKey);
+        console.log("Circle created, opening popup..."); // Add debug log
+        try {
+          // Add the layer to the map first
+          layer.addTo(this.map);
+          handleAreaCreated(this.areasLayer, layer, this.apiKey);
+        } catch (error) {
+          console.error("Error in handleAreaCreated:", error);
+          console.error(error.stack); // Add stack trace
+        }
       }
-
-      this.drawnItems.addLayer(layer);
     });
   }
 

app/javascript/maps/areas.js

@@ -1,54 +1,105 @@
 export function handleAreaCreated(areasLayer, layer, apiKey) {
+  console.log('handleAreaCreated called with apiKey:', apiKey);
   const radius = layer.getRadius();
   const center = layer.getLatLng();
 
   const formHtml = `
-    <div class="card w-96 max-w-sm bg-content-100 shadow-xl">
+    <div class="card w-96 bg-base-100 shadow-xl">
       <div class="card-body">
         <h2 class="card-title">New Area</h2>
-        <form id="circle-form">
+        <form id="circle-form" class="space-y-4">
           <div class="form-control">
             <label for="circle-name" class="label">
-              <span class="label-text">Name</span>
+              <span class="label-text">Area Name</span>
             </label>
-            <input type="text" id="circle-name" name="area[name]" class="input input-bordered input-ghost focus:input-ghost w-full max-w-xs" required>
+            <input type="text"
+                   id="circle-name"
+                   name="area[name]"
+                   class="input input-bordered w-full"
+                   placeholder="Enter area name"
+                   autofocus
+                   required>
           </div>
           <input type="hidden" name="area[latitude]" value="${center.lat}">
           <input type="hidden" name="area[longitude]" value="${center.lng}">
           <input type="hidden" name="area[radius]" value="${radius}">
-          <div class="card-actions justify-end mt-4">
-            <button type="submit" class="btn btn-primary">Save</button>
+          <div class="flex justify-between mt-4">
+            <button type="button"
+                    class="btn btn-ghost"
+                    onclick="this.closest('.leaflet-popup').querySelector('.leaflet-popup-close-button').click()">
+              Cancel
+            </button>
+            <button type="button" id="save-area-btn" class="btn btn-primary">Save Area</button>
           </div>
         </form>
       </div>
     </div>
   `;
 
-  layer.bindPopup(
-    formHtml, {
-      maxWidth: "auto",
-      minWidth: 300
-    }
-    ).openPopup();
+  console.log('Binding popup to layer');
+  layer.bindPopup(formHtml, {
+    maxWidth: "auto",
+    minWidth: 300,
+    closeButton: true,
+    closeOnClick: false,
+    className: 'area-form-popup'
+  }).openPopup();
 
-  layer.on('popupopen', () => {
-    const form = document.getElementById('circle-form');
-
-    if (!form) return;
-
-    form.addEventListener('submit', (e) => {
-      e.preventDefault();
-      saveArea(new FormData(form), areasLayer, layer, apiKey);
-    });
-  });
-
-  // Add the layer to the areas layer group
+  console.log('Adding layer to areasLayer');
   areasLayer.addLayer(layer);
+
+  // Bind the event handler immediately after opening the popup
+  setTimeout(() => {
+    console.log('Setting up form handlers');
+    const form = document.getElementById('circle-form');
+    const saveButton = document.getElementById('save-area-btn');
+    const nameInput = document.getElementById('circle-name');
+
+    console.log('Form:', form);
+    console.log('Save button:', saveButton);
+    console.log('Name input:', nameInput);
+
+    if (!form || !saveButton || !nameInput) {
+      console.error('Required elements not found');
+      return;
+    }
+
+    // Focus the name input
+    nameInput.focus();
+
+    // Remove any existing click handlers
+    const newSaveButton = saveButton.cloneNode(true);
+    saveButton.parentNode.replaceChild(newSaveButton, saveButton);
+
+    // Add click handler
+    newSaveButton.addEventListener('click', (e) => {
+      console.log('Save button clicked');
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!nameInput.value.trim()) {
+        console.log('Name is empty');
+        nameInput.classList.add('input-error');
+        return;
+      }
+
+      console.log('Creating FormData');
+      const formData = new FormData(form);
+      formData.forEach((value, key) => {
+        console.log(`FormData: ${key} = ${value}`);
+      });
+
+      console.log('Calling saveArea');
+      saveArea(formData, areasLayer, layer, apiKey);
+    });
+  }, 100); // Small delay to ensure DOM is ready
 }
 
 export function saveArea(formData, areasLayer, layer, apiKey) {
+  console.log('saveArea called with apiKey:', apiKey);
   const data = {};
   formData.forEach((value, key) => {
+    console.log('FormData entry:', key, value);
     const keys = key.split('[').map(k => k.replace(']', ''));
     if (keys.length > 1) {
       if (!data[keys[0]]) data[keys[0]] = {};
@@ -58,18 +109,21 @@ export function saveArea(formData, areasLayer, layer, apiKey) {
     }
   });
 
+  console.log('Sending fetch request with data:', data);
   fetch(`/api/v1/areas?api_key=${apiKey}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json'},
     body: JSON.stringify(data)
   })
   .then(response => {
+    console.log('Received response:', response);
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
     return response.json();
   })
   .then(data => {
+    console.log('Area saved successfully:', data);
     layer.closePopup();
     layer.bindPopup(`
       Name: ${data.name}<br>
@@ -79,9 +133,13 @@ export function saveArea(formData, areasLayer, layer, apiKey) {
 
     // Add event listener for the delete button
     layer.on('popupopen', () => {
-      document.querySelector('.delete-area').addEventListener('click', () => {
-        deleteArea(data.id, areasLayer, layer, apiKey);
-      });
+      const deleteButton = document.querySelector('.delete-area');
+      if (deleteButton) {
+        deleteButton.addEventListener('click', (e) => {
+          e.preventDefault();
+          deleteArea(data.id, areasLayer, layer, apiKey);
+        });
+      }
     });
   })
   .catch(error => {