From 29390c9f78c00ff42ba6dae2663416f5905e10f6 Mon Sep 17 00:00:00 2001
From: Vincent Hardouin <vincenthardouin@icloud.com>
Date: Mon, 11 Mar 2024 19:16:43 +0100
Subject: [PATCH] feat: add feedback after click on try button

---
 docs/TODO.md       |  3 ++-
 index.html         |  5 +++++
 src/front.js       | 14 ++++++++++----
 src/utils.front.js |  7 +++++++
 src/utils.js       |  7 -------
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/docs/TODO.md b/docs/TODO.md
index fee2d36..a33352b 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -8,6 +8,7 @@
 - [ ] UX - Modale de fin - Ajouter le chemin le plus court et le chemin du joueur
 - [ ] UX - Ajouter les stations du joueur en dessous de la carte
   - [ ] UX - Pouvoir activer/désactiver des stations
-- [ ] UX - Search Input - Retirer les stations déjà ajoutées
+- [x] UX - Search Input - Retirer les stations déjà ajoutées
+- [x] UX - Search Input - Ajouter un feedback si la station n'existe pas
 - [ ] UX - Afficher les lignes de métro dans la bonne couleur
 - [x] Script - Merge-duplicate-station - Ne pas prendre compte les accents dans les noms
diff --git a/index.html b/index.html
index e663616..8e720b7 100644
--- a/index.html
+++ b/index.html
@@ -175,6 +175,7 @@ <h1>Métro travel</h1>
       <p id="instruction"></p>
       <svg id="carte"></svg>
       <div class="dropdown">
+        <label for="station" class="form-label">Nom d'une station</label>
         <input
           id="station"
           class="form-control"
@@ -182,7 +183,11 @@ <h1>Métro travel</h1>
           placeholder="Rechercher une station à ajouter"
           data-bs-toggle="dropdown"
           aria-expanded="false"
+          aria-describedby="station-validation"
         />
+        <div id="station-validation" class="invalid-feedback">
+          Le nom de station doit être valide.
+        </div>
         <ul id="stations" class="dropdown-menu"></ul>
       </div>
       <button id="try" class="btn btn-primary">Essayer</button>
diff --git a/src/front.js b/src/front.js
index 64e19a6..f913158 100644
--- a/src/front.js
+++ b/src/front.js
@@ -5,7 +5,7 @@ import linesData from '../assets/lines.geojson';
 import { ParisMap } from './map.js';
 import { getSeededRandomStations, pickStations } from './pick-stations.js';
 import { verifyIfConnected } from './graph.js';
-import { searchStations } from './utils.front.js';
+import { searchStations, stationExists } from './utils.front.js';
 
 const stations = stationsData.features.filter((s) => {
   return s.properties.adjacentStations && s.properties.name;
@@ -25,6 +25,7 @@ function createEventsForStationsList() {
     handleDropDownVisibility(input, dropdown);
   });
   input.addEventListener('input', () => {
+    input.classList.remove('is-invalid');
     handleDropDownVisibility(input, dropdown);
   });
 }
@@ -97,9 +98,14 @@ function handleClickOnTryButton({ pick }) {
   document.getElementById('try').addEventListener('click', () => {
     const input = document.getElementById('station');
     const stationName = input.value;
-    addStation({ stationName });
-    input.value = '';
-    isFinished({ addedStations, pick });
+    if (stationExists(stations, stationName)) {
+      addStation({ stationName });
+      input.value = '';
+      isFinished({ addedStations, pick });
+    }
+    else {
+      input.classList.add('is-invalid');
+    }
   });
 }
 function isFinished({ addedStations, pick }) {
diff --git a/src/utils.front.js b/src/utils.front.js
index bf3b843..f8f2bd9 100644
--- a/src/utils.front.js
+++ b/src/utils.front.js
@@ -25,6 +25,13 @@ function searchStations(search, stations) {
     });
 }
 
+function stationExists(stations, stationName) {
+  return stations.some((station) => {
+    return station.properties.name === stationName;
+  });
+}
+
 export {
   searchStations,
+  stationExists,
 };
diff --git a/src/utils.js b/src/utils.js
index 2a0b856..fcb7804 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -12,13 +12,6 @@ function getStations() {
   });
 }
 
-function stationExists(stations, stationName) {
-  return stations.some((station) => {
-    return station.properties.name === stationName;
-  });
-}
-
 export {
   getStations,
-  stationExists,
 };