Map RER A, afficher informations au clic

Map RER A, afficher informations au clic - Javascript/Node.js - Programmation

Marsh Posté le 28-09-2020 à 11:16:36    

Bonjour à tous,
 
Pour le taf je suis en train de créer une carte de suivi des travaux du RER A.
 
J'aimerais que les informations qui s'affichent lors du survol du nom d'une gare à la souris, s'affichent également et reste affichées, lorsque je clique sur le nom d'une gare.
 
Après avoir checker sur le net, il me semble qu'il m'est impossible de le faire via du CSS mais du JS.
Avez-vous des idées ?
 
Je vous remercie d'avance  

Reply

Marsh Posté le 28-09-2020 à 11:16:36   

Reply

Marsh Posté le 28-09-2020 à 13:54:53    

C'est un peu vague comme question, on peut parfois "tourner autour" du problème en css avec les pseudo class :active mais effectivement il y'a souvent besoin de faire encore du js pour ce genre de pop-up informative...
 
Y'a aussi des bidouilles en pure css pour faire des animations de menu déroulant avec des input donc tout est possible, des idées (comme tu le dit), on peut en avoir, il faut par contre définir le besoin réel (contrainte de navigateur, contrainte de CMS ou de framework, etc.).


---------------
D3
Reply

Marsh Posté le 28-09-2020 à 14:41:31    

Merci de ta réponse,
 
Je voudrais juste que le texte qui s'affiche lorsque je survole le nom d'une gare, reste en place lors du clic.
Les informations doivent rester où elle s'affichent.
 
Voici la map en lien :  
 
https://codepen.io/gkerfers/pen/BaNpzdR

Reply

Marsh Posté le 28-09-2020 à 15:21:54    

Bon ben on avances ! ^^
Déjà ton truc c'est plus du svg que de l'html, modifier des svg en css (et même en js) c'est pas forcément anodin.
 
Est ce que tu as une contrainte de navigateur (genre pour afficher sur un TV connecté dans un lieu spécifique) ou alors faut être compatible avec le plus grand nombre de navigateur possible (y compris mobile ?), pacque tout n'est pas forecement possible partout...


---------------
D3
Reply

Marsh Posté le 29-09-2020 à 08:11:52    

Si tu as d'autres besoins d'interactivité c'est pas envisageable de faire ca en html 5 (canvas) ?


---------------
Topic .Net - C# @ Prog
Reply

Marsh Posté le 30-09-2020 à 09:24:00    

Salut Mechkurt, non juste un écran de PC portable simple et un écran 24/27".
C'est juste une map que plusieurs personnes pourront checker en interne.

Reply

Marsh Posté le 30-09-2020 à 11:15:46    

Je suis retourné voir et en fait tu as déjà du javascript dans ton truc, donc suffit d'ajouter des onclick qui ajoute une classe (et qui supprimes tous les autre noeuds l'ayant) et dans ta css faire le même display block que tu fait pour les :hover...
 
D'ailleurs si tu pouvais nettoyer un peu ton codepen en mettant juste le svg dans l'html, le contenu de <script> dans javascript et le contenu de <style> dans css on y verrait plus clair ! ^^
 
Ca donnerait quelque chose comme ça pour le css :

Code :
  1. .ville.clicked > text.desc {display: block;}


Et un truc du genre pour le javascript :

Code :
  1. var villes= document.querySelectorAll('.ville');
  2.     // Cercle des stations
  3.     villes.forEach(element => {
  4.         element.onclick = function(e){
  5.             //on masque tous les elements prcedement cliqué
  6.             document.querySelectorAll('.ville.clicked').classList.remove('clicked');
  7.             //on ajoute la classe pour celui ci
  8.             element.classList.add('clicked');
  9.         }
  10.     });


---------------
D3
Reply

Marsh Posté le 30-09-2020 à 14:43:58    

jeanmichjeanmich a écrit :

Bonjour à tous,
 
Je suis en pleine création de map de suivi travaux pour le RER A.
 
Cette map est en .SVG.
 
voici le lien :https://codepen.io/gkerfers/pen/BaNpzdR
 
