中央時三段活用可能に変更、ダイヤ情報の部分更新

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -71,10 +71,10 @@ export const EachTrainInfoCore = ({
   }, []);
   //bconst insets = useSafeAreaInsets();
 
-  const [headStation, setHeadStation] = useState();
-  const [tailStation, setTailStation] = useState();
-  const [isConcatNear, setIsConcatNear] = useState(false);
-  const [showNearTrain, setShowNearTrain] = useState([]);
+  const [headStation, setHeadStation] = useState([]);
+  const [tailStation, setTailStation] = useState([]);
+  const [showHeadStation, setShowHeadStation] = useState([]);
+  const [showTailStation, setShowTailStation] = useState([]);
   const [nearTrainIDList, setNearTrainIDList] = useState([]);
   const { getInfluencedTrainData } = useBusAndTrainData();
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
@@ -120,9 +120,8 @@ export const EachTrainInfoCore = ({
   useEffect(() => {
     if (!data.trainNum) return;
     const TD = trainList[data.trainNum];
-    setIsConcatNear(false);
-    setHeadStation();
-    setTailStation();
+    setHeadStation([]);
+    setTailStation([]);
     if (!TD) {
       const specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
       setTrueTrainID(specialTrainActualID || undefined);
@@ -134,27 +133,38 @@ export const EachTrainInfoCore = ({
   //裏列車探索
   useEffect(() => {
     if (!data.trainNum) return;
-    const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
+    const NearTrainList = getInfluencedTrainData(data.trainNum);
+    if (NearTrainList.length == 0) return;
+    const returnArray = NearTrainList.map((d) => d.id);
+    const TDArray = NearTrainList.map((d) => d.TrainData);
     setNearTrainIDList(returnArray);
-    setShowNearTrain(TDArray);
     if (trainData.length == 0) return;
     if (TDArray.length == 0) return;
-    let head;
-    let tail;
-    TDArray.forEach((d) => {
-      const [station, se, time] = d.split(",");
-
-      if (station == trainData[0].split(",")[0]) {
-        head = trainData[0].split(",")[0];
-      }
-      if (station == trainData[trainData.length - 1].split(",")[0]) {
-        tail = trainData[trainData.length - 1].split(",")[0];
-      }
-    });
+    let head = [];
+    let tail = [];
+    TDArray.forEach((data, i) =>
+      data.forEach((d) => {
+        const [station, se, time] = d.split(",");
+        if (station == trainData[0].split(",")[0]) {
+          head.push({
+            station: trainData[0].split(",")[0],
+            dia: data,
+            id: nearTrainIDList[i],
+          });
+        }
+        if (station == trainData[trainData.length - 1].split(",")[0]) {
+          tail.push({
+            station: trainData[trainData.length - 1].split(",")[0],
+            dia: data,
+            id: nearTrainIDList[i],
+          });
+        }
+      })
+    );
     if (head) setHeadStation(head);
-    else setHeadStation();
+    else setHeadStation([]);
     if (tail) setTailStation(tail);
-    else setTailStation();
+    else setTailStation([]);
   }, [trainData, data]);
 
   useEffect(() => {
@@ -256,8 +266,9 @@ export const EachTrainInfoCore = ({
         </Text>
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+          {showHeadStation.map((d) => `${headStation[d].id} + `)}
           {data.trainNum}
-          {isConcatNear ? ` + ${nearTrainIDList}` : ""}
+          {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
         </Text>
 
         {data.limited != undefined &&
@@ -331,33 +342,36 @@ export const EachTrainInfoCore = ({
           <ScrollStickyContent currentTrainData={currentTrainData} />
         }
       >
-        {headStation && !isConcatNear && (
-          <TouchableOpacity
-            onPress={() => {
-              const array = openBackTrainInfo(
-                headStation,
-                trainData,
-                showNearTrain
-              );
-              if (!array) return;
-              setTrainData(array);
-              setIsConcatNear(true);
-            }}
-            style={{
-              padding: 10,
-              flexDirection: "row",
-              borderColor: "blue",
-              borderWidth: 1,
-              margin: 10,
-              borderRadius: 5,
-              alignItems: "center",
-            }}
-          >
-            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
-              「本当の始発駅」を表示
-            </Text>
-          </TouchableOpacity>
-        )}
+        {headStation.length != 0 &&
+          headStation.map((i, index) =>
+            showHeadStation.findIndex((d) => d == index) == -1 ? (
+              <TouchableOpacity
+                onPress={() => {
+                  const array = openBackTrainInfo(i.station, trainData, i.dia);
+                  if (!array) return;
+                  setTrainData(array);
+                  setShowHeadStation([...showHeadStation, index]);
+                }}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の始発駅」を表示
+                </Text>
+              </TouchableOpacity>
+            ) : (
+              <></>
+            )
+          )}
         {/* <LottieView
                 autoPlay
                 loop
@@ -397,34 +411,38 @@ export const EachTrainInfoCore = ({
             />
           )
         )}
-        {tailStation && !isConcatNear && (
-          <TouchableOpacity
-            onPress={() => {
-              const array = openBackTrainInfo(
-                tailStation,
-                trainData,
-                showNearTrain
-              );
+        {tailStation.length != 0 &&
+          tailStation.map((i, index) =>
+            showTailStation.findIndex((d) => d == index) == -1 ? (
+              <TouchableOpacity
+                onPress={() => {
+                  const array = openBackTrainInfo(i.station, trainData, i.dia);
 
-              if (!array) return;
-              setTrainData(array);
-              setIsConcatNear(true);
-            }}
-            style={{
-              padding: 10,
-              flexDirection: "row",
-              borderColor: "blue",
-              borderWidth: 1,
-              margin: 10,
-              borderRadius: 5,
-              alignItems: "center",
-            }}
-          >
-            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
-              「本当の終着駅」を表示
-            </Text>
-          </TouchableOpacity>
-        )}
+                  if (!array) return;
+                  setTrainData(array);
+
+                  setShowTailStation([...showTailStation, index]);
+                }}
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "blue",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                >
+                  「本当の終着駅」を表示
+                </Text>
+              </TouchableOpacity>
+            ) : (
+              <></>
+            )
+          )}
 
         <View style={{ flexDirection: "row" }}>
           <View