Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
lga
crater-ui
Commits
9c05aa08
Commit
9c05aa08
authored
Nov 18, 2022
by
Sam MASSET
Browse files
Recherche et sélection de type de territoire en mode mobile sur la carte
parent
f3213750
Changes
10
Hide whitespace changes
Inline
Side-by-side
apps/crater/src/composants/base/PanneauGlissant.ts
View file @
9c05aa08
...
...
@@ -77,7 +77,7 @@ export class PanneauGlissant extends LitElement {
// arrow function car utilisée comme callback dans inscriterListenerClicExterieurMenu
private
plier
=
(
event
:
Event
)
=>
{
const
estTypeFermer
:
boolean
=
event
.
type
===
IDS_EVENEMENTS
.
fermer
;
const
estTypeClicEtExterieurMenu
:
boolean
=
event
.
type
===
'
click
'
&&
!
this
.
contains
(
<
Node
>
event
.
target
);
const
estTypeClicEtExterieurMenu
:
boolean
=
event
.
type
===
'
click
'
&&
!
event
.
composedPath
().
includes
(
this
);
if
(
estTypeFermer
||
estTypeClicEtExterieurMenu
)
{
this
.
supprimerListenerPlier
();
...
...
apps/crater/src/composants/carte/menu-indicateurs/MenuIndicateurs.ts
View file @
9c05aa08
...
...
@@ -2,7 +2,7 @@ import '../../base/Bouton.js';
import
{
CSS_BREAKPOINT_MAX_WIDTH_MOBILE_PAYSAGE
,
CSS_BREAKPOINT_MAX_WIDTH_TABLETTE
,
CSS_BREAKPOINT_MAX_WIDTH_TABLETTE
,
EvenementFermer
,
EvenementNaviguer
,
EvenementSelectionner
}
from
'
@lga/commun/build/composants/composants-base
'
;
...
...
apps/crater/src/composants/carte/menu-indicateurs/MenuSelectionCoucheGlissant.ts
0 → 100644
View file @
9c05aa08
import
'
./MenuIndicateurs.js
'
;
import
'
../../structure/RadioBoutonTerritoires.js
'
;
import
{
EvenementFermer
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
{
css
,
html
,
LitElement
}
from
'
lit
'
;
import
{
customElement
,
query
,
state
}
from
'
lit/decorators.js
'
;
import
{
unsafeSVG
}
from
'
lit/directives/unsafe-svg.js
'
;
import
{
ICONES_SVG
}
from
'
../../../domaines/systeme-alimentaire/configuration/icones_svg
'
;
import
{
Bouton
}
from
'
../../base/Bouton
'
;
import
{
OptionsBoutonsTerritoires
,
RadioBoutonTerritoires
}
from
"
../../structure/RadioBoutonTerritoires
"
;
import
{
MenuIndicateurs
,
OptionsMenuIndicateurs
}
from
'
./MenuIndicateurs
'
;
declare
global
{
interface
HTMLElementTagNameMap
{
'
c-menu-selection-couche-glissant
'
:
MenuSelectionCoucheGlissant
;
}
}
@
customElement
(
'
c-menu-selection-couche-glissant
'
)
export
class
MenuSelectionCoucheGlissant
extends
LitElement
{
static
styles
=
css
`
:host {
position: absolute;
z-index: auto;
right: 5px;
top: 5px;
}
#boutons-territoires {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: var(--hauteur-barre-navigation-echelle-territoriale);
}
c-bouton {
margin-left: auto;
--c-bouton__color: var(--bleu-marine);
--c-bouton__color__hover: var(--gris3);
--c-bouton__background-color: var(--blanc);
--c-bouton__background-color__hover: var(--blanc);
}
c-panneau-glissant {
--c-bouton__color: var(--bleu-marine);
--c-bouton__color__hover: var(--gris3);
--c-bouton__background-color: var(--blanc);
--c-bouton__background-color__hover: var(--blanc);
}
c-menu-indicateurs {
margin: auto;
}
div[slot='contenu'] {
background-color: var(--blanc);
min-height: 100%;
}
header {
border-bottom: solid 2px var(--bleu-marine);
}
.titre {
display: grid;
justify-content: start;
align-items: center;
}
.titre h1 {
margin: auto;
padding: 10px;
color: var(--bleu-marine);
font-size: var(--title4);
}
`
;
@
query
(
'
c-bouton
'
)
private
boutonFermer
!
:
Bouton
;
@
query
(
'
c-menu-indicateurs
'
)
private
menuIndicateurs
!
:
MenuIndicateurs
;
@
query
(
'
c-radio-bouton-territoires
'
)
private
radioBoutonTerritoires
!
:
RadioBoutonTerritoires
;
@
state
()
private
options
?:
OptionsMenuIndicateurs
;
@
state
()
boutonsTerritoires
?:
OptionsBoutonsTerritoires
;
render
()
{
return
html
`
<c-panneau-glissant>
${
unsafeSVG
(
ICONES_SVG
.
couchesCarte
)}
<div slot="contenu">
<header>
<c-bouton @click=
${
this
.
fermer
}
libelleTooltip="Fermer">
${
unsafeSVG
(
ICONES_SVG
.
fermer
)}
</c-bouton>
</header>
<div class="titre">
<h1>Changer d'échelle</h1>
</div>
<c-radio-bouton-territoires id="boutons-territoires" @selectionner="
${
this
.
fermer
}
"></c-radio-bouton-territoires>
<div class="titre">
<h1>Changer d'indicateur</h1>
</div>
<c-menu-indicateurs @selectionner="
${
this
.
fermer
}
"></c-menu-indicateurs>
</div>
</c-panneau-glissant>
`
;
}
maj
(
options
:
OptionsMenuIndicateurs
,
optionsBoutonsTerritoires
:
OptionsBoutonsTerritoires
)
{
this
.
options
=
options
;
this
.
boutonsTerritoires
=
optionsBoutonsTerritoires
;
}
updated
()
{
if
(
this
.
options
!==
undefined
)
{
this
.
menuIndicateurs
.
maj
(
this
.
options
);
}
if
(
this
.
boutonsTerritoires
!==
undefined
)
{
this
.
radioBoutonTerritoires
.
maj
(
this
.
boutonsTerritoires
);
}
}
private
fermer
()
{
this
.
boutonFermer
.
dispatchEvent
(
new
EvenementFermer
());
}
}
apps/crater/src/composants/carte/menu-
indicateurs/MenuIndicateurs
Glissant.ts
→
apps/crater/src/composants/carte/menu-
recherche/MenuRechercheTerritoire
Glissant.ts
View file @
9c05aa08
import
'
./MenuIndicateurs.js
'
;
import
{
EvenementFermer
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
{
css
,
html
,
LitElement
}
from
'
lit
'
;
import
{
customElement
,
query
,
state
}
from
'
lit/decorators.js
'
;
import
{
customElement
,
query
}
from
'
lit/decorators.js
'
;
import
{
unsafeSVG
}
from
'
lit/directives/unsafe-svg.js
'
;
import
{
EchelleTerritoriale
}
from
"
../../../domaines/carte/EchelleTerritoriale
"
;
import
{
ICONES_SVG
}
from
'
../../../domaines/systeme-alimentaire/configuration/icones_svg
'
;
import
{
Bouton
}
from
'
../../base/Bouton
'
;
import
{
MenuIndicateurs
,
OptionsMenuIndicateurs
}
from
'
./MenuIndicateurs
'
;
declare
global
{
interface
HTMLElementTagNameMap
{
'
c-menu-
indicateurs-glissant
'
:
MenuIndicateurs
Glissant
;
'
c-menu-
recherche-territoire-glissant
'
:
MenuRechercheTerritoire
Glissant
;
}
}
@
customElement
(
'
c-menu-
indicateurs
-glissant
'
)
export
class
Menu
Indicateurs
Glissant
extends
LitElement
{
@
customElement
(
'
c-menu-
recherche-territoire
-glissant
'
)
export
class
Menu
RechercheTerritoire
Glissant
extends
LitElement
{
static
styles
=
css
`
:host {
position: absolute;
...
...
@@ -51,41 +49,45 @@ export class MenuIndicateursGlissant extends LitElement {
header {
border-bottom: solid 2px var(--bleu-marine);
}
.titre {
display: grid;
justify-content: start;
align-items: center;
}
.titre h1 {
margin: auto;
padding: 10px;
color: var(--bleu-marine);
font-size: var(--title4);
}
`
;
@
query
(
'
c-bouton
'
)
private
boutonFermer
!
:
Bouton
;
@
query
(
'
c-menu-indicateurs
'
)
private
menuIndicateurs
!
:
MenuIndicateurs
;
@
state
()
private
options
?:
OptionsMenuIndicateurs
;
render
()
{
return
html
`
<c-panneau-glissant>
${
unsafeSVG
(
ICONES_SVG
.
c
ou
chesCart
e
)}
${
unsafeSVG
(
ICONES_SVG
.
l
ou
p
e
)}
<div slot="contenu">
<header>
<c-bouton @click=
${
this
.
fermer
}
libelleTooltip="Fermer">
${
unsafeSVG
(
ICONES_SVG
.
fermer
)}
</c-bouton>
</header>
<c-menu-indicateurs></c-menu-indicateurs>
<div class="titre">
<h1>Rechercher un territoire</h1>
</div>
<c-champ-recherche-territoire
codesCategorieTerritoire=
${
EchelleTerritoriale
.
listerTousLesCodeCategories
.
join
(
'
'
)}
data-cy="champ-recherche-territoire"
@selectionnerTerritoire="
${
this
.
fermer
}
"
/>
</div>
</c-panneau-glissant>
`
;
}
maj
(
options
:
OptionsMenuIndicateurs
)
{
this
.
options
=
options
;
}
updated
()
{
if
(
this
.
options
===
undefined
)
return
;
this
.
menuIndicateurs
.
maj
(
this
.
options
);
}
private
fermer
()
{
this
.
boutonFermer
.
dispatchEvent
(
new
EvenementFermer
());
}
...
...
apps/crater/src/composants/structure/RadioBoutonTerritoires.ts
View file @
9c05aa08
...
...
@@ -2,7 +2,7 @@ import {
CSS_BREAKPOINT_MAX_WIDTH_DESKTOP_PETIT
,
CSS_BREAKPOINT_MAX_WIDTH_MOBILE_PAYSAGE
,
CSS_BREAKPOINT_MAX_WIDTH_TABLETTE
,
EvenementSelectionner
EvenementSelectionner
,
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
{
css
,
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
customElement
,
state
}
from
'
lit/decorators.js
'
;
...
...
apps/crater/src/pages/carte/PageCarte.ts
View file @
9c05aa08
import
'
../../composants/structure/Entete.js
'
;
import
'
../../composants/structure/BarreNavigationEchelleTerritoriale.js
'
;
import
'
../../composants/carte/menu-indicateurs/MenuIndicateurs.js
'
;
import
'
../../composants/carte/menu-indicateurs/MenuIndicateursGlissant.js
'
;
import
'
../../composants/carte/menu-indicateurs/MenuSelectionCoucheGlissant.js
'
;
import
'
../../composants/carte/menu-recherche/MenuRechercheTerritoireGlissant.js
'
;
import
'
../../composants/carte/widget-carte/WidgetCarte.js
'
;
import
'
../../composants/carte/widget-carte/TitreEtLegendeCarte.js
'
;
...
...
@@ -13,15 +14,19 @@ import {
IDS_EVENEMENTS
}
from
'
@lga/commun/build/composants/composants-base
'
;
import
baseRawCss
from
'
@lga/commun/build/composants/composants-base.css
'
;
import
{
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
css
,
html
,
LitElement
,
unsafeCSS
}
from
'
lit
'
;
import
{
customElement
,
property
,
query
}
from
'
lit/decorators.js
'
;
import
{
MenuIndicateurs
,
OptionsIndicateurs
,
OptionsMaillon
}
from
'
../../composants/carte/menu-indicateurs/MenuIndicateurs
'
;
import
{
MenuIndicateursGlissant
}
from
'
../../composants/carte/menu-indicateurs/MenuIndicateursGlissant
'
;
import
{
MenuSelectionCoucheGlissant
}
from
'
../../composants/carte/menu-indicateurs/MenuSelectionCoucheGlissant
'
;
import
{
MenuRechercheTerritoireGlissant
}
from
"
../../composants/carte/menu-recherche/MenuRechercheTerritoireGlissant
"
;
import
{
TitreEtLegendeCarte
}
from
'
../../composants/carte/widget-carte/TitreEtLegendeCarte
'
;
import
{
WidgetCarte
}
from
'
../../composants/carte/widget-carte/WidgetCarte
'
;
import
{
BarreNavigationEchelleTerritoriale
}
from
'
../../composants/structure/BarreNavigationEchelleTerritoriale
'
;
import
{
Entete
}
from
'
../../composants/structure/Entete
'
;
import
{
OptionsBoutonsTerritoires
}
from
"
../../composants/structure/RadioBoutonTerritoires
"
;
import
{
DomaineCarte
,
EtatCarte
}
from
'
../../domaines/carte/DomaineCarte
'
;
import
{
EchelleTerritoriale
}
from
'
../../domaines/carte/EchelleTerritoriale
'
;
import
{
IndicateurCarte
,
Maillon
}
from
'
../../domaines/systeme-alimentaire
'
;
...
...
@@ -38,7 +43,15 @@ import { ControleurCarte } from './ControleurCarte';
@
customElement
(
'
c-page-carte
'
)
export
class
PageCarte
extends
LitElement
{
static
styles
=
[
unsafeCSS
(
baseRawCss
),
unsafeCSS
(
carteRawCss
)];
static
styles
=
[
css
`
.top-50-px {
top: 50px;
}
`
,
unsafeCSS
(
baseRawCss
),
unsafeCSS
(
carteRawCss
)
];
private
controleurCarte
=
new
ControleurCarte
();
...
...
@@ -56,7 +69,8 @@ export class PageCarte extends LitElement {
@
query
(
'
c-entete
'
)
private
entete
!
:
Entete
;
@
query
(
'
c-barre-navigation-echelle-territoriale
'
)
private
barreNavigationEchelleTerritoriale
!
:
BarreNavigationEchelleTerritoriale
;
@
query
(
'
c-menu-indicateurs
'
)
private
menuIndicateursFixe
!
:
MenuIndicateurs
;
@
query
(
'
c-menu-indicateurs-glissant
'
)
private
menuIndicateursGlissant
!
:
MenuIndicateursGlissant
;
@
query
(
'
c-menu-selection-couche-glissant
'
)
private
menuSelectionCoucheGlissant
!
:
MenuSelectionCoucheGlissant
;
@
query
(
'
c-menu-recherche-territoire-glissant
'
)
private
menuRechercheTerritoireGlissant
!
:
MenuRechercheTerritoireGlissant
;
@
query
(
'
c-titre-et-legende-carte
'
)
private
titreEtLegendeCarte
!
:
TitreEtLegendeCarte
;
@
query
(
'
c-carte
'
)
private
carte
!
:
WidgetCarte
;
...
...
@@ -72,7 +86,8 @@ export class PageCarte extends LitElement {
<c-menu-indicateurs id="carte__menu-choix-indicateur-dans-panneau-statique"></c-menu-indicateurs>
</section>
<section id="section-carte">
<c-menu-indicateurs-glissant class="masquer-par-defaut afficher-sur-tablette"></c-menu-indicateurs-glissant>
<c-menu-recherche-territoire-glissant class="masquer-par-defaut afficher-sur-tablette"></c-menu-recherche-territoire-glissant>
<c-menu-selection-couche-glissant class="masquer-par-defaut afficher-sur-tablette top-50-px"></c-menu-selection-couche-glissant>
<c-titre-et-legende-carte></c-titre-et-legende-carte>
<c-carte autoriserZoom autoriserMouvements></c-carte>
</section>
...
...
@@ -96,12 +111,20 @@ export class PageCarte extends LitElement {
icone
:
maillon
.
icone
}));
const
listeBoutonsTerritoires
:
OptionsBoutonsTerritoires
=
{
boutons
:
EchelleTerritoriale
.
listerToutes
.
map
((
echelle
:
EchelleTerritoriale
)
=>
({
id
:
echelle
.
id
,
libelle
:
echelle
.
libelle
})),
idBoutonActif
:
this
.
domaineCarte
.
getEchelleTerritorialeActive
().
id
}
const
optionsMenuIndicateurs
=
{
maillons
:
listeMaillons
,
indicateurs
:
listeIndicateurs
,
idIndicateurActif
:
this
.
idIndicateur
idIndicateurActif
:
this
.
idIndicateur
,
};
this
.
menu
Indicateurs
Glissant
.
maj
(
optionsMenuIndicateurs
);
this
.
menu
SelectionCouche
Glissant
.
maj
(
optionsMenuIndicateurs
,
listeBoutonsTerritoires
);
this
.
menuIndicateursFixe
.
maj
(
optionsMenuIndicateurs
);
switch
(
this
.
domaineCarte
.
getEtat
())
{
...
...
@@ -160,9 +183,9 @@ export class PageCarte extends LitElement {
}
firstUpdated
()
{
this
.
menu
Indicateurs
Glissant
.
addEventListener
(
this
.
menu
SelectionCouche
Glissant
.
addEventListener
(
IDS_EVENEMENTS
.
selectionner
,
(
IDS_EVENEMENTS
.
selectionner
,
(
e
:
Event
)
=>
this
.
actionModifierIndicateur
Actif
((
<
EvenementSelectionner
>
e
).
detail
.
idItemSelectionne
))
(
IDS_EVENEMENTS
.
selectionner
,
(
e
:
Event
)
=>
this
.
actionModifier
EchelleTerritorialeOu
Indicateur
((
<
EvenementSelectionner
>
e
).
detail
.
idItemSelectionne
))
);
this
.
menuIndicateursFixe
.
addEventListener
(
IDS_EVENEMENTS
.
selectionner
,
...
...
@@ -175,8 +198,21 @@ export class PageCarte extends LitElement {
this
.
entete
.
addEventListener
(
IDS_EVENEMENTS
.
selectionnerTerritoire
,
(
e
:
Event
)
=>
this
.
actionNouveauTerritoire
((
<
EvenementSelectionnerTerritoire
>
e
).
detail
.
idTerritoireCrater
)
);
this
.
menuRechercheTerritoireGlissant
.
addEventListener
(
IDS_EVENEMENTS
.
selectionnerTerritoire
,
(
e
:
Event
)
=>
this
.
actionNouveauTerritoire
((
<
EvenementSelectionnerTerritoire
>
e
).
detail
.
idTerritoireCrater
)
);
}
actionModifierEchelleTerritorialeOuIndicateur
=
(
idItemSelectionne
:
string
)
=>
{
const
listeTousLesCodeCategories
:
string
[]
=
EchelleTerritoriale
.
listerToutes
.
map
((
echelle
:
EchelleTerritoriale
)
=>
echelle
.
id
)
if
(
listeTousLesCodeCategories
.
includes
(
idItemSelectionne
))
{
this
.
actionModifierEchelleTerritorialeCarte
(
idItemSelectionne
)
}
else
{
// sinon on suppose que c'est un id d'indicateur
this
.
actionModifierIndicateurActif
(
idItemSelectionne
)
}
};
actionModifierIndicateurActif
=
(
idIndicateur
:
string
)
=>
{
this
.
domaineCarte
.
majIndicateurActif
(
idIndicateur
);
changerParametreUrl
(
PARAMETRE_URL_IDENTIFIANT_INDICATEUR
,
idIndicateur
);
...
...
apps/crater/src/pages/diagnostic/PageDiagnostic.ts
View file @
9c05aa08
...
...
@@ -88,7 +88,7 @@ export class PageDiagnostic extends LitElement {
class="masquer-sur-desktop-petit masquer-dans-pdf"
idSectionActive=
${
this
.
section
}
></c-menu-navigation-sections>`
)}
;
)}
${
choose
(
this
.
section
,
[
...
...
modules/commun/src/composants/champ-recherche-territoire/ChampRechercheTerritoire.ts
View file @
9c05aa08
...
...
@@ -3,7 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import
{
unsafeHTML
}
from
'
lit/directives/unsafe-html.js
'
;
import
{
getApiBaseUrl
}
from
'
../../env/config-baseurl
'
;
import
{
EvenementErreur
,
EvenementReinitialiser
,
EvenementSelectionnerTerritoire
}
from
'
../composants-base
'
;
import
{
EvenementErreur
,
EvenementFermer
,
EvenementReinitialiser
,
EvenementSelectionnerTerritoire
,
}
from
'
../composants-base
'
;
import
iconeLoupeMonochrome
from
'
./loupe.svg
'
;
import
{
chargerListeSuggestionsTerritoires
}
from
'
./requete-api-suggestions-territoires
'
;
import
{
SuggestionTerritoire
}
from
'
./SuggestionTerritoire
'
;
...
...
@@ -282,7 +286,6 @@ export class ChampRechercheTerritoire extends LitElement {
}
private
emettreEvtReinitialiser
()
{
console
.
log
(
'
Reinitialiser
'
);
this
.
dispatchEvent
(
new
EvenementReinitialiser
());
}
...
...
modules/commun/src/composants/composants-base.css
View file @
9c05aa08
...
...
@@ -613,4 +613,3 @@ legend {
display
:
block
;
}
}
modules/commun/src/composants/composants-base.ts
View file @
9c05aa08
...
...
@@ -17,7 +17,7 @@ export const IDS_EVENEMENTS = {
selectionner
:
'
selectionner
'
,
selectionnerTerritoire
:
'
selectionnerTerritoire
'
,
reinitialiser
:
'
reinitialiser
'
,
deplacerCarte
:
'
deplacer-carte
'
deplacerCarte
:
'
deplacer-carte
'
,
};
export
class
EvenementCrater
<
T
>
extends
CustomEvent
<
T
>
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment