Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add index templates for observations, assets, controls, and interventions with custom filtering UI

Browse source
This commit is contained in:
Karl Determe 2026-08-25 11:27:40 +02:00
parent be57578aa1
commit e6bc68ee42
5 changed files with 43 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
loko/assets/templates/assets/base_assets_index.html
View file

@ -93,12 +93,12 @@
<!-- Widget de recherche — centré sur toute la largeur (tableau + carte) --> <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
<div id="assets-search-widget" <div id="assets-search-widget"
style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;"> style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
<div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;"> <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
<!-- Input + bouton X superposé à l'intérieur --> <!-- Input + bouton X superposé à l'intérieur -->
<div style="position:relative; display:flex;"> <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
<input type="text" id="assets-search-input" class="form-control form-control-sm" <input type="text" id="assets-search-input" class="form-control form-control-sm"
style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;" style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
placeholder="{% translate 'Code, nom…' %}"> placeholder="{% translate 'Code, nom…' %}">
<button type="button" id="assets-search-clear" <button type="button" id="assets-search-clear"
style="position:absolute; right:4px; top:50%; transform:translateY(-50%); style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@ -109,7 +109,7 @@
</button> </button>
</div> </div>
<!-- AND/OR toggle --> <!-- AND/OR toggle -->
<span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;"> <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
<div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}"> <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
<input type="radio" class="btn-check" name="assets-search-mode" id="assets-search-mode-and" value="and" checked> <input type="radio" class="btn-check" name="assets-search-mode" id="assets-search-mode-and" value="and" checked>
<label class="btn btn-outline-secondary py-0 px-2" for="assets-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">AND</label> <label class="btn btn-outline-secondary py-0 px-2" for="assets-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">AND</label>
@ -118,8 +118,8 @@
</div> </div>
</span> </span>
<!-- Bouton recherche --> <!-- Bouton recherche -->
<button class="btn btn-sm" type="button" id="assets-search-btn" <button class="btn btn-sm px-3" type="button" id="assets-search-btn"
style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;" style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
title="{% translate 'Rechercher' %}"> title="{% translate 'Rechercher' %}">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</button> </button>

18
loko/controls/static/controls/controls_index.css
View file

@ -10,6 +10,24 @@
border-color: #dee2e6; border-color: #dee2e6;
} }
#controls-search-widget {
max-width: calc(100% - 310px);
}
@media (max-width: 767.98px) {
#controls-search-widget {
position: static !important;
transform: none !important;
max-width: 100% !important;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
pointer-events: auto !important;
}
#controls-search-widget .input-group > div:first-child {
width: 100% !important;
}
}
/* Styles pour la modale de filtre */ /* Styles pour la modale de filtre */
#filterModal .modal-dialog { #filterModal .modal-dialog {
max-width: 95%; max-width: 95%;

14
loko/controls/templates/controls/controls_index.html
View file

@ -113,7 +113,7 @@
<span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span> <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
<input type="text" id="project-autocomplete-input" class="form-control" placeholder="{% translate 'Rechercher un projet à ajouter (nom ou code)…' %}" autocomplete="off"> <input type="text" id="project-autocomplete-input" class="form-control" placeholder="{% translate 'Rechercher un projet à ajouter (nom ou code)…' %}" autocomplete="off">
<button class="btn btn-outline-secondary" type="button" id="project-search-clear-btn" style="display:none;"> <button class="btn btn-outline-secondary" type="button" id="project-search-clear-btn" style="display:none;">
<i class="bi bi-x"></i> <i class="bi bi-x-lg"></i>
</button> </button>
</div> </div>
<div id="project-autocomplete-dropdown" class="list-group position-absolute w-100 shadow-sm d-none" style="z-index: 1055; max-height: 200px; overflow-y: auto;"></div> <div id="project-autocomplete-dropdown" class="list-group position-absolute w-100 shadow-sm d-none" style="z-index: 1055; max-height: 200px; overflow-y: auto;"></div>
@ -179,11 +179,11 @@
<!-- Widget de recherche — centré sur toute la largeur (tableau + carte) --> <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
<div id="controls-search-widget" <div id="controls-search-widget"
style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;"> style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 310px);">
<div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;"> <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
<div style="position:relative; display:flex;"> <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
<input type="text" id="controls-search-input" class="form-control form-control-sm" <input type="text" id="controls-search-input" class="form-control form-control-sm"
style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;" style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
placeholder="{% translate 'Code, description, lieu, projet…' %}"> placeholder="{% translate 'Code, description, lieu, projet…' %}">
<button type="button" id="controls-search-clear" <button type="button" id="controls-search-clear"
style="position:absolute; right:4px; top:50%; transform:translateY(-50%); style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@ -193,7 +193,7 @@
<i class="bi bi-x-lg" style="font-size:0.7rem;"></i> <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
</button> </button>
</div> </div>
<span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;"> <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
<div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}"> <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
<input type="radio" class="btn-check" name="ctrl-search-mode" id="ctrl-search-mode-and" value="and" checked> <input type="radio" class="btn-check" name="ctrl-search-mode" id="ctrl-search-mode-and" value="and" checked>
<label class="btn btn-outline-secondary py-0 px-2" for="ctrl-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label> <label class="btn btn-outline-secondary py-0 px-2" for="ctrl-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
@ -201,8 +201,8 @@
<label class="btn btn-outline-secondary py-0 px-2" for="ctrl-search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label> <label class="btn btn-outline-secondary py-0 px-2" for="ctrl-search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
</div> </div>
</span> </span>
<button class="btn btn-sm" type="button" id="controls-search-btn" <button class="btn btn-sm px-3" type="button" id="controls-search-btn"
style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;" style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
title="{% translate 'Rechercher' %}"> title="{% translate 'Rechercher' %}">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</button> </button>

