Fonction onclick .svg RER A

**jean mich jean mich** · 30/09/2020, 12h09

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

**NoSmoking** · 02/10/2020, 11h13

Bonjour,
il te manque des cas dans ton « cahier des charges », que faut-il faire par exemple si tu as un Noir et un Vert ?

Tu aurais peut-être du faire un tableau des différents états, voire une « table de vérité », souvent cela aide à clarifier et même à approcher une solution.

Je te propose de passer par un compteur de clic sur chaque éléments concernés en lui ajoutant une propriété countClick, par exemple, que tu incrémentes et que tu bornes via un modulo du nombre d'états possibles, dans ton cas 3, Noir, Orange et Vert.

Cela pourrait donner le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// définition des différentes couleurs
const COLOR = "whitesmoke;orange;lightgreen".split(";");
// récup. des éléments cliquables
const oClick = document.querySelectorAll(".click");
// affectation action
oClick.forEach((el) => {
  el.addEventListener("click", (ev) => {
    const count = el.countClick || 0;
    el.countClick = (count + 1) % COLOR.length;
    el.style.backgroundColor = COLOR[el.countClick];
  })
});

Ici seul le changement de couleur de l'élément cliqué est pris en compte.

A chaque clic sur ces éléments il te suffit de récupérer le nombre de clics de chacun, donc leur état, et d'agir en conséquence pour mettre la bonne couleur.
Pour ce faire on peut créer une fonction d'update :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function updateCircle(parent) {
  // éléments à traiter
  const oCircle = parent.querySelector(".circle");
  const oCount = parent.querySelectorAll(".click");
 
  let color = "";                 // restaure couleur par défaut du CSS
  let nbVert = 0;
  let nbOrange = 0;
 
  // récup. état des clicks
  const etats = [0, 0, 0];
  oCount.forEach((el) => {
    etats[el.countClick] += 1;
  });
  // pour plus de clarté
  nbOrange = etats[1];
  nbVert = etats[2];
  // traitement résultat
  if (nbOrange) {
    color = COLOR_NOK;
  }
  else if (nbVert) {
    color = nbVert == oCount.length ? "" : COLOR_OK;
  }
  // affectation de la couleur
  oCircle.style.backgroundColor = color;
}

Il ne reste plus qu'à ajuster le traitement fonction du besoin.

Il est, également, nécessaire d'appeler celle-ci lors d'un clic sur les éléments, on modifie donc le 1st code comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// définition des différentes couleurs
const COLOR = "whitesmoke;orange;lightgreen".split(";");
const COLOR_NOK = COLOR[1];
const COLOR_OK = COLOR[2];
// récup. des éléments cliquables
const oClick = document.querySelectorAll(".click");
// affectation action
oClick.forEach((el) => {
  el.addEventListener("click", (ev) => {
    const count = el.countClick || 0;
    el.countClick = (count + 1) % COLOR.length;
    el.style.backgroundColor = COLOR[el.countClick];
    updateCircle(el.parentNode);
  })
});