Je bloque sur les fonctions onclicks.
 
VOICI LE RESUME DU FONCTIONNEMENT DE LA MAP
Chaque logo d'une gare représente un type de travaux.
Lorsque je clique sur un logo, la couleur de ce dernier change.
Par exemple, lorsque je clique sur un logo, il passe au orange, cela montre que ce type de travaux est en cours de travaux…
Le passage de couleur d'un logo ou plusieurs influe sur la couleur d'un cercle d'une gare.
 
CE QUE J'ARRIVE A FAIRE :
 
1) Lorsqu'un symbole passe au orange, la couleur du cercle de la gare (qui était initialement blanc) passe au orange.
2) Lorsque tous les symboles sont au vert, la couleur du cercle de la gare passe au vert.
3) Lorsque tous les symboles sont au noir, la couleur du cercle de la gare est blanc.
 
Nb: Je ne l'ai fait que pour la gare de Saint-Germain-en-Laye
 
CE QUE J'AIMERAIS FAIRE:
 
1) Lorsque tous les logos sont noirs, la couleur du cercle de la gare en question est blanc.
 
2) Lorsque la couleur d'un des deux logos "Système de Téléphonie Avancée" et "Système d'Aide à l'Exploitation (AGS6)" passe au orange :
--> le logo Phase 2.1 passe au orange et la couleur du cercle de la gare passe également au orange
 
3) Lorsque les logos "Système de Téléphonie Avancée" et "Système d'Aide à l'Exploitation (AGS6)" sont au vert :
--> le logo Phase 2.1 passe au vert et la couleur du cercle de la gare repasse au blanc (couleur initiale)
 
4) Lorsque la couleur d'un des trois logos "Sonorisation locale" et "Nouveau pupitre de supervision" et "Volume Technique Protégé" passe au orange :
--> le logo Phase 2.2 passe au orange et la couleur du cercle de la gare passe au orange
Nb : le logo phase 2.1 reste au vert
Nb2 : on effectue d'abord les travaux phase 1 ensuite les travaux phase 2
 
5) Lorsque la couleur d'un des trois logos "Sonorisation locale" et "Nouveau pupitre de supervision" et "Volume Technique Protégé" sont au vert :
--> le logo Phase 2.2 passe au vert et la couleur du cercle de la gare passe au vert
Nb : le logo phase 2.1 est également au vert
 
Si quelqu'un pourrait m'aider ça serait super cool de votre part


 
 
Tu devrais nettoyer un peu ton projet et simplifier (séparer) ton code entre informations (le svg dans ton bloc html), son apparence (le css dans le bloc idoine) et l’interactivité (dans le bloc javascript).
 
Il serait peut être plus simple pour toi d'avoir des classes step1 step2 step3 associé à tes noeuds en javascript lors des clicks successif et un affichage correspondant en css...


---------------
D3
Reply

Marsh Posté le 30-09-2020 à 16:09:47    

Je vais faire ça, c'est vrai que ce n'est pas très facile de compréhension vu la longueur du code.
Je vais tester tes lignes pour voir si ça fonctionne merci :)  
Je reviens vers toi après.
Pour l'autre post je trouvais ça plus simple de le séparer.
Désolé pour le "spam" du coup

Reply

Marsh Posté le 30-09-2020 à 16:50:24    

J'ai essayé tes lignes et ça ne fonctionne pas, tu es sûr du css ?
J'ai rangé le codepen comme il faut

Reply

Marsh Posté le 30-09-2020 à 16:50:24   

Reply

Marsh Posté le 30-09-2020 à 17:22:28    

Je suis repartis de ton truc mais y'a pas mon code (et tu as encore des trucs en trop comme la balise style dans le css et idem pour l'html, vire tous ce qui n'est pas le svg).
 
En ajoutant mon code j'ai vu que y'avais un soucis avec la partie qui éteint les zones :

Code :
  1. document.querySelectorAll('.ville.clicked').classList.remove('clicked')