12
loko/interventions/templates/interventions/interventions_index.html
View file

@ -827,12 +827,12 @@
<!-- Widget de recherche — centré sur toute la largeur (tableau + carte) --> <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
<div id="interventions-search-widget" <div id="interventions-search-widget"
style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;"> style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
<div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;"> <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
<!-- Input + bouton X superposé à l'intérieur --> <!-- Input + bouton X superposé à l'intérieur -->
<div style="position:relative; display:flex;"> <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
<input type="text" id="interventions-search-input" class="form-control form-control-sm" <input type="text" id="interventions-search-input" class="form-control form-control-sm"
style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;" style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
placeholder="{% translate 'Titre, code, localisation, contrat…' %}"> placeholder="{% translate 'Titre, code, localisation, contrat…' %}">
<button type="button" id="interventions-search-clear" <button type="button" id="interventions-search-clear"
style="position:absolute; right:4px; top:50%; transform:translateY(-50%); style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@ -842,7 +842,7 @@
<i class="bi bi-x-lg" style="font-size:0.7rem;"></i> <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
</button> </button>
</div> </div>
<span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;"> <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
<div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}"> <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
<input type="radio" class="btn-check" name="search-mode" id="search-mode-and" value="and" checked> <input type="radio" class="btn-check" name="search-mode" id="search-mode-and" value="and" checked>
<label class="btn btn-outline-secondary py-0 px-2" for="search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label> <label class="btn btn-outline-secondary py-0 px-2" for="search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
@ -850,8 +850,8 @@
<label class="btn btn-outline-secondary py-0 px-2" for="search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label> <label class="btn btn-outline-secondary py-0 px-2" for="search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
</div> </div>
</span> </span>
<button class="btn btn-sm" type="button" id="interventions-search-btn" <button class="btn btn-sm px-3" type="button" id="interventions-search-btn"
style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;" style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
title="{% translate 'Rechercher' %}"> title="{% translate 'Rechercher' %}">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</button> </button>

12
loko/observations/templates/observations/observations_index.html
View file

@ -323,11 +323,11 @@
<!-- Widget de recherche — centré sur toute la largeur (tableau + carte) --> <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
<div id="observations-search-widget" <div id="observations-search-widget"
style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;"> style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
<div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;"> <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
<div style="position:relative; display:flex;"> <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
<input type="text" id="observations-search-input" class="form-control form-control-sm" <input type="text" id="observations-search-input" class="form-control form-control-sm"
style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;" style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
placeholder="{% translate 'Description ou adresse…' %}"> placeholder="{% translate 'Description ou adresse…' %}">
<button type="button" id="observations-search-clear" <button type="button" id="observations-search-clear"
style="position:absolute; right:4px; top:50%; transform:translateY(-50%); style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@ -337,7 +337,7 @@
<i class="bi bi-x-lg" style="font-size:0.7rem;"></i> <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
</button> </button>
</div> </div>
<span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;"> <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
<div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}"> <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
<input type="radio" class="btn-check" name="obs-search-mode" id="obs-search-mode-and" value="and" checked> <input type="radio" class="btn-check" name="obs-search-mode" id="obs-search-mode-and" value="and" checked>
<label class="btn btn-outline-secondary py-0 px-2" for="obs-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label> <label class="btn btn-outline-secondary py-0 px-2" for="obs-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
@ -345,8 +345,8 @@
<label class="btn btn-outline-secondary py-0 px-2" for="obs-search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label> <label class="btn btn-outline-secondary py-0 px-2" for="obs-search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
</div> </div>
</span> </span>
<button class="btn btn-sm" type="button" id="observations-search-btn" <button class="btn btn-sm px-3" type="button" id="observations-search-btn"
style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;" style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
title="{% translate 'Rechercher' %}"> title="{% translate 'Rechercher' %}">
<i class="bi bi-search"></i> <i class="bi bi-search"></i>
</button> </button>