lmr: add messages during pathfinding and when its done

- fix padding, add translations Signed-off-by: Mathieu <[email protected]> Co-authored-by: romainvalls <[email protected]>
OpenRailAssociation · Jan 10, 2025 · 6a320cc · 6a320cc
1 parent 4aeb5fd
commit 6a320cc
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 1 deletion.
diff --git a/front/public/locales/en/stdcm.json b/front/public/locales/en/stdcm.json
@@ -50,6 +50,10 @@
   },
   "noCorrespondingResults": "No results matching your search.",
   "notificationTitle": "Phase 1: from D-7 to D-1 5pm, on the Perrigny-Miramas axis.",
+  "pathfindingStatus": {
+    "calculating": "Validating path...",
+    "success": "The requested path is valid."
+  },
   "pleaseWait": "Please wait…",
   "simulation": {
     "calculatingSimulation": "Calculation in progress...",

diff --git a/front/public/locales/fr/stdcm.json b/front/public/locales/fr/stdcm.json
@@ -50,6 +50,10 @@
   },
   "noCorrespondingResults": "Aucun résultat ne correspond à votre recherche.",
   "notificationTitle": "Phase 1 : de J-7 à J-1 17h, sur l’axe Perrigny—Miramas.",
+  "pathfindingStatus": {
+    "calculating": "Validation de l'itinéraire en cours...",
+    "success": "L'itinéraire demandé est valide."
+  },
   "pleaseWait": "Veuillez patientez…",
   "simulation": {
     "calculatingSimulation": "Calcul en cours...",

diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
@@ -87,6 +87,7 @@ const StdcmConfig = ({
   const formRef = useRef<HTMLDivElement>(null);
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
+  const [isCiChanged, setIsCiChanged] = useState(false);
 
   const { rollingStock } = useStoreDataForRollingStockSelector();
   const towedRollingStock = useStdcmTowedRollingStock();
@@ -110,6 +111,7 @@ const StdcmConfig = ({
       maxSpeed: validateMaxSpeed(maxSpeed, rollingStock?.max_speed),
     };
   }, [rollingStock, towedRollingStock, totalMass, totalLength, maxSpeed]);
+  const [validationMessage, setValidationMessage] = useState<string>();
 
   const disabled = isPending || retainedSimulationIndex > -1;
 
@@ -173,6 +175,30 @@ const StdcmConfig = ({
     }
   }, []);
 
+  useEffect(() => {
+    setIsCiChanged(true);
+  }, [origin.location, destination.location]);
+
+  useEffect(() => {
+    if (isCiChanged && origin.location && destination.location && rollingStock?.id) {
+      setValidationMessage(t('pathfindingStatus.calculating'));
+    } else {
+      setValidationMessage(undefined);
+    }
+  }, [isCiChanged, origin.location, destination.location, rollingStock?.id]);
+
+  useEffect(() => {
+    if (isCiChanged && pathfinding?.status === 'success') {
+      setValidationMessage(t('pathfindingStatus.success'));
+      const timer = setTimeout(() => {
+        setValidationMessage(undefined);
+        setIsCiChanged(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [pathfinding?.status, isCiChanged]);
+
   return (
     <div className="stdcm__body">
       {isDebugMode && (
@@ -225,6 +251,19 @@ const StdcmConfig = ({
                     formErrors?.errorType === StdcmConfigErrorTypes.INFRA_NOT_LOADED
                   }
                 />
+                {!formErrors && validationMessage && (
+                  <div className="simulation-status-banner">
+                    <div className="banner-content">
+                      <div
+                        className={cx('validation-message', {
+                          'validation-message-success': pathfinding?.status === 'success',
+                        })}
+                      >
+                        {validationMessage}
+                      </div>
+                    </div>
+                  </div>
+                )}
                 {formErrors && (
                   <StdcmWarningBox
                     errorInfos={formErrors}

diff --git a/front/src/styles/scss/applications/stdcm/_home.scss b/front/src/styles/scss/applications/stdcm/_home.scss
@@ -258,6 +258,10 @@
     .banner-content {
       padding: 0 0 16px 378px;
       background: linear-gradient(180deg, rgba(239, 243, 245) 40px, rgba(233, 239, 242) 40px);
+      &:has(.validation-message) {
+        padding: 0 !important;
+        width: 450px;
+      }
       .status {
         width: 466px;
         display: flex;
@@ -267,7 +271,7 @@
         justify-content: center;
         color: rgb(11, 114, 60);
         padding-top: 23px;
-        font-size: 1.5rem;
+        font-size: 24px;
         line-height: 32px;
         height: 80px;
         border-radius: 8px;
@@ -294,6 +298,35 @@
         line-height: 24px;
         text-align: center;
       }
+
+      .validation-message {
+        width: 450px;
+        display: flex;
+        font-weight: 400;
+        letter-spacing: 0px;
+        text-align: center;
+        justify-content: center;
+        line-height: 32px;
+        height: 80px;
+        border-radius: 8px;
+        color: rgb(33, 100, 130);
+        background-color: rgb(230, 247, 255);
+        margin-top: 16px;
+        padding-top: 23px;
+        font-size: 16px;
+        box-shadow:
+          0 0 0 4px rgba(255, 255, 255, 1) inset,
+          0 0 0 5px rgb(112, 193, 229) inset,
+          0 3px 7px -3px rgba(28, 28, 217, 0.4);
+        &-success {
+          color: rgb(11, 114, 60);
+          background-color: rgb(230, 247, 238);
+          box-shadow:
+            0 0 0 4px rgba(255, 255, 255, 1) inset,
+            0 0 0 5px rgb(60, 202, 128) inset,
+            0 3px 7px -3px rgba(11, 114, 60, 0.4);
+        }
+      }
     }
   }
 }