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
e4c54ed8
Commit
e4c54ed8
authored
Mar 04, 2022
by
Lionel DURAND
Browse files
20220304-evols_mineures_recherche_et_carto
parents
40b682f6
ea9791a8
Changes
39
Expand all
Hide whitespace changes
Inline
Side-by-side
cypress/integration/carte/carte_verifier_couleurs_territoires_selon_echelle.js
View file @
e4c54ed8
...
...
@@ -11,7 +11,7 @@ context("Test de vérification des couleurs des territoires après un changement
cy
.
viewport
(
1500
,
1000
);
cy
.
visit
(
'
carte.html
'
);
cy
.
get
(
'
#boutons__choix-echelle-territoriale__regions
'
).
click
({
force
:
true
});
cy
.
get
(
'
#
carte__groupe-
boutons__choix-echelle-territoriale__regions
'
).
click
({
force
:
true
});
cy
.
get
(
'
.cmp__carte__id-territoire__R-24
'
).
should
(
'
have.attr
'
,
'
fill
'
,
COULEUR_TERRITOIRE_NOTE_8
);
cy
.
get
(
'
.cmp__carte__id-territoire__R-44
'
).
should
(
'
have.attr
'
,
'
fill
'
,
COULEUR_TERRITOIRE_NOTE_10
);
...
...
cypress/integration/carte/carte_verifier_couleurs_territoires_selon_maillon.js
View file @
e4c54ed8
...
...
@@ -26,7 +26,7 @@ context('Test de vérification des couleurs des territoires selon leur note sur
// Permet d'attendre que la carte soit chargée avant de changer d'axe
cy
.
get
(
'
.cmp__carte__id-territoire__D-92
'
).
should
(
'
have.attr
'
,
'
fill
'
,
COULEUR_TERRITOIRE_NOTE_0
);
// Changer d'axe
cy
.
get
(
'
#boutons__choix-axe__pratiques-agricoles
'
).
click
({
force
:
true
});
cy
.
get
(
'
#
carte__groupe-
boutons__choix-axe__pratiques-agricoles
'
).
click
({
force
:
true
});
cy
.
get
(
'
.cmp__carte__id-territoire__D-75
'
).
should
(
'
have.attr
'
,
'
fill
'
,
COULEUR_TERRITOIRE_DONNEES_NON_DISPONIBLES
);
cy
.
get
(
'
.cmp__carte__id-territoire__D-55
'
).
should
(
'
have.attr
'
,
'
fill
'
,
COULEUR_TERRITOIRE_NOTE_3
);
...
...
cypress/integration/diagnostic/afficher_diagnostic_desktop_et_mobile_spec.js
View file @
e4c54ed8
...
...
@@ -7,7 +7,7 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
//given
cy
.
viewport
(
1500
,
1000
);
//when
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
aur
'
,
5
);
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
aur
'
,
10
);
// then
cy
.
get
(
'
#barre-menu-territoires
'
).
should
(
'
be.visible
'
);
cy
.
get
(
'
[data-cy^=barre-nav-item-C] h1
'
).
should
(
'
be.visible
'
);
...
...
@@ -26,7 +26,7 @@ context("Test l'affichage d'un diagnostic en mode desktop et mobile", () => {
//given
cy
.
viewport
(
320
,
568
);
//when
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
aur
'
,
5
);
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
aur
'
,
10
);
// then
cy
.
get
(
'
#barre-menu-territoires
'
).
should
(
'
be.visible
'
);
cy
.
get
(
'
[data-cy^=barre-nav-item-C] h1
'
).
should
(
'
be.hidden
'
);
...
...
cypress/integration/diagnostic/rechercher_territoire_spec.js
View file @
e4c54ed8
...
...
@@ -3,12 +3,8 @@ context('Test recherche territoire et liste de suggestions', () => {
cy
.
visit
(
'
index.html
'
);
});
it
(
'
Afficher 5 éléments maxi sur une recherche texte
'
,
()
=>
{
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
saint
'
,
5
);
});
it
(
'
Afficher 10 éléments maxi sur une recherche par code postal
'
,
()
=>
{
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
02000
'
,
10
);
it
(
'
Afficher 10 éléments maxi sur une recherche
'
,
()
=>
{
cy
.
rechercherTerritoire
(
'
index__champ-recherche__cmp-recherche__input
'
,
'
saint
'
,
10
);
});
it
(
'
Rechercher depuis la barre de navigation en mode desktop
'
,
()
=>
{
...
...
@@ -22,7 +18,7 @@ context('Test recherche territoire et liste de suggestions', () => {
cy
.
get
(
'
[data-cy=barre-nav-bouton-loupe]
'
).
should
(
'
be.hidden
'
);
// recherche
cy
.
rechercherTerritoire
(
'
diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input
'
,
'
aix
'
,
5
);
cy
.
rechercherTerritoire
(
'
diagnostic__entete__titre-et-nav__cmp__champ-recherche__fixe__cmp-recherche__input
'
,
'
aix
'
,
10
);
// verifier resultat
cy
.
get
(
'
.cmp__champ-recherche__territoire__autocomplete
'
).
should
(
'
not.exist
'
);
...
...
@@ -47,7 +43,7 @@ context('Test recherche territoire et liste de suggestions', () => {
cy
.
get
(
'
#diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant
'
).
should
(
'
be.visible
'
);
// verifier autocomplete
cy
.
rechercherTerritoire
(
'
diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant__cmp-recherche__input
'
,
'
aix
'
,
5
);
cy
.
rechercherTerritoire
(
'
diagnostic__entete__titre-et-nav__cmp__champ-recherche__glissant__cmp-recherche__input
'
,
'
aix
'
,
10
);
// verifier resultat
cy
.
get
(
'
.cmp__champ-recherche__territoire__autocomplete
'
).
should
(
'
not.exist
'
);
...
...
src/carte.html
View file @
e4c54ed8
...
...
@@ -33,16 +33,20 @@
<menu
id=
"carte__menu-glissant"
></menu>
<main
class=
"zone-scroll-principal"
>
<section
id=
"section-description-axes"
>
<div
id=
"boutons__choix-axe"
></div>
<div
id=
"contenu__description-axe"
></div>
<div
id=
"boutons__choix-indicateur"
></div>
<section
id=
"section-description"
>
<div
id=
"carte__groupe-boutons__choix-axe"
class=
"masquer-sur-ecran-petit"
></div>
<div
id=
"contenu__description-axe"
class=
"masquer-sur-ecran-petit"
></div>
<div
id=
"carte__menu-indicateurs__choix-indicateur-desktop"
class=
"masquer-sur-ecran-petit"
></div>
<menu
id=
"carte__panneau-glissant__panneau-mobile"
>
<div
id=
"carte__menu-indicateurs__choix-indicateur-mobile"
></div>
</menu>
</section>
<section
id=
"section-carte"
>
<div
id=
"controles-carte"
>
<div
id=
"boutons__choix-echelle-territoriale"
></div>
<div
id=
"carte__groupe-boutons__choix-echelle-territoriale"
></div>
<div
id=
"carte__bouton__afficher-panneau-indicateurs"
class=
"masquer-par-defaut afficher-sur-ecran-petit"
></div>
</div>
<div
id=
"c
rater-map
"
></div>
<div
id=
"c
arte__carte-coloree
"
></div>
</section>
</main>
...
...
src/carte/carte-config.ts
View file @
e4c54ed8
This diff is collapsed.
Click to expand it.
src/carte/carte.css
View file @
e4c54ed8
...
...
@@ -37,21 +37,27 @@ main {
background-color
:
var
(
--c-nav-territoires-arriereplan
);
}
#section-description
-axes
{
#section-description
{
min-height
:
calc
(
100vh
-
var
(
--hauteur-totale-entete
));
padding
:
1rem
2rem
1rem
2rem
;
background-color
:
var
(
--c-carte-arriereplan-section-description
-axes
);
background-color
:
var
(
--c-carte-arriereplan-section-description
);
}
#section-carte
{
position
:
relative
;
}
#c
rater-map
{
#c
arte__carte-coloree
{
background-color
:
var
(
--c-carte-arriereplan-carte
);
height
:
calc
(
100vh
-
var
(
--hauteur-totale-entete
));
}
.leaflet-bottom
{
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
end
;
}
.leaflet-left
{
width
:
25%
;
}
...
...
@@ -60,6 +66,10 @@ main {
width
:
65%
;
}
.leaflet-control
{
background
:
transparent
!important
;
}
.leaflet-control-container
>
*
{
z-index
:
var
(
--z-index-carte-controles
)
!important
;
}
...
...
@@ -100,36 +110,21 @@ main {
text-decoration
:
underline
;
}
/*--------------------------------------
// Detail Section Axes
--------------------------------------*/
/*--------------------------------------
// Section information axes
--------------------------------------*/
#section-description-axes
h1
{
margin-bottom
:
1.0rem
;
color
:
var
(
--c-carte-texte-titre
);
text-transform
:
uppercase
;
font-size
:
var
(
--title2
);
}
/*--------------------------------------
// Groupe de boutons choix de l'axe actif
--------------------------------------*/
#boutons__choix-axe
ul
.cmp__groupe-boutons
{
#
carte__groupe-
boutons__choix-axe
ul
{
padding
:
0rem
0
1.8rem
0
;
white-space
:
nowrap
;
}
#
boutons__choix-axe
.cmp
__groupe-boutons
li
{
#
carte
__groupe-boutons
__choix-axe
li
{
padding
:
0.5em
;
}
#
boutons__choix-axe
.cmp
__groupe-boutons
input
+
label
{
#
carte
__groupe-boutons
__choix-axe
input
+
label
{
background-color
:
transparent
;
color
:
var
(
--c-carte-texte-bouton-axe-inactif
);
padding
:
0.5em
0.5em
;
...
...
@@ -138,72 +133,81 @@ main {
border
:
solid
1px
var
(
--c-carte-fond-bouton-axe-actif
);
}
#
boutons__choix-axe
.cmp
__groupe-boutons
input
:checked
+
label
{
#
carte
__groupe-boutons
__choix-axe
input
:checked
+
label
{
color
:
var
(
--c-texte-base3
);
background-color
:
var
(
--c-carte-fond-bouton-axe-actif
);
box-shadow
:
0
2px
6px
0
var
(
--ombre
);
}
#boutons__choix-axe
.cmp__barre-glissante__fleche-gauche
{
#
carte__groupe-
boutons__choix-axe
.cmp__barre-glissante__fleche-gauche
{
color
:
var
(
--c-carte-fond-bouton-axe-actif
);
background-image
:
linear-gradient
(
to
right
,
var
(
--c-carte-arriereplan
)
30%
,
transparent
);
}
#boutons__choix-axe
.cmp__barre-glissante__fleche-droite
{
#
carte__groupe-
boutons__choix-axe
.cmp__barre-glissante__fleche-droite
{
color
:
var
(
--c-carte-fond-bouton-axe-actif
);
background-image
:
linear-gradient
(
to
left
,
var
(
--c-carte-arriereplan
)
30%
,
transparent
);
}
/*------------------------------------
--
*/
/*
Section axe - zone texte
*/
/*------------------------------------
--
*/
/*
------------------------------------
*/
/*
Composant Menu indicateurs
*/
/*
------------------------------------
*/
#contenu__description-axe
h1
,
#contenu__description-axe
h2
{
color
:
var
(
--c-carte-texte-titre-description-axes
);
.cmp__menu-indicateurs
*,
.cmp__menu-indicateurs
*
:before
,
.cmp__menu-indicateurs
*
:after
{
box-sizing
:
border-box
;
}
#contenu__description-axe
h1
{
font-size
:
var
(
--title3
)
;
.cmp__menu-indicateurs
{
margin
:
0
;
}
#contenu__description-axe
h2
{
font-size
:
var
(
--title4
);
margin-bottom
:
1rem
;
.cmp__menu-indicateurs
input
{
display
:
none
;
}
#contenu__description-axe
h3
{
margin
:
0
0
0.5em
;
font-size
:
var
(
--normal
)
;
color
:
var
(
--c-carte-texte-description-axe
)
;
text-transform
:
uppercase
;
.cmp__menu-indicateurs
li
{
list-style
:
none
;
cursor
:
pointer
;
display
:
inline-block
;
padding
:
0.2em
;
}
#contenu__description-axe
p
{
color
:
var
(
--c-carte-texte-paragraphes-description-axe
);
margin-bottom
:
2em
;
.cmp__menu-indicateurs
input
+
label
{
cursor
:
pointer
;
background-color
:
#a7a7a7
;
padding
:
0.2em
1em
;
user-select
:
none
;
}
.cmp__menu-indicateurs
input
:checked
+
label
{
background-color
:
#fff
;
}
.cmp__menu-indicateurs
p
{
font-size
:
var
(
--smaller1
);
}
/*--------------------------------------*/
/*
Section axe - boutons choix
indicateurs*/
/*
Menu
indicateurs
DESKTOP
*/
/*--------------------------------------*/
#boutons__choix-indicateur
{
#carte__menu-indicateurs__choix-indicateur-desktop
{
height
:
80vh
;
overflow
:
auto
;
margin
:
auto
;
}
#
bouton
s__choix-indicateur
ul
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
ul
{
display
:
flex
;
flex-direction
:
column
;
padding
:
0
;
}
#
bouton
s__choix-indicateur
li
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
li
{
padding
:
0.2rem
;
}
#
bouton
s__choix-indicateur
input
+
label
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
input
+
label
{
background-color
:
white
;
box-shadow
:
0
2px
6px
0
var
(
--ombre
);
border
:
solid
2px
transparent
;
...
...
@@ -215,32 +219,124 @@ main {
border-radius
:
0.2em
;
}
#
bouton
s__choix-indicateur
input
+
label
:hover
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
input
+
label
:hover
{
background-color
:
var
(
--c-carte-indicateur-hover-fond
);
}
#
bouton
s__choix-indicateur
.non-cliquable
input
+
label
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
.non-cliquable
input
+
label
{
background-color
:
var
(
--c-carte-indicateur-indisponible-fond
);
cursor
:
not-allowed
;
}
#
bouton
s__choix-indicateur
input
:checked
+
label
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
input
:checked
+
label
{
border
:
solid
2px
var
(
--c-carte-indicateur-selectionne-bordure
);
cursor
:
inherit
;
}
#
bouton
s__choix-indicateur
h1
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
h1
{
font-size
:
var
(
--smaller1
);
margin
:
0
;
}
#
bouton
s__choix-indicateur
h2
{
#
carte__menu-indicateur
s__choix-indicateur
-desktop
h2
{
font-size
:
var
(
--smaller
);
font-weight
:
normal
;
margin
:
0
;
margin-top
:
1rem
;
}
#carte__menu-indicateurs__choix-indicateur-desktop
svg
{
display
:
none
;
}
/*--------------------------------------*/
/* MOBILE : Panneau glissant de choix d'indicateur*/
/*--------------------------------------*/
#carte__panneau-glissant__panneau-mobile
{
height
:
calc
(
100vh
-
var
(
--hauteur-totale-entete
)
-
0.2rem
);
overflow
:
auto
;
grid-template-columns
:
1
fr
40px
;
grid-template-rows
:
3rem
;
}
#carte__panneau-glissant__panneau-mobile__bouton-fermer
{
grid-column-start
:
2
;
grid-column-end
:
3
;
padding-right
:
0.8rem
;
padding-top
:
0.4rem
;
}
/*--------------------------------------*/
/* MOBILE : Menu de choix d'indicateur*/
/*--------------------------------------*/
#carte__menu-indicateurs__choix-indicateur-mobile
{
margin
:
auto
;
grid-column-start
:
1
;
grid-column-end
:
3
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
ul
{
display
:
flex
;
flex-direction
:
column
;
padding
:
0
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
li
{
padding
:
0.2rem
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
input
+
label
{
background-color
:
white
;
box-shadow
:
0
2px
6px
0
var
(
--ombre
);
border
:
solid
2px
transparent
;
cursor
:
inherit
;
display
:
flex
;
align-items
:
center
;
margin-top
:
0.2rem
;
margin-bottom
:
0.2rem
;
border-radius
:
0.2em
;
padding
:
0.2rem
;
text-align
:
center
;
font-size
:
var
(
--smaller2
);
}
#carte__menu-indicateurs__choix-indicateur-mobile
input
+
label
:hover
{
background-color
:
var
(
--c-carte-indicateur-hover-fond
);
}
#carte__menu-indicateurs__choix-indicateur-mobile
.non-cliquable
input
+
label
{
background-color
:
var
(
--c-carte-indicateur-indisponible-fond
);
cursor
:
not-allowed
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
input
:checked
+
label
{
border
:
solid
2px
var
(
--c-carte-indicateur-selectionne-bordure
);
cursor
:
inherit
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
label
h1
{
font-size
:
var
(
--title4
);
padding-left
:
1rem
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
label
h2
{
display
:
none
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
label
h3
{
display
:
none
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
svg
{
width
:
40px
;
height
:
40px
;
}
#carte__menu-indicateurs__choix-indicateur-mobile
.non-cliquable
{
display
:
none
;
}
/*--------------------------------------*/
/* Detail Section carte */
...
...
@@ -252,31 +348,51 @@ main {
#controles-carte
{
position
:
absolute
;
top
:
1em
;
display
:
flex
;
flex-wrap
:
wrap
;
align-items
:
center
;
justify-content
:
right
;
z-index
:
var
(
--z-index-carte-controles
);
width
:
100%
;
background-color
:
transparent
;
}
#boutons__choix-echelle-territoriale
{
#carte__bouton__afficher-panneau-indicateurs
{
margin
:
0.2rem
;
}
#carte__bouton__afficher-panneau-indicateurs
button
{
width
:
40px
;
height
:
40px
;
border-radius
:
3em
;
background-color
:
var
(
--c-carte-bouton-calques-fond
);
border
:
0
;
}
#carte__bouton__afficher-panneau-indicateurs
label
{
color
:
var
(
--c-carte-bouton-calques
);
}
#carte__groupe-boutons__choix-echelle-territoriale
{
margin
:
auto
;
margin-top
:
0.5rem
;
width
:
min-content
;
}
#boutons__choix-echelle-territoriale
ul
{
#
carte__groupe-
boutons__choix-echelle-territoriale
ul
{
white-space
:
nowrap
;
background-color
:
var
(
--c-carte-groupe-boutons-echelle-territoriale-fond
);
padding
:
0.2em
;
border-radius
:
0.5em
;
}
#boutons__choix-echelle-territoriale
input
+
label
{
#
carte__groupe-
boutons__choix-echelle-territoriale
input
+
label
{
background-color
:
transparent
;
color
:
var
(
--c-carte-fond-bouton-axe-actif
);
border-radius
:
0.5em
;
}
#boutons__choix-echelle-territoriale
input
:checked
+
label
{
#
carte__groupe-
boutons__choix-echelle-territoriale
input
:checked
+
label
{
color
:
var
(
--c-carte-texte-bouton-axe-actif
);
background-color
:
var
(
--c-texte-base3
);
box-shadow
:
0
2px
6px
0
var
(
--ombre
);
...
...
@@ -295,7 +411,6 @@ main {
display
:
flex
;
justify-content
:
left
;
align-items
:
center
;
margin-bottom
:
2em
;
width
:
100%
;
}
...
...
@@ -364,7 +479,6 @@ main {
.titre-carte
{
text-align
:
center
;
float
:
left
!important
;
}
.titre-carte
h1
,
h2
,
h3
{
...
...
@@ -466,24 +580,20 @@ main {
display
:
block
;
}
#crater-map
{
height
:
calc
(
100vh
-
(
var
(
--hauteur-cmp-entete-titre-nav
)
+
var
(
--hauteur-bandeau-choix-axe
)));
}
#contenu__description-axe
,
#section-description-axes
h2
{
display
:
none
;
#carte__carte-coloree
{
height
:
calc
(
100vh
-
(
var
(
--hauteur-cmp-entete-titre-nav
)));
}
#section-description
-axes
{
#section-description
{
min-height
:
min-content
;
padding
:
0
;
}
#boutons__choix-axe
.cmp__groupe-boutons
{
#carte__groupe-boutons__choix-axe
.cmp__menu-indicateurs
{
margin
:
0
;
}
#boutons__choix-axe
.cmp__
groupe-bouton
s
input
+
label
{
#
carte__groupe-
boutons__choix-axe
.cmp__
menu-indicateur
s
input
+
label
{
background-color
:
transparent
;
font-size
:
var
(
--smaller2
);
font-weight
:
bold
;
...
...
@@ -492,7 +602,7 @@ main {
box-shadow
:
none
;
}
#boutons__choix-axe
.cmp__
groupe-bouton
s
input
:checked
+
label
{
#
carte__groupe-
boutons__choix-axe
.cmp__
menu-indicateur
s
input
:checked
+
label
{
color
:
var
(
--c-carte-texte-bouton-axe-inactif
);
background-color
:
transparent
;
border-radius
:
initial
;
...
...
@@ -500,34 +610,29 @@ main {
box-shadow
:
none
;
}
#boutons__choix-indicateur
{
min-height
:
80px
;
}
#boutons__choix-indicateur
ul
{
align-items
:
center
;
.leaflet-popup-content-wrapper
{
max-width
:
320px
;
}
#boutons__choix-axe
ul
.cmp__groupe-boutons
{
padding
:
0rem
0
0.3rem
0
;
.titre-carte
h2
{
display
:
none
!important
;
}
}
#boutons__choix-indicateur
.non-cliquable
{
display
:
none
;
}
@media
screen
and
(
max-width
:
500px
)
{
#boutons__choix-indicateur
input
+
label
{
padding
:
0.2rem
;
text-align
:
center
;
font-size
:
var
(
--smaller2
);
width
:
95vw
;
#carte__menu-indicateurs__choix-indicateur-mobile
input
+
label
{
height
:
60px
;
}
.leaflet-popup-content-wrapper
{
max-width
:
320px
;
#carte__menu-indicateurs__choix-indicateur-mobile
h1
{
display
:
none
;
}
.titre-carte
h2
{
display
:
none
!important
;
#carte__menu-indicateurs__choix-indicateur-mobile
label
h3
{
display
:
block
;
font-size
:
var
(
--smaller3
);
padding-left
:
0.5rem
;
}
}
\ No newline at end of file
}
src/carte/controleurs/AfficheurCarte.ts
View file @
e4c54ed8
import
{
Afficheur
}
from
'
../../commun/controleurs/Afficheur
'
;
import
{
ContenuStatique
,
EnteteTitreEtNavigation
,
GroupeBoutons
,
GroupeBoutonsGlissants
,
MenuGlissant
,
PiedPage
}
from
'
../../commun/vues
'
;
import
{
EnteteTitreEtNavigation
,
GroupeBoutons
,
GroupeBoutonsGlissants
,
MenuGlissant
,
PiedPage
}
from
'
../../commun/vues
'
;
import
{
PanneauGlissant
}
from
'
../../commun/vues/crater/PanneauGlissant
'
;
import
{
Bouton
}
from
'
../../commun/vues/generiques/Bouton
'
;
import
{
EchelleTerritoriale
,
Indicateur
,
PageCarte
}
from
'
../domaines/PageCarte
'
;
import
{
CarteColoree
}
from
'
../vues/CarteColoree
'
;
import
{
MenuIndicateurs
}
from
'
../vues/MenuIndicateurs
'
;
import
{
ControleurCarte
}
from
'
./ControleurCarte
'
;
export
class
AfficheurCarte
implements
Afficheur
<
PageCarte
>
{
...
...
@@ -10,9 +19,11 @@ export class AfficheurCarte implements Afficheur<PageCarte> {
// private enteteRetourDiagnostic: EnteteRetourDiagnostic;
private
piedPage
:
PiedPage
;
private
groupeBoutonsAxes
:
GroupeBoutonsGlissants
;
private
groupeBoutonsIndicateurs
:
GroupeBoutons
;
private
menuIndicateursGauche
:
MenuIndicateurs
;
private
boutonAfficherPanneauIndicateurs
:
Bouton
;
private
panneauIndicateurs
:
PanneauGlissant
;
private
menuIndicateursDansPanneau
:
MenuIndicateurs
;
private
groupeBoutonsEchelles
:
GroupeBoutons
;
private
descriptionAxe
:
ContenuStatique
;
private
carteColoree
:
CarteColoree
;
constructor
(
private
readonly
controleurCarte
:
ControleurCarte
)
{
...
...
@@ -23,11 +34,21 @@ export class AfficheurCarte implements Afficheur<PageCarte> {
});
// this.enteteRetourDiagnostic = new EnteteRetourDiagnostic('carte__entete__retour-diagnostic');
this
.
piedPage
=
new
PiedPage
(
'
cmp__footer
'
);
this
.
descriptionAxe
=
new
ContenuStatique
(
'
contenu__description-axe
'
);
this
.
groupeBoutonsIndicateurs
=
new
GroupeBoutons
(
'
boutons__choix-indicateur
'
);
this
.
carteColoree
=
new
CarteColoree
(
'
crater-map
'
);