左側の情報一通り完成

components/Apps/FixedPositionBox.tsx

@@ -11,6 +11,8 @@ import { getTrainType } from "@/lib/getTrainType";
 import Constants from "expo-constants";
 import { trainPosition } from "@/lib/trainPositionTextArray";
 import { StationNumberMaker } from "../駅名表/StationNumberMaker";
+import { lineListPair, stationIDPair } from "@/lib/getStationList";
+import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
 
 export const FixedPositionBox = () => {
   const { fixedPosition, setFixedPosition } = useCurrentTrain();
@@ -131,7 +133,13 @@ export const FixedStation = ({ stationID }) => {
 };
 
 export const FixedTrain = ({ trainID }) => {
-  const { fixedPosition, setFixedPosition, currentTrain,getCurrentStationData } = useCurrentTrain();
+  const {
+    fixedPosition,
+    setFixedPosition,
+    currentTrain,
+    getCurrentStationData,
+    getPosition,
+  } = useCurrentTrain();
   const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
 
   const getTrainDataFromCurrentTrain = (trainNum: string) => {
@@ -193,24 +201,133 @@ export const FixedTrain = ({ trainID }) => {
     }
   }, [trainID, currentTrain]);
 
+  const { getStationDataFromName, stationList, originalStationList } =
+    useStationList();
+
+  const [trainDataWidhThrough, setTrainDataWithThrough] = useState<string[]>(
+    []
+  );
+
+  useEffect(() => {
+    const trainData = allTrainDiagram[trainID]?.split("#");
+    if (!trainData) return;
+    //let haveThrough = false;
+    //
+    const stopStationList = trainData.map((i) => {
+      const [station, se, time] = i.split(",");
+      //if (se == "通編") setHaveThrough(true);
+      return stationList.map((a) => a.filter((d) => d.StationName == station));
+    });
+    const allThroughStationList = stopStationList.map((i, index, array) => {
+      let allThroughStation = [];
+      if (index == array.length - 1) return;
+
+      const firstItem = array[index];
+      const secondItem = array[index + 1];
+      let betweenStationLine = "";
+      let baseStationNumberFirst = "";
+      let baseStationNumberSecond = "";
+      Object.keys(stationIDPair).forEach((d, index2, array) => {
+        if (!d) return;
+        const haveFirst = firstItem[index2];
+        const haveSecond = secondItem[index2];
+        if (haveFirst.length && haveSecond.length) {
+          betweenStationLine = d;
+          baseStationNumberFirst = haveFirst[0].StationNumber;
+          baseStationNumberSecond = haveSecond[0].StationNumber;
+        }
+      });
+      if (!betweenStationLine) return;
+      let reverse = false;
+      originalStationList[
+        lineListPair[stationIDPair[betweenStationLine]]
+      ].forEach((d) => {
+        if (
+          d.StationNumber > baseStationNumberFirst &&
+          d.StationNumber < baseStationNumberSecond
+        ) {
+          allThroughStation.push(`${d.Station_JP},通過,`);
+          //setHaveThrough(true);
+          reverse = false;
+        } else {
+          if (
+            d.StationNumber < baseStationNumberFirst &&
+            d.StationNumber > baseStationNumberSecond
+          ) {
+            allThroughStation.push(`${d.Station_JP},通過,`);
+            //setHaveThrough(true);
+            reverse = true;
+          }
+        }
+      });
+      if (reverse) allThroughStation.reverse();
+      return allThroughStation;
+    });
+    let mainArray = [...trainData];
+    let indexs = 0;
+    trainData.forEach((d, index, array) => {
+      indexs = indexs + 1;
+      if (!allThroughStationList[index]) return;
+      if (allThroughStationList[index].length == 0) return;
+      mainArray.splice(indexs, 0, ...allThroughStationList[index]);
+      indexs = indexs + allThroughStationList[index].length;
+    });
+    setTrainDataWithThrough(mainArray);
+  }, [allTrainDiagram, stationList, trainID]);
+  const stopStationIDList = trainDataWidhThrough.map((i) => {
+    const [station, se, time] = i.split(",");
+    const Stations = stationList.map((a) =>
+      a.filter((d) => d.StationName == station)
+    );
+    const StationNumbers =
+      Stations &&
+      Stations.reduce((newArray, e) => {
+        return newArray.concat(e);
+      }, []).map((d) => d.StationNumber);
+    return StationNumbers;
+  });
+  const [currentPosition, setCurrentPosition] = useState([]);
+
+  useEffect(() => {
+    const position = getPosition(train);
+    if (position) setCurrentPosition(position);
+  }, [train]);
+
+  const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const points = findReversalPoints(currentPosition, stopStationIDList);
+    if (!points) return;
+    if (points.length == 0) return;
+    let searchCount = points.findIndex((d) => d == true);
+    for (searchCount; searchCount < points.length; searchCount++) {
+      const nextPos = trainDataWidhThrough[searchCount];
+      if (nextPos) {
+        const [station, se, time] = nextPos.split(",");
+        if (se.includes("通")) continue;
+        else {
+          setNextStationData(getStationDataFromName(station));
+          break;
+        }
+      }
+    }
+  }, [currentPosition, trainDataWidhThrough]);
   const [ToData, setToData] = useState("");
   useEffect(() => {
     if (customData.ToData && customData.ToData != "") {
       setToData(customData.ToData);
     } else {
-      const base = allTrainDiagram[trainID];
-      if (!base) return;
-      const data = base.split("#");
-      setToData(data[data.length - 2].split(",")[0]);
+      if (trainDataWidhThrough.length == 0) return;
+      setToData(
+        trainDataWidhThrough[trainDataWidhThrough.length - 2].split(",")[0]
+      );
     }
-  }, [customData, train]);
+  }, [customData, trainDataWidhThrough]);
   const [stringConfig, setStringConfig] = useState([, ,]);
   useEffect(() => {
     const x = getStringConfig(customData.type, customData.TrainNumber);
     setStringConfig(x);
   }, [customData]);
 
