From f83f95a51ad0d11bf78bd5712d5966c739452067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Fri, 22 May 2026 18:39:40 +0200
Subject: [PATCH] Stub form controller

---
 webgis/index.html                        | 132 ++++++++++++-----------
 webgis/js/controllers/form_controller.js |  26 +++++
 webgis/js/index.js                       |  11 ++
 3 files changed, 104 insertions(+), 65 deletions(-)
 create mode 100644 webgis/js/controllers/form_controller.js

diff --git a/webgis/index.html b/webgis/index.html
index d5337f5..0dbd41b 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -313,82 +313,84 @@
             </aside>
         </div>
     <!-- Search modal -->
-    <div class="modal" id="search" data-modal-target="modal">
+    <div class="modal" id="search" data-modal-target="modal" data-controller="form">
         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
         <div class="modal-content box has-background-white pt-4 mr-4 ml-4 pl-4 pr-4" style="min-height: 400px;">
             <h1 class="is-size-4 has-text-centered">Ricerca</h1>
-            <div class="field">
-                <label class="label">Testo libero</label>
-                <div class="control is-full-width">
-                    <input class="input" type="text" placeholder="Inserire parole chiave">
+            <form id="search-form" method="POST" data-form-target="search" data-action="submit->form#submitSearch">
+                <div class="field">
+                    <label class="label">Testo libero</label>
+                    <div class="control is-full-width">
+                        <input class="input" type="text" name="text" form="search-form" placeholder="Inserire parole chiave">
+                    </div>
                 </div>
-            </div>
-            <div class="columns mt-5 pt-3">
-                <div class="field column">
-                    <label class="label">Categoria sito</label>
-                    <div class="control">
-                        <div class="select">
-                            <select>
-                                <option default>-- Scegliere la categoria del sito --</option>
-                                <option>Sito conservato</option>
-                                <option>Sito non conservato</option>
-                            </select>
+                <div class="columns mt-5 pt-3">
+                    <div class="field column">
+                        <label class="label">Categoria sito</label>
+                        <div class="control">
+                            <div class="select">
+                                <select name="category">
+                                    <option default value="">-- Scegliere la categoria del sito --</option>
+                                    <option value="site">Sito conservato</option>
+                                    <option value="not_conserved">Sito non conservato</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <!--
+                    <div class="field column">
+                        <label class="label">Categoria reperto</label>
+                        <div class="control">
+                            <div class="select">
+                                <select>
+                                    <option default>-- Scegliere la categoria del reperto --</option>
+                                    <option>Scultura</option>
+                                    <option>Epigrafe</option>
+                                    <option>Elemento architettonico</option>
+                                    <option>Decorazione parietale</option>
+                                    <option>Pavimentazione</option>
+                                    <option>Arredo</option>
+                                    <option>Abbigliamento e ornamenti personali</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    -->
+                    <div class="field column">
+                        <label class="label">Tecnica muraria</label>
+                        <div class="control">
+                            <div class="select">
+                                <select name="technique">
+                                    <option default>-- Scegliere tecnica --</option>
+                                    <option>Opera poligonale</option>
+                                    <option>Opera incerta</option>
+                                    <option>Opera reticolata</option>
+                                    <option>Opera laterizia</option>
+                                    <option>Opera mista</option>
+                                    <option>Opera cementizia</option>
+                                </select>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <!--
-                <div class="field column">
-                    <label class="label">Categoria reperto</label>
+                <div class="field is-grouped mt-5 mb-0 pb-0 has-text-right">
                     <div class="control">
-                        <div class="select">
-                            <select>
-                                <option default>-- Scegliere la categoria del reperto --</option>
-                                <option>Scultura</option>
-                                <option>Epigrafe</option>
-                                <option>Elemento architettonico</option>
-                                <option>Decorazione parietale</option>
-                                <option>Pavimentazione</option>
-                                <option>Arredo</option>
-                                <option>Abbigliamento e ornamenti personali</option>
-                            </select>
-                        </div>
+                        <button class="button is-link" type="submit">
+                            <span>Cerca</span>
+                            <span class="icon is-small">
+                                <i class="fa fa-search"></i>
+                            </span>
+                        </button>
                     </div>
-                </div>
-                -->
-                <div class="field column">
-                    <label class="label">Tecnica muraria</label>
                     <div class="control">
-                        <div class="select">
-                            <select>
-                                <option default>-- Scegliere tecnica --</option>
-                                <option>Opera poligonale</option>
-                                <option>Opera incerta</option>
-                                <option>Opera reticolata</option>
-                                <option>Opera laterizia</option>
-                                <option>Opera mista</option>
-                                <option>Opera cementizia</option>
-                            </select>
-                        </div>
+                        <button class="button is-link is-light" type="reset">
+                            <span>Cancella filtri</span>
+                            <span class="icon is-small">
+                                <i class="fa fa-times"></i>
+                            </span>
+                        </button>
                     </div>
-                </div>
-            </div>
-            <div class="field is-grouped mt-5 mb-0 pb-0 has-text-right">
-                <div class="control">
-                    <button class="button is-link">
-                        <span>Cerca</span>
-                        <span class="icon is-small">
-                            <i class="fa fa-search"></i>
-                        </span>
-                    </button>
-                </div>
-                <div class="control">
-                    <button class="button is-link is-light">
-                        <span>Cancella filtri</span>
-                        <span class="icon is-small">
-                            <i class="fa fa-times"></i>
-                        </span>
-                    </button>
-                </div>
+            </form>
             </div>
         </div>
     </div>
diff --git a/webgis/js/controllers/form_controller.js b/webgis/js/controllers/form_controller.js
new file mode 100644
index 0000000..b471075
--- /dev/null
+++ b/webgis/js/controllers/form_controller.js
@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+import { GisState } from "../state.js";
+import UI from "../ui.js";
+
+export default class extends Controller {
+    static values = {
+        'coords': String,
+        'group': String,
+        'id': String,
+    };
+
+    static targets = ['search'];
+    
+    /**
+     * 
+     * @param {Event} event 
+     */
+    submitSearch(event) {
+        event.preventDefault();
+        const data = new FormData(event.target);
+
+        for (const entry of data.entries()) {
+            console.log(entry);
+        }
+    }
+}
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 3d2a60e..12591f3 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -7,6 +7,8 @@ import MarkerController from './controllers/marker_controller.js';
 import BiblioController from './controllers/biblio_controller.js';
 import TabsController from './controllers/tabs_controller.js';
 import LayerController from './controllers/layer_controller.js';
+import FormController from './controllers/form_controller.js';
+import { GisState } from './state.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -26,6 +28,14 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
     UI.toggleBurger('navbar-burger');
+
+    // TEMP!!
+    const sites = GisState.markers.sites;
+    for (let key of Object.keys(sites)) {
+        if (sites[key].options.data.id === 16) {
+            console.debug('I found it!', key);
+        }
+    }
 });
 
 function initStimulus() {
@@ -36,4 +46,5 @@ function initStimulus() {
     Stimulus.register("biblio", BiblioController);
     Stimulus.register("tabs", TabsController);
     Stimulus.register("layer", LayerController);
+    Stimulus.register("form", FormController);
 }
\ No newline at end of file