added announcements (clickable text)

Dovday · Jun 8, 2024 · 7e0a29a · 7e0a29a
1 parent d15160e
commit 7e0a29a
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 79 deletions.
diff --git a/src/App.css b/src/App.css
@@ -9,7 +9,7 @@
 }
 
 #root {
-  max-height: 95%;
+  height: 100vh;
   width: 100%;
 
   display: flex;
@@ -69,10 +69,6 @@
 }
 
 .info {
-  position: fixed;
-  left: 0;
-  right: 0;
-
   font-family: Nunito Sans;
   font-size: .75rem;
   color: white;
@@ -102,7 +98,7 @@
 
 .stationHeaderWrapper {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -122,6 +118,7 @@
       font-size: 1.5rem;
       font-weight: 700;
       opacity: 0.75;
+      margin: 0;
     }
 
     .clearButton {
@@ -163,6 +160,37 @@
   text-align: center;
 }
 
+/* announcement styling */
+.wrapper {
+  max-width: 90vw;
+  overflow: hidden;
+}
+
+.marquee {
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  animation: marquee 25s linear infinite;
+}
+
+.marquee p {
+  display: inline-block;
+  opacity: 0.75;
+  font-family: Nunito Sans;
+  font-style: italic;
+  margin: 0;
+  color: white;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
 /* editing ant design input to dark theme */
 .ant-input {
   font-family: Nunito Sans !important;

diff --git a/src/App.jsx b/src/App.jsx
@@ -35,6 +35,9 @@ function App() {
   const [origin2destination, setOrigin2destination] = useState([]);
   const [destination2origin, setDestination2origin] = useState([]);
 
+  const [originAnnouncement, setOriginAnnouncement] = useState(null);
+  const [destinationAnnouncement, setDestinationAnnouncement] = useState(null);
+
   const [areSameStations, setAreSameStations] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [lastUpdateTime, setLastUpdateTime] = useState(
@@ -92,7 +95,7 @@ function App() {
       })
       .toArray();
 
-      let finalStations = $("td#RStazione > div")
+    let finalStations = $("td#RStazione > div")
       .map((i, el) => {
         return $(el).text();
       })
@@ -118,6 +121,11 @@ function App() {
 
     let moreInfo = $("td#RDettagli");
 
+    let announcement = $("#barraInfoStazioneId").find(".marqueeinfosupp > div").text().trim();
+    // if announcement is empty, set it to null
+    // otherwise add ⚠️ emoji as prefix and suffix
+    announcement = announcement === '' ? null : `❗❗ ${announcement} ❗❗`;
+
     company = cleanArray(company);
     numbers = cleanArray(numbers);
     finalStations = cleanArray(finalStations);
@@ -152,23 +160,22 @@ function App() {
         case 1:
           if (!regexOneWord.test(nextStops)) continue;
           break;
-          default:
-            if (!regex.test(nextStops)) continue;
-            break;
-          }
-          // print everything of the train
-          console.log(`🚂 ${company[i]} ${numbers[i]} ${plannedTimes[i]} ${delays[i]} ${platforms[i]} ${nextStops}`);
-
-
-          // actualTime = plannedTime + delay
-          const actualTime = moment(plannedTimes[i], "HH:mm").add(delays[i], "minutes").format("HH:mm");
-          // if actualTime is after now continue
-          if (moment(actualTime).diff(moment(), "minutes") < 0)
-            continue;
-
-          trains.push({
-            cancelled: delays[i] === "Cancellato",
-            company: company[i],
+        default:
+          if (!regex.test(nextStops)) continue;
+          break;
+      }
+      // print everything of the train
+      // console.log(`🚂 ${company[i]} ${numbers[i]} ${plannedTimes[i]} ${delays[i]} ${platforms[i]} ${nextStops}`);
+
+      // actualTime = plannedTime + delay
+      const actualTime = moment(plannedTimes[i], "HH:mm").add(delays[i], "minutes").format("HH:mm");
+      // if actualTime is after now continue
+      if (moment(actualTime).diff(moment(), "minutes") < 0)
+        continue;
+
+      trains.push({
+        cancelled: delays[i] === "Cancellato",
+        company: company[i],
         number: numbers[i],
         plannedTime: plannedTimes[i],
         // if train is late, calculate the real time using moment.js
@@ -178,15 +185,21 @@ function App() {
         nextStops: nextStops,
       });
     }
-    return trains;
+    return { announcement, trains };
   };
 
   getStationsId(); // output: stations
   // CHEERIO - end
 
   const getTrainSolutions = async () => {
-    const origin2destination = await getRFI(origin, destination);
-    const destination2origin = await getRFI(destination, origin);
+    const { announcement: oAnnouncement, trains: oTrains } = await getRFI(origin, destination);
+    const { announcement: dAnnouncement, trains: dTrains } = await getRFI(destination, origin);
+
+    const origin2destination = oTrains;
+    const destination2origin = dTrains;
+
+    setOriginAnnouncement(oAnnouncement);
+    setDestinationAnnouncement(dAnnouncement);
 
     setIsLoading(false);
     // if array has more than five elements, drop the rest
@@ -267,6 +280,18 @@ function App() {
     );
   }, [origin, destination]);
 
+  const renderAnnouncement = (announcementMsg, stationId) => {
+    return (
+      <a target='_blank' href={`https://iechub.rfi.it/ArriviPartenze/ArrivalsDepartures/Monitor?Arrivals=False&PlaceId=${stationId}#infoSuccessiveAnchor`} className="wrapper">
+        <div className="marquee">
+          <p>
+            {announcementMsg}
+          </p>
+        </div>
+      </a>
+    );
+  }
+
   return (
     <>
       <div className="contactMe">
@@ -280,19 +305,24 @@ function App() {
           {
             // if station is set show h2 with name, otherwise show search box
             origin.id != null ? (
-              <div className="titleWrapper">
-                <h2>{origin.name}</h2>
-                <div
-                  className="clearButton"
-                  onClick={() => {
-                    // clear local storage
-                    localStorage.removeItem("origin");
-                    setOrigin(initStation());
-                  }}
-                >
-                  Clear
+              <>
+                <div className="titleWrapper">
+                  <h2>{origin.name}</h2>
+                  <div
+                    className="clearButton"
+                    onClick={() => {
+                      // clear local storage
+                      localStorage.removeItem("origin");
+                      setOrigin(initStation());
+                    }}
+                  >
+                    Clear
+                  </div>
                 </div>
-              </div>
+                {
+                  originAnnouncement && renderAnnouncement(originAnnouncement, origin.id)
+                }
+              </>
             ) : (
               <AutoComplete
                 popupClassName="certain-category-search-dropdown"
@@ -332,26 +362,31 @@ function App() {
             </div>
           )}
         </div>
-      </div>
+      </div >
       <div className="separator" />
       <div className="stationContainer">
         <div className="stationHeaderWrapper">
           {
             // if station is set show h2 with name, otherwise show search box
             destination.id != null ? (
-              <div className="titleWrapper">
-                <h2>{destination.name}</h2>
-                <div
-                  className="clearButton"
-                  onClick={() => {
-                    // clear local storage
-                    localStorage.removeItem("destination");
-                    setDestination(initStation());
-                  }}
-                >
-                  Clear
+              <>
+                <div className="titleWrapper">
+                  <h2>{destination.name}</h2>
+                  <div
+                    className="clearButton"
+                    onClick={() => {
+                      // clear local storage
+                      localStorage.removeItem("destination");
+                      setDestination(initStation());
+                    }}
+                  >
+                    Clear
+                  </div>
                 </div>
-              </div>
+                {
+                  destinationAnnouncement && renderAnnouncement(destinationAnnouncement, destination.id)
+                }
+              </>
             ) : (
               <AutoComplete
                 popupClassName="certain-category-search-dropdown"
@@ -376,23 +411,23 @@ function App() {
             )
           }
         </div>
-      <div className="trainsContainer">
-        {areSameStations ? (
-          <div className="sameStations">
-            <h3>Origin and destination are the same</h3>
-          </div>
-        ) : destination2origin.length > 0 ? (
-          destination2origin.map((train) => (
-            <TrainStatus key={train.number} train={train} />
-          ))
-        ) : isLoading && origin.id != null && destination.id != null ? (
-          <div className="loading">Loading...</div>
-        ) : (
-          <div className="noSolutions">
-            <h3>No trains were found</h3>
-          </div>
-        )}
-      </div>
+        <div className="trainsContainer">
+          {areSameStations ? (
+            <div className="sameStations">
+              <h3>Origin and destination are the same</h3>
+            </div>
+          ) : destination2origin.length > 0 ? (
+            destination2origin.map((train) => (
+              <TrainStatus key={train.number} train={train} />
+            ))
+          ) : isLoading && origin.id != null && destination.id != null ? (
+            <div className="loading">Loading...</div>
+          ) : (
+            <div className="noSolutions">
+              <h3>No trains were found</h3>
+            </div>
+          )}
+        </div>
       </div>
     </>
   );

diff --git a/vite.config.js b/vite.config.js
@@ -5,16 +5,6 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      // '/autocomplete': {
-      //   target: 'http://www.viaggiatreno.it/infomobilita/resteasy/viaggiatreno/autocompletaStazione/',
-      //   changeOrigin: true,
-      //   rewrite: (path) => path.replace(/^\/autocomplete\/(.*)/, '$1'),
-      // },
-      // '/solutions': {
-      //   target: 'http://www.viaggiatreno.it/viaggiotrenonew/resteasy/viaggiotreno/soluzioniViaggioNew/',
-      //   changeOrigin: true,
-      //   rewrite: (path) => path.replace(/^\/solutions\/(.*)/, '$1'),
-      // },
       '/rfi': {
         target: 'https://iechub.rfi.it/ArriviPartenze/ArrivalsDepartures/Monitor',
         changeOrigin: true,