feat: add feedback after click on try button

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

index.html

@@ -175,14 +175,19 @@ <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"
           type="text"
           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>

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 }) {

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,
 };

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,
 };