added support for cancelled trains + added final station to the next …

…stops

src/App.css

@@ -31,7 +31,7 @@
 }
 
 .contactMe {
-  position: absolute;
+  position: fixed;
 
   bottom: 0;
   left: 50%;
@@ -69,7 +69,7 @@
 }
 
 .info {
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
 

src/App.jsx

@@ -66,9 +66,6 @@ function App() {
   };
 
   const getRFI = async (origin, destination) => {
-    console.log('---------------')
-    console.log(origin);
-    console.log('---------------')
     const response = await axios.get(`/rfi/${origin.id}`, {
       headers: {},
     });
@@ -88,51 +85,57 @@ function App() {
 
     let numbers = $("td#RTreno")
       .map((i, el) => {
-        return $(el).text().replace(" ", "");
+        return $(el).text();
       })
       .toArray();
 
-    let plannedTimes = $("td#ROrario")
+      let finalStations = $("td#RStazione > div")
       .map((i, el) => {
         return $(el).text();
       })
       .toArray();
 
-    let delays = $("td#RRitardo")
+    let plannedTimes = $("td#ROrario")
       .map((i, el) => {
         return $(el).text();
       })
       .toArray();
 
-    let platforms = $("td#RBinario > div")
+    let delays = $("td#RRitardo")
       .map((i, el) => {
         return $(el).text();
       })
       .toArray();
 
-    let moreInfo = $(".FermateSuccessivePopupStyle")
+    let platforms = $("td#RBinario > div")
       .map((i, el) => {
-        return $(el).find(".testoinfoaggiuntive").first().text();
+        return $(el).text();
       })
       .toArray();
 
+    let moreInfo = $("td#RDettagli");
+
     company = cleanArray(company);
     numbers = cleanArray(numbers);
+    finalStations = cleanArray(finalStations);
     plannedTimes = cleanArray(plannedTimes);
     delays = cleanArray(delays);
     platforms = cleanArray(platforms);
-    moreInfo = cleanArray(moreInfo);
 
     // push each train data like an object to the array
     const trains = [];
 
     for (let i = 0; i < numbers.length; i++) {
       // print everything of the train
-      console.log(`🚂 ${company[i]} ${numbers[i]} ${plannedTimes[i]} ${delays[i]} ${platforms[i]} ${moreInfo[i]}`);
-
+      // console.log(`🚂 ${company[i]} ${numbers[i]} ${plannedTimes[i]} ${delays[i]} ${platforms[i]} ${moreInfo[i]}`);
 
       if (numbers[i] === "") continue;
 
+      let nextStops = $(moreInfo[i]).find(".FermateSuccessivePopupStyle").find(".testoinfoaggiuntive").first().text().replace(/\n/g, "").trim();
+
+      // push destination name to the array
+      nextStops += ('- ' + finalStations[i]);
+
       // if destination name is composed by more than one word, extract the first one and the last one in two different variables
       const destinationNames = destination.name.split(" ");
       const destinationName = destinationNames[0];
@@ -142,21 +145,13 @@ function App() {
       // if is more than one word regex has to verify if the string starts with '- destinationName' and finishes with 'destinationLastName (' is in the string with everything in the middle
       const regex = new RegExp(`- ${destinationName}`);
 
-      // filter only the trains that go to the destination
-      if (moreInfo[i] == null) continue;
-
-      // console.log("case: ", destinationNames.length);
-      // console.log(`regexOneWord: ${regexOneWord}`);
-      // console.log(`regex: ${regex}`);
-      // console.log(`number: ${numbers[i]}`);
-      // console.log(`nextStops: ${moreInfo[i]}`);
-      // test on moreInfo[i] if the train goes to the destination
+      // test on nextStops if the train goes to the destination
       switch (destinationNames.length) {
         case 1:
-          if (!regexOneWord.test(moreInfo[i])) continue;
+          if (!regexOneWord.test(nextStops)) continue;
           break;
         default:
-          if (!regex.test(moreInfo[i])) continue;
+          if (!regex.test(nextStops)) continue;
           break;
       }
 
@@ -165,6 +160,7 @@ function App() {
         continue;
 
       trains.push({
+        cancelled: delays[i] === "Cancellato",
         company: company[i],
         number: numbers[i],
         plannedTime: plannedTimes[i],
@@ -177,7 +173,7 @@ function App() {
                 .format("HH:mm"),
         delay: delays[i],
         platform: platforms[i],
-        nextStops: moreInfo[i],
+        nextStops: nextStops,
       });
     }
     return trains;

src/components/TrainStatus.css

@@ -14,6 +14,17 @@
   margin-block-end: .5rem;
 }
 
+.cancelled {
+  filter: saturate(0);
+  opacity: 0.5;
+}
+
+.cancelled {
+  .missingTimeBox {
+    text-decoration: line-through;
+  }
+}
+
 .missingTimeBox {
   display: flex;
   flex-direction: column;
@@ -34,6 +45,10 @@
   aspect-ratio: 1 / 1; /* Ensures the box remains a square */
 }
 
+.bg-cancelled {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
 .bg-trasparent {
   background-color: transparent;
 }

src/components/TrainStatus.jsx

@@ -2,8 +2,10 @@ import moment from 'moment';
 import './TrainStatus.css';
 
 // based on the missingTime, return the color of the box
-const getBoxColor = (missingTime) => {
-  if (missingTime === 0) {
+const getBoxColor = (missingTime, isCancelled) => {
+  if (isCancelled) {
+    return 'cancelled';
+  } else if (missingTime === 0) {
     return 'trasparent';
   } else if (missingTime <= 10) {
     return 'red';
@@ -31,12 +33,10 @@ const TrainStatus = ({ train }) => {
 
   let missingTime = moment(train.realTime, 'HH:mm').diff(moment(), 'minutes');
 
-  if (missingTime < 0) return;
-
   return (
-    <div key={train.id} className='trainWrapper'>
+    <div key={train.id} className={`trainWrapper ${train.cancelled ? 'cancelled' : ''}`}>
       {/* blinking animatino if train is leaving */}
-      <div className={`missingTimeBox bg-${getBoxColor(missingTime)}`}>
+      <div className={`missingTimeBox bg-${getBoxColor(missingTime, train.cancelled)}`}>
         {
           missingTime === 0 ?
             // animation for the train that is leaving
@@ -57,7 +57,7 @@ const TrainStatus = ({ train }) => {
       </div>
       <div className="textWrapper">
         <div className="platform">
-          {`Platform ${train.platform}`}
+          {train.cancelled ? 'CANCELLED' : `Platform ${train.platform}`}
         </div>
         <div className="trainName">
           {`${train.company} ${train.number}`}