4 - Replace prompt() with DaisyUI modal for adding subjects

assets/controllers/map_controller.js

@@ -17,9 +17,22 @@ export default class extends Controller {
             maxZoom: 19,
         }).addTo(this.map);
 
+        this.pendingLatlng = null;
+
+        this.dialog = document.getElementById('add-subject-dialog');
+        this.nameInput = document.getElementById('subject-name');
+        this.submitBtn = document.getElementById('subject-submit');
+        this.cancelBtn = document.getElementById('subject-cancel');
+
         this.loadSubjects();
 
-        this.map.on('click', (e) => this.createSubject(e.latlng));
+        this.map.on('click', (e) => this.openModal(e.latlng));
+
+        this.submitBtn.addEventListener('click', () => this.handleSubmit());
+        this.cancelBtn.addEventListener('click', () => this.closeModal());
+
+        // Esc key / backdrop close — clear pending state
+        this.dialog.addEventListener('close', () => this.resetModal());
     }
 
     loadSubjects() {
@@ -34,9 +47,27 @@ export default class extends Controller {
             });
     }
 
-    createSubject(latlng) {
-        const name = prompt('Name of this place?');
-        if (!name) return;
+    openModal(latlng) {
+        this.pendingLatlng = latlng;
+        this.nameInput.value = '';
+        this.dialog.showModal();
+        this.nameInput.focus();
+    }
+
+    closeModal() {
+        this.dialog.close();
+    }
+
+    resetModal() {
+        this.pendingLatlng = null;
+        this.nameInput.value = '';
+    }
+
+    handleSubmit() {
+        const name = this.nameInput.value.trim();
+        if (!name || !this.pendingLatlng) return;
+
+        const latlng = this.pendingLatlng;
 
         fetch('/api/subjects', {
             method: 'POST',
@@ -48,7 +79,10 @@ export default class extends Controller {
             }),
         })
             .then(r => r.json())
-            .then(() => this.addMarker(latlng.lat, latlng.lng, name));
+            .then(() => {
+                this.addMarker(latlng.lat, latlng.lng, name);
+                this.closeModal();
+            });
     }
 
     addMarker(lat, lng, name) {

templates/index/page.html.twig

@@ -1,5 +1,29 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div {{ stimulus_controller('map') }} class="map-container"></div>
+    <div {{ stimulus_controller('map') }} class="map-container"
+         data-map-dialog-outlet="#add-subject-dialog">
+    </div>
+
+    <dialog id="add-subject-dialog" class="modal">
+        <div class="modal-box">
+            <h3 class="text-lg font-bold mb-4">Add a place</h3>
+
+            <fieldset class="fieldset">
+                <legend class="fieldset-legend">Name</legend>
+                <input
+                    type="text"
+                    id="subject-name"
+                    class="input w-full"
+                    placeholder="e.g. Frituur De Leeuw"
+                    autocomplete="off"
+                >
+            </fieldset>
+
+            <div class="modal-action">
+                <button id="subject-cancel" class="btn">Cancel</button>
+                <button id="subject-submit" class="btn btn-primary">Add</button>
+            </div>
+        </div>
+    </dialog>
 {% endblock %}