-  const { getStationDataFromName } = useStationList();
   const [station, setStation] = useState<StationProps[]>([]);
   useEffect(() => {
     const data = getStationDataFromName(ToData);
@@ -271,7 +388,7 @@ export const FixedTrain = ({ trainID }) => {
                   style={{
                     fontSize: customData?.trainName?.length > 6 ? 9 : 14,
                     color: "white",
-                    maxWidth: 70,
+                    maxWidth: 65,
                     textAlignVertical: "center",
                   }}
                 >
@@ -343,13 +460,28 @@ export const FixedTrain = ({ trainID }) => {
         >
           <Text
             style={{
-              fontSize: 20,
-              fontStyle: "italic",
+              fontSize: 10,
+              fontWeight: "bold",
+              color: "white",
+              marginHorizontal: 5,
+            }}
+          >
+            次は
+          </Text>
+          <StationNumberMaker
+            currentStation={nextStationData}
+            singleSize={20}
+            useEach={true}
+          />
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: "bold",
               color: "white",
               flex: 1,
             }}
           >
-            次は 新居浜
+            {nextStationData[0]?.Station_JP || "不明"}
           </Text>
           <View
             style={{
@@ -363,19 +495,17 @@ export const FixedTrain = ({ trainID }) => {
               borderBottomWidth: 0,
               borderLeftWidth: 0,
               borderRightWidth: 10,
-              flex: 1,
             }}
           ></View>
         </View>
       </View>
-      <CurrentPositionBox train={train} lineColor={lineColor}/>
-      
+      <CurrentPositionBox train={train} lineColor={lineColor} />
     </TouchableOpacity>
   );
 };
 
-const CurrentPositionBox = ({train,lineColor})=>{
-    let firstText = "";
+const CurrentPositionBox = ({ train, lineColor }) => {
+  let firstText = "";
   let secondText = "";
   let marginText = "";
   let externalText = "";
@@ -391,44 +521,46 @@ const CurrentPositionBox = ({train,lineColor})=>{
       firstText = Pos;
     }
   }
-  return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
-        <View style={{ flexDirection: "column", height: "100%" }}>
-          <View
-            style={{
-              backgroundColor: "white",
-              width: 10,
-              borderLeftColor: lineColor,
-              borderTopColor: lineColor,
-              borderBottomColor: "white",
-              borderRightColor: "white",
-              borderTopWidth: 25,
-              borderBottomWidth: 0,
-              borderLeftWidth: 0,
-              borderRightWidth: 10,
-              flex: 1,
-            }}
-          ></View>
-          <View
-            style={{
-              backgroundColor: "white",
-              width: 10,
-              borderLeftColor: "white",
-              borderTopColor: "white",
-              borderBottomColor: "white",
-              borderRightColor: "white",
-              borderTopWidth: 25,
-              borderBottomWidth: 0,
-              borderLeftWidth: 0,
-              borderRightWidth: 10,
-              flex: 1,
-            }}
-          ></View>
-        </View>
-        <Text style={{ color: "black", fontSize: 10, alignSelf: "flex-end" }}>
-          現在地：
-        </Text>
-        <Text style={{ color: "black", fontSize: 30, alignSelf: "center" }}>
-          {marginText == "→" ? firstText + marginText + secondText : firstText}
-        </Text>
-      </View>;
-}
+  return (
+    <View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
+      <View style={{ flexDirection: "column", height: "100%" }}>
+        <View
+          style={{
+            backgroundColor: "white",
+            width: 10,
+            borderLeftColor: lineColor,
+            borderTopColor: lineColor,
+            borderBottomColor: "white",
+            borderRightColor: "white",
+            borderTopWidth: 25,
+            borderBottomWidth: 0,
+            borderLeftWidth: 0,
+            borderRightWidth: 10,
+            flex: 1,
+          }}
+        ></View>
+        <View
+          style={{
+            backgroundColor: "white",
+            width: 10,
+            borderLeftColor: "white",
+            borderTopColor: "white",
+            borderBottomColor: "white",
+            borderRightColor: "white",
+            borderTopWidth: 25,
+            borderBottomWidth: 0,
+            borderLeftWidth: 0,
+            borderRightWidth: 10,
+            flex: 1,
+          }}
+        ></View>
+      </View>
+      <Text style={{ color: "black", fontSize: 10, alignSelf: "flex-end" }}>
+        現在地：
+      </Text>
+      <Text style={{ color: "black", fontSize: 30, alignSelf: "center" }}>
+        {marginText == "→" ? firstText + marginText + secondText : firstText}
+      </Text>
+    </View>
+  );
+};