Ce n'est pas sémantiquement juste, je supposes qu'il faudrait faire un foreach sur le document.querySelectorAll('.ville.clicked') car la on a pas accès à la propriété classList (désolé, j'ai tellement l'habitude de Jquery que je ne suis pas très à l'aise en javascript vanilla).
Si tu commentes cette ligne ça fonctionne (sauf qu'il s'allume les uns par dessus les autres).
 
Sinon je pensais à un truc, tu te rends compte qu'il n'ya pour le moment aucune persistance des données et que si tu fermes le navigateur du portable, aucune info d'état ne sera conservé ?


---------------
D3
Reply

Marsh Posté le 05-10-2020 à 10:26:55    

Salut Mechkurt !
Désolé mais je ne suis vraiment pas à l'aise en javascript ...
Tu ferais cette manip de quelle manière du coup ?
Je vais remettre ton code.
 
C'est une map qui sera consultable en interne à la RATP.
En gros, j'enregistrerai les données en faisant clic droit + enregistré sous firefox, ce qui créera une nouvelle map (un nouveau fichier .Html)
 
Pour modifier ensuite les informations sans passer par le code, j'utiliserai cette ligne java suivante :
<a href="javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200">Modifier date de Début et/ou de Fin de travaux</a>  
Cette ligne me permettra de supprimer, ajouter, modifier n'importe quel texte.

Reply

Marsh Posté le 05-10-2020 à 14:51:39    

Code :
  1. var villes= document.querySelectorAll('.ville');
  2.     // Cercle des stations
  3.     villes.forEach(element => {
  4.         element.onclick = function(e){
  5.             //on masque tous les elements prcedement cliqué
  6.            var tmp =  document.querySelectorAll('.ville.clicked');
  7.           villes.forEach(element => {
  8.           element.classList.remove('clicked');
  9.           });
  10.             //on ajoute la classe pour celui ci
  11.             element.classList.add('clicked');
  12.         }
  13.     });


---------------
D3
Reply

Marsh Posté le 05-10-2020 à 16:53:39    

Super ça fonctionne !  
 
Connais-tu la fonction pour "désafficher" le texte ?
 
BTW:
Je viens de trouver la solution pour les couleurs des logos
Je mettrai à jour la carte, lorsqu'elle sera entièrement finie (il faut que je modifie gare par gare et ça prend pas mal de temps :) )

Reply

Marsh Posté le 06-10-2020 à 11:53:15    

Code :
  1. //on masque tous les elements prcedement cliqué
  2. var tmp =  document.querySelectorAll('.ville.clicked');
  3. villes.forEach(element => {
  4.     element.classList.remove('clicked');
  5. });


---------------
D3
Reply

Marsh Posté le 07-10-2020 à 11:39:08    

Salut Mechkurt et merci pour ton aide :)  
 
J'ai remis à jour la map et j'ai un petit soucis:
 
https://codepen.io/gkerfers/pen/BaNpzdR
 
Il y a un conflit entre l'automatisation des couleurs des logos/cercle de gare et l'affichage des informations gare.
 
Lorsque je sors les informations gare du groupe <g class="stations-infos"> et que je mets le tout dans <g class="ville"> (donc au tout début, après le <circle id=...> ) tout fonctionne mais l'automatisation des couleurs des logos ne fonctionne plus.
 
Lorsque je le remets (dans <g class="stations-infos"> ), l'automatisation des couleurs fonctionne mais l'affichage des informations gare ne fonctionne plus.
 
J'aimerais (si c'est possible) que:
- le hover fonctionne
- lorsque je clique sur le nom d'une gare, ses informations s'affichent
- lorsque je reclique sur le nom de cette gare, ses informations se "désaffichent"
- ou lorsque je clique sur le nom d'une autre gare, les information de la nouvelle gare s'affiche (et de l'autre se "désaffiche)
 
J'ai l'impression que je ne peux pas faire ça, à cause de ce problème de groupe, ou mon java concernant l'automatisation des couleurs est caduque ...
 
Je te remercie :)  
 

Reply

Marsh Posté le 07-10-2020 à 12:29:36    

