fixup! front: fix padding, add translations

OpenRailAssociation · Jan 9, 2025 · bc9236d · bc9236d
1 parent 751c273
commit bc9236d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 24 deletions.
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,7 +111,7 @@ const StdcmConfig = ({
       maxSpeed: validateMaxSpeed(maxSpeed, rollingStock?.max_speed),
     };
   }, [rollingStock, towedRollingStock, totalMass, totalLength, maxSpeed]);
-  const [validationMessage, setValidationMessage] = useState<string | null>(null);
+  const [validationMessage, setValidationMessage] = useState<string>();
 
   const disabled = isPending || retainedSimulationIndex > -1;
 
@@ -175,23 +176,28 @@ const StdcmConfig = ({
   }, []);
 
   useEffect(() => {
-    if (origin.location && destination.location) {
+    setIsCiChanged(true);
+  }, [origin.location, destination.location]);
+
+  useEffect(() => {
+    if (isCiChanged && origin.location && destination.location && rollingStock?.id) {
       setValidationMessage(t('pathfindingStatus.calculating'));
     } else {
-      setValidationMessage(null);
+      setValidationMessage(undefined);
     }
-  }, [origin, destination]);
+  }, [isCiChanged, origin.location, destination.location, rollingStock?.id]);
 
   useEffect(() => {
-    if (pathfinding?.status === 'success') {
+    if (isCiChanged && pathfinding?.status === 'success') {
       setValidationMessage(t('pathfindingStatus.success'));
       const timer = setTimeout(() => {
-        setValidationMessage(null);
+        setValidationMessage(undefined);
+        setIsCiChanged(false);
       }, 2000);
       return () => clearTimeout(timer);
     }
     return undefined;
-  }, [pathfinding?.status]);
+  }, [pathfinding?.status, isCiChanged]);
 
   return (
     <div className="stdcm__body">
@@ -245,19 +251,19 @@ const StdcmConfig = ({
                     formErrors?.errorType === StdcmConfigErrorTypes.INFRA_NOT_LOADED
                   }
                 />
-                <div className="simulation-status-banner">
-                  <div className="banner-content">
-                    {validationMessage && (
+                {!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>
-                </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
@@ -300,27 +300,32 @@
       }
 
       .validation-message {
-        @extend .status;
         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);
-      }
-      .validation-message-success {
-        width: 450px;
-        color: rgb(11, 114, 60);
-        background-color: rgb(230, 247, 238);
-        margin-top: 16px;
-        font-size: 16px;
-        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);
+        &-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);
+        }
       }
     }
   }