nicolo/caprigis
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Stub form controller

Browse Source
This commit is contained in:
Nicolò P
2026-05-22 18:39:40 +02:00
parent c313194e15
commit f83f95a51a
3 changed files with 104 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
webgis/index.html
View File

@@ -313,82 +313,84 @@
</aside> </aside>
</div> </div>
<!-- Search modal --> <!-- 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-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;"> <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> <h1 class="is-size-4 has-text-centered">Ricerca</h1>
<div class="field"> <form id="search-form" method="POST" data-form-target="search" data-action="submit->form#submitSearch">
<label class="label">Testo libero</label> <div class="field">
<div class="control is-full-width"> <label class="label">Testo libero</label>
<input class="input" type="text" placeholder="Inserire parole chiave"> <div class="control is-full-width">
<input class="input" type="text" name="text" form="search-form" placeholder="Inserire parole chiave">
</div>
</div> </div>
</div> <div class="columns mt-5 pt-3">
<div class="columns mt-5 pt-3"> <div class="field column">
<div class="field column"> <label class="label">Categoria sito</label>
<label class="label">Categoria sito</label> <div class="control">
<div class="control"> <div class="select">
<div class="select"> <select name="category">
<select> <option default value="">-- Scegliere la categoria del sito --</option>
<option default>-- Scegliere la categoria del sito --</option> <option value="site">Sito conservato</option>
<option>Sito conservato</option> <option value="not_conserved">Sito non conservato</option>
<option>Sito non conservato</option> </select>
</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>
</div> </div>
<!-- <div class="field is-grouped mt-5 mb-0 pb-0 has-text-right">
<div class="field column">
<label class="label">Categoria reperto</label>
<div class="control"> <div class="control">
<div class="select"> <button class="button is-link" type="submit">
<select> <span>Cerca</span>
<option default>-- Scegliere la categoria del reperto --</option> <span class="icon is-small">
<option>Scultura</option> <i class="fa fa-search"></i>
<option>Epigrafe</option> </span>
<option>Elemento architettonico</option> </button>
<option>Decorazione parietale</option>
<option>Pavimentazione</option>
<option>Arredo</option>
<option>Abbigliamento e ornamenti personali</option>
</select>
</div>
</div> </div>
</div>
-->
<div class="field column">
<label class="label">Tecnica muraria</label>
<div class="control"> <div class="control">
<div class="select"> <button class="button is-link is-light" type="reset">
<select> <span>Cancella filtri</span>
<option default>-- Scegliere tecnica --</option> <span class="icon is-small">
<option>Opera poligonale</option> <i class="fa fa-times"></i>
<option>Opera incerta</option> </span>
<option>Opera reticolata</option> </button>
<option>Opera laterizia</option>
<option>Opera mista</option>
<option>Opera cementizia</option>
</select>
</div>
</div> </div>
</div> </form>
</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>
</div> </div>
</div> </div>
</div> </div>

26
webgis/js/controllers/form_controller.js Normal file
View File

@@ -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);
}
}
}

11
webgis/js/index.js
View File

@@ -7,6 +7,8 @@ import MarkerController from './controllers/marker_controller.js';
import BiblioController from './controllers/biblio_controller.js'; import BiblioController from './controllers/biblio_controller.js';
import TabsController from './controllers/tabs_controller.js'; import TabsController from './controllers/tabs_controller.js';
import LayerController from './controllers/layer_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 () => { document.addEventListener('DOMContentLoaded', async () => {
// Register Stimulus controllers // Register Stimulus controllers
@@ -26,6 +28,14 @@ document.addEventListener('DOMContentLoaded', async () => {
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM); UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
UI.toggleBurger('navbar-burger'); 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() { function initStimulus() {
@@ -36,4 +46,5 @@ function initStimulus() {
Stimulus.register("biblio", BiblioController); Stimulus.register("biblio", BiblioController);
Stimulus.register("tabs", TabsController); Stimulus.register("tabs", TabsController);
Stimulus.register("layer", LayerController); Stimulus.register("layer", LayerController);
Stimulus.register("form", FormController);
} }