J'ai trouvé la solution :)  
Par contre je n'arrive pas à "désafficher" en cliquant sur le nom de la gare en question exemple :
Je clique sur le nom de la gare de La Défense  
--> les infos de La Défense s'affichent
Je reclique sur le nom de la gare de La Défense
--> les infos de La Défense reste affichées
 
La seule manière de "désafficher" est de cliquer sur le nom d'une autre gare.
Tu aurais la soluce ?
 
Je te remercie :)

Reply

Marsh Posté le 09-10-2020 à 10:38:19    

Hello Mechkurt,
J'ai remis la map à jour : https://codepen.io/gkerfers/pen/BaNpzdR
J'ai retourné le truc, mais je n'arrive pas à faire disparaitre les informations gares qui s'affichent au clic.
J'aimerais lorsque je reclique sur le nom de la gare que les informations gare se "désaffichent".
Aurais-tu une idée ?
 

Reply

Marsh Posté le 09-10-2020 à 13:58:12    

Quelque chose comme ca ?

Code :
  1. // Variables
  2. var circles = document.querySelectorAll(".ville circle" );
  3. var stationInfos = document.querySelectorAll(".station-infos" );
  4. var stationIcon = document.querySelectorAll(".station-icon" );
  5. var gareIcon = document.querySelectorAll(".gare-icon" );
  6. var tcIcon = document.querySelectorAll(".tc-icon" );
  8. // Icones des stations phase 1
  9. for (let n = 0; n < stationIcon.length; n++) {
  10.   let nbclick = 0;
  12.   stationIcon[n].onclick = function (e) {
  13.     nbclick += 1;
  14.     // Au 5eme clique on reprend à 0
  15.     if (nbclick == 4) nbclick = 0;
  17.     let stationCircle = this.parentNode.previousElementSibling;
  18.     stationCircle.style.fill = "orange";
  20.     switch (nbclick) {
  21.       case 1:
  22.         this.style.fill = "orange";
  23.         break;
  24.       case 2:
  25.         this.style.fill = "deepskyblue";
  26.         break;
  27.       case 3:
  28.         this.style.fill = "limegreen";
  29.         break;
  30.       default:
  31.         this.style.fill = "black";
  32.         break;
  33.     }
  35.     let thisStationIcons = this.parentNode.querySelectorAll(".station-icon" );
  36.     let nbGreen = 0;
  37.     let nbBlack = 0;
  38.     let nbOrange = 0;
  40.     thisStationIcons.forEach((element) => {
  41.       // Phase 1 vert = icon vert
  42.       //if(element.style.fill == "limegreen" ) nbGreen+1;
  43.       //if(nbGreen == thisstationicons.lenght) .style.fill='limegreen'
  45.       // Tous verts
  46.       if (element.style.fill == "limegreen" ) nbGreen += 1;
  47.       if (nbGreen == thisStationIcons.length)
  48.         stationCircle.style.fill = "white";
  50.       // Tous noirs
  51.       if (element.style.fill == "black" ) nbBlack += 1;
  52.       if (nbBlack == thisStationIcons.length) {
  53.         stationCircle.style.fill = "white";
  54.         if (stationCircle.classList.contains("not-click" ))
  55.           stationCircle.classList.remove("not-click" );
  56.       }
  58.       // A partir d'un orange
  59.       if (element.style.fill == "orange" ) nbOrange += 1;
  60.       if (nbOrange == 1) {
  61.         stationCircle.classList.add("not-click" );
  62.       }
  63.     });
  64.   };
  65. }
  67. // Icones des stations phase 2
  68. for (let n = 0; n < gareIcon.length; n++) {
  69.   let nbclick = 0;
  71.   gareIcon[n].onclick = function (e) {
  72.     nbclick += 1;
  73.     // Au 5eme clique on reprend à 0
  74.     if (nbclick == 4) nbclick = 0;
  76.     let stationCircle = this.parentNode.previousElementSibling;
  77.     stationCircle.style.fill = "orange";
  79.     switch (nbclick) {
  80.       case 1:
  81.         this.style.fill = "orange";
  82.         break;
  83.       case 2:
  84.         this.style.fill = "deepskyblue";
  85.         break;
  86.       case 3:
  87.         this.style.fill = "limegreen";
  88.         break;
  89.       default:
  90.         this.style.fill = "black";
  91.         break;
  92.     }
  94.     let thisgareIcon = this.parentNode.querySelectorAll(".gare-icon" );
  95.     let nbGreen = 0;
  96.     let nbBlack = 0;
  97.     let nbOrange = 0;
  99.     thisgareIcon.forEach((element) => {
  100.       // Tous verts
  101.       if (element.style.fill == "limegreen" ) nbGreen += 1;
  102.       if (nbGreen == thisgareIcon.length)
  103.         stationCircle.style.fill = "limegreen";
  105.       // Tous noirs
  106.       if (element.style.fill == "black" ) nbBlack += 1;
  107.       if (nbBlack == thisgareIcon.length) {
  108.         stationCircle.style.fill = "white";
  109.         if (stationCircle.classList.contains("not-click" ))
  110.           stationCircle.classList.remove("not-click" );
  111.       }
  113.       // A partir d'un orange
  114.       if (element.style.fill == "orange" ) nbOrange += 1;
  115.       if (nbOrange == 1) {
  116.         stationCircle.classList.add("not-click" );
  117.       }
  118.     });
  119.   };
  120. }
  122. // Icone des stations du TC
  123. for (let n = 0; n < tcIcon.length; n++) {
  124.   let nbclick = 0;
  126.   tcIcon[n].onclick = function (e) {
  127.     nbclick += 1;
  128.     // Au 5eme clique on reprend à 0
  129.     if (nbclick == 4) nbclick = 0;
  131.     let stationCircle = this.parentNode.previousElementSibling;
  132.     stationCircle.style.fill = "orange";
  134.     switch (nbclick) {
  135.       case 1:
  136.         this.style.fill = "orange";
  137.         break;
  138.       case 2:
  139.         this.style.fill = "deepskyblue";
  140.         break;
  141.       case 3:
  142.         this.style.fill = "limegreen";
  143.         break;
  144.       default:
  145.         this.style.fill = "black";
  146.         break;
  147.     }
  149.     let thistcIcon = this.parentNode.querySelectorAll(".tc-icon" );
  150.     let nbGreen = 0;
  151.     let nbBlack = 0;
  152.     let nbOrange = 0;
  154.     thistcIcon.forEach((element) => {
  155.       // Tous verts
  156.       if (element.style.fill == "limegreen" ) nbGreen += 1;
  157.       if (nbGreen == thistcIcon.length) stationCircle.style.fill = "limegreen";
  159.       // Tous noirs
  160.       if (element.style.fill == "black" ) nbBlack += 1;
  161.       if (nbBlack == thistcIcon.length) {
  162.         stationCircle.style.fill = "white";
  163.         if (stationCircle.classList.contains("not-click" ))
  164.           stationCircle.classList.remove("not-click" );
  165.       }
  167.       // A partir d'un orange
  168.       if (element.style.fill == "orange" ) nbOrange += 1;
  169.       if (nbOrange == 1) {
  170.         stationCircle.classList.add("not-click" );
  171.       }
  172.     });
  173.   };
  174. }
  175. var villes = document.querySelectorAll(".ville" );
  176. // Cercle des stations
  177. villes.forEach((element) => {
  178.   element.onclick = function (e) {
  179.     var show = true;
  180.     if (element.classList.contains("clicked" )) {
  181.       show = false;
  182.     }
  183.     //on masque tous les elements prcedement cliqué
  184.     HideClicked();
  185.     if (show) {
  186.       //on ajoute la classe pour celui ci
  187.       element.classList.add("clicked" );
  188.     }
  189.   };
  190. });
  191. function HideClicked() {
  192.   //on masque tous les elements prcedement cliqué
  193.   var tmp = document.querySelectorAll(".ville.clicked" );
  194.   villes.forEach((element) => {
  195.     element.classList.remove("clicked" );
  196.   });
  197. }


---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed