運行情報の駅別動的表示化

components/発車時刻表/LED_vidion.js

@@ -58,6 +58,7 @@ export default function LED_vision(props) {
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
+  const [isInfoArea, setIsInfoArea] = useState(false);
   const { areaInfo, areaStationID } = useAreaInfo();
 
   useEffect(() => {
@@ -93,11 +94,20 @@ export default function LED_vision(props) {
     }
     let returnData = {};
     Object.keys(trainDiagram).forEach((key) => {
-      if (trainDiagram[key].match(station.Station_JP + ",")) {
+      if (trainDiagram[key].match(station[0].Station_JP + ",")) {
         returnData[key] = trainDiagram[key];
       }
     });
     setStationDiagram(returnData);
+    if (
+      station.some((s) => {
+        return areaStationID.includes(s.StationNumber);
+      })
+    ) {
+      setIsInfoArea(true);
+    } else {
+      setIsInfoArea(false);
+    }
   }, [trainDiagram, station]);
 
   const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
@@ -105,7 +115,7 @@ export default function LED_vision(props) {
   useEffect(() => {
     //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
     if (objectIsEmpty(stationDiagram)) return () => {};
-    const getTimeData = getTime(stationDiagram, station);
+    const getTimeData = getTime(stationDiagram, station[0]);
     setTrainTimeAndNumber(getTimeData);
   }, [stationDiagram]);
 
@@ -223,14 +233,14 @@ export default function LED_vision(props) {
           d={d}
           trainIDSwitch={trainIDSwitch}
           trainDescriptionSwitch={trainDescriptionSwitch}
-          station={station}
+          station={station[0]}
           customTrainDataDetector={customTrainDataDetector}
           navigate={navigate}
           originalStationList={originalStationList}
           openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
         />
       ))}
-      {areaString != "" && (
+      {areaString != "" && isInfoArea && (
         <Description
           numberOfLines={1}
           info={areaString.replaceAll("\n", "").replaceAll("\r", "")}
@@ -520,10 +530,25 @@ const Description = ({ info, numberOfLines = 0, onClick }) => (
       marginHorizontal: "3%",
       backgroundColor: "#000",
       flexDirection: "row",
+      overflow: "hidden",
     }}
     onPress={onClick}
   >
-    <View style={{ flex: 4 }}>
+    <View style={{ flex: 4, flexDirection: "row" }}>
+      {numberOfLines == 1 ? (
+        <Text
+          style={{
+            fontSize: parseInt("16%"),
+            color: "red",
+            fontWeight: "bold",
+          }}
+        >
+          運行情報
+        </Text>
+      ) : (
+        <></>
+      )}
+
       <Text
         style={{
           fontSize: parseInt("16%"),
@@ -532,7 +557,6 @@ const Description = ({ info, numberOfLines = 0, onClick }) => (
         }}
         numberOfLines={numberOfLines}
       >
-        {" "}
         &gt; {info}
       </Text>
     </View>

menu.js

@@ -205,7 +205,7 @@ export default function Menu({ getCurrentTrain }) {
           allStationData[selectedCurrentStation] && (
             <LED_vision
               station={
-                originalStationList && allStationData[selectedCurrentStation][0]
+                originalStationList && allStationData[selectedCurrentStation]
               }
               trainDiagram={trainDiagram}
               getCurrentTrain={getCurrentTrain}