L'exemple complet :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi états au clic</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2092219">
<style>
html,body{margin:0;padding:0;font:1em/1.5 Verdana,sans-serif}
h1,h2,h3{margin:.25em 0;color:#069}
time{float:right;margin:.5em;font-size:.9em;color:#888}
main{display:block;margin:auto;max-width:60em}
 
.row {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-bottom: .5em;
  padding: .25em;
  border: 3px double #888;
}
.circle,
.click {
  width: 5em;
  height: 5em;
  margin: .5em;
  border: 1px solid #888;
  text-align: center;
  line-height: 5;
  background-color: whitesmoke;
  cursor: pointer;
}
.circle {
  border-radius: 50%;
  background-color: white;
}
</style>
</head>
<body>
<main>
  <header>
    <time datetime="2020-10-01">Oct. 2020</time>
    <h1>Multi états au clic</h1>
  </header>
  <div class="row">
    <div class="click">Tél.</div>
    <div class="click">Exploit.</div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="click">Sono</div>
    <div class="click">Pupitre</div>
    <div class="click">Volume</div>
    <div class="circle"></div>
  </div>
</main>
<script>
"use strict";
// définition des différentes couleurs
const COLOR = "whitesmoke;orange;lightgreen".split(";");
const COLOR_NOK = COLOR[1];
const COLOR_OK = COLOR[2];
 
function updateCircle(parent) {
  // éléments à traiter
  const oCircle = parent.querySelector(".circle");
  const oCount = parent.querySelectorAll(".click");
 
  let color = "";                 // restaure couleur par défaut du CSS
  let nbVert = 0;
  let nbOrange = 0;
 
  // récup. état des clicks
  const etats = [0, 0, 0];
  oCount.forEach((el) => {
    etats[el.countClick] += 1;
  });
  // pour plus de clarté
  nbOrange = etats[1];
  nbVert = etats[2];
  // traitement résultat
  if (nbOrange) {
    color = COLOR_NOK;
  }
  else if (nbVert) {
    color = nbVert == oCount.length ? "" : COLOR_OK;
  }
  // affectation de la couleur
  oCircle.style.backgroundColor = color;
}
 
// récup. des éléments cliquables
const oClick = document.querySelectorAll(".click");
// affectation action
oClick.forEach((el) => {
  el.addEventListener("click", (ev) => {
    const count = el.countClick || 0;
    el.countClick = (count + 1) % COLOR.length;
    el.style.backgroundColor = COLOR[el.countClick];
    updateCircle(el.parentNode);
  })
});
</script>
</body>
</html>

Voilà pour un principe, à toi de l'adapter à ton besoin

**jean mich jean mich** · 05/10/2020, 11h07

La carte est une map de suivi travaux de la ligne RER A pour un projet en particulier :

Chaque couleur de logo indique un état des travaux :
Noir : En attente de travaux
Orange : En travaux
Bleu : En phase de test
Vert : Travaux finis

Chaque travaux se déroule dans l'ordre suivant :
1) En attente de travaux
2) En travaux
3) En phase de test
4) Travaux finis

Pour chaque gare il y a 2 phases:
La première est la phase 2.1
La deuxième phase est la phase 2.2

Lorsque la phase 2.1 est finie, on passe à la 2.2.

Chaque couleur de cercle indique un état de la gare :
Blanc : en attente de travaux
Orange : En travaux
Vert : Gare finie (c'est à dire fin de la phase 2.1 et 2.2)

Voici ce que j'aimerais faire :

LORSQU'IL N'Y A PAS DE TRAVAUX:
1) Lorsque tous les logos sont noirs, la couleur du cercle de la gare en question est blanc.

LORSQUE L'ON DEBUTE LES TRAVAUX DE LA PHASE 2.1
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

LORSQUE L'ON FINI LES TRAVAUX DE LA PHASE 2.1
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)

LORSQUE L'ON FINI LES TRAVAUX DE LA PHASE 2.2
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 2.1 ensuite les travaux phase 2.2

LORSQUE TOUS LES TRAVAUX SONT FINIS (2.1 ET 2.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

**NoSmoking** · 06/10/2020, 11h39

Je crois que l'on a bien compris ce que tu cherches à faire et pour les précisions c'est à toi qu'elles doivent servir pour être sûr de ne pas oublier de cas avant de chercher une solution.

As tu au moins essayé de construire du code à partir de ce que je t'ai soumis ?

**psychadelic** · 07/10/2020, 15h05

Perso je vois pas pourquoi tu t'acharne à utiliser cette carte, alors que je t'en ai fourni une neuve, utilisant un array JS permettant d’intégrer proprement toutes les "fantaisies" d'affichage.
https://www.developpez.net/forums/d2.../#post11446647

Fonction onclick .svg RER A

JavaScript

Vue hybride

Discussions similaires

Partager

Partager