lmr: add messages during pathfinding and when its done

Signed-off-by: Mathieu <[email protected]>

Author: Caracol3

front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx

@@ -110,6 +110,7 @@ const StdcmConfig = ({
       maxSpeed: validateMaxSpeed(maxSpeed, rollingStock?.max_speed),
     };
   }, [rollingStock, towedRollingStock, totalMass, totalLength, maxSpeed]);
+  const [validationMessage, setValidationMessage] = useState<string | null>(null);
 
   const disabled = isPending || retainedSimulationIndex > -1;
 
@@ -173,6 +174,24 @@ const StdcmConfig = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (origin.location && destination.location) {
+      setValidationMessage("validation de l'itinéraire en cours");
+    } else {
+      setValidationMessage(null);
+    }
+  }, [origin, destination]);
+
+  useEffect(() => {
+    if (pathfinding?.status === 'success') {
+      setValidationMessage("l'itinéraire demandé est valide");
+      const timer = setTimeout(() => {
+        setValidationMessage(null);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [pathfinding?.status]);
+
   return (
     <div className="stdcm__body">
       {isDebugMode && (
@@ -208,6 +227,13 @@ const StdcmConfig = ({
                 })}
                 ref={launchButtonRef}
               >
+                <div className="simulation-status-banner">
+                  <div className="banner-content">
+                    {validationMessage && (
+                      <div className="validation-message">{validationMessage}</div>
+                    )}
+                  </div>
+                </div>
                 <Button
                   data-testid="launch-simulation-button"
                   className={cx({

front/src/styles/scss/applications/stdcm/_home.scss

@@ -294,6 +294,17 @@
         line-height: 24px;
         text-align: center;
       }
+
+      .validation-message {
+        @extend .status;
+        color: rgb(33, 100, 130);
+        background-color: rgb(230, 247, 255);
+        margin-top: 20px;
+        box-shadow:
+          0 0 0 4px rgba(255, 255, 255, 1) inset,
+          0 0 0 5px rgba(104, 159, 255, 1) inset,
+          0 3px 7px -3px rgba(28, 28, 217, 0.4);
+      }
     }
   }
 }