特急列車の分割併合に対応中(条件不足)

components/ActionSheetComponents/EachTrainInfo.js

@@ -30,6 +30,8 @@ import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
 import dayjs from "dayjs";
 import { getTrainType } from "../../lib/getTrainType";
 import { customTrainDataDetector } from "../custom-train-data";
+import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
+import { Swipeable } from "react-native-gesture-handler";
 
 export const EachTrainInfo = (props) => {
   if (!props.payload) return <></>;
@@ -46,14 +48,26 @@ export const EachTrainInfo = (props) => {
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
 
   const { currentTrain } = useCurrentTrain();
+  const { trainPairData } = useBusAndTrainData();
 
   const [currentTrainData, setCurrentTrainData] = useState([]);
   const [nearTrainIDList, setNearTrainIDList] = useState([]);
+  const [showNearTrain, setShowNearTrain] = useState([]);
+  const [isConcatNear, setIsConcatNear] = useState(false);
 
+  //裏列車探索
   useEffect(() => {
+    const trainPairList = {};
+    trainPairData.forEach((d) => {
+      trainPairList[Object.keys(d)[0]] = d[Object.keys(d)[0]];
+    });
     const returnArray = [];
     if (!data.trainNum) return;
+    if (trainPairList[data.trainNum]) {
+      returnArray.push(Object.keys(trainPairList[data.trainNum])[0]);
+    }
     if (
+      // 列番が4xxDまたは5xxDの場合はxxDの列番を検索
       new RegExp(/^4[1-9]\d\d[DM]$/).test(data.trainNum) ||
       new RegExp(/^5[1-7]\d\d[DM]$/).test(data.trainNum)
     ) {
@@ -62,15 +76,53 @@ export const EachTrainInfo = (props) => {
       }
     }
     if (new RegExp(/^[1-9]\d\d[DM]$/).test(data.trainNum)) {
-      if (trainList["4" + data.trainNum]) {
-        returnArray.push("4" + data.trainNum);
-      }
-      if (trainList["5" + data.trainNum]) {
-        returnArray.push("5" + data.trainNum);
-      }
+      // 列番がxxDの場合は4xxDと5xxDの列番を検索
+      if (trainList["4" + data.trainNum]) returnArray.push("4" + data.trainNum);
+      if (trainList["5" + data.trainNum]) returnArray.push("5" + data.trainNum);
     }
     setNearTrainIDList(returnArray);
+    if (!returnArray[0]) return;
+    const TD = trainList[returnArray[0]];
+    if (!TD) return;
+    const TDArray = TD.split("#").filter((d) => d != "");
+    setShowNearTrain(TDArray);
   }, [data]);
+
+  const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
+    console.log(trainData);
+    console.log(showNearTrain);
+    const stationPosition = showNearTrain.findIndex(
+      (d) => d.split(",")[0] == stationInfo
+    );
+    const relationBackTrain =
+      stationPosition == 0
+        ? "head"
+        : stationPosition == showNearTrain.length - 1
+        ? "tail"
+        : "middle";
+    if (relationBackTrain === "head") {
+      const migrationTrainData = [
+        ...trainData.slice(0, currentTrainIndex),
+        ...showNearTrain,
+      ];
+      setTrainData(migrationTrainData);
+    } else if (relationBackTrain === "tail") {
+      const migrationTrainData = [
+        ...showNearTrain.slice(0, showNearTrain.length - 1),
+        ...trainData.slice(currentTrainIndex),
+      ];
+      setTrainData(migrationTrainData);
+    } else if (relationBackTrain === "middle") {
+      const migrationTrainData = [
+        ...trainData.slice(0, currentTrainIndex),
+        ...showNearTrain.slice(0, stationPosition),
+        ...trainData.slice(currentTrainIndex),
+      ];
+      setTrainData(migrationTrainData);
+    }
+    setIsConcatNear(true);
+  };
+
   const openTrainInfo = (d) => {
     const train = customTrainDataDetector(d);
     let TrainNumber = "";
@@ -90,9 +142,7 @@ export const EachTrainInfo = (props) => {
       originalStationList,
       from: "AllTrainDiagramView",
     };
-    SheetManager.show("EachTrainInfo", {
-      payload,
-    });
+    //SheetManager.show("EachTrainInfo", { payload });
   };
   useEffect(() => {
     setCurrentTrainData(
@@ -349,16 +399,10 @@ export const EachTrainInfo = (props) => {
               : ""}
           </Text>
           <View style={{ flex: 1 }} />
-          <TouchableOpacity
-            onPress={() => {
-              nearTrainIDList.length && openTrainInfo(nearTrainIDList[0]);
-            }}
-          >
-            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-              {data.trainNum}
-              {nearTrainIDList.length ? "..." : ""}
-            </Text>
-          </TouchableOpacity>
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.trainNum}
+            {isConcatNear ? ` + ${nearTrainIDList}` : ""}
+          </Text>
 
           {data.limited != undefined &&
             getType(data.limited.split(":")[0]) &&
@@ -553,6 +597,9 @@ export const EachTrainInfo = (props) => {
               points={points}
               currentTrainData={currentTrainData}
               openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+              headAndTail={showNearTrain.map((d) => d.split(",")[0])}
+              openBackTrainInfo={openBackTrainInfo}
+              isConcatNear={isConcatNear}
             />
           ))}
 
@@ -583,6 +630,9 @@ const StationButton = ({
   points,
   currentTrainData,
   openStationACFromEachTrainInfo,
+  headAndTail,
+  openBackTrainInfo,
+  isConcatNear,
 }) => {
   const [station, se, time] = i.split(","); // 阿波池田,発,6:21
   const Stations = stationList
@@ -618,94 +668,120 @@ const StationButton = ({
     .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
   const timeString = dates.format("HH:mm").split(":");
 
+  const StationNames = Stations && Stations[0]?.StationName;
+  const [isConnected, setIsConnected] = useState(
+    headAndTail.includes(StationNames)
+  );
+  const swipagleRef = useRef(null);
   return (
-    <TouchableWithoutFeedback
-      onPress={() => openStationACFromEachTrainInfo(station)}
+    <Swipeable
+      ref={swipagleRef}
       key={station}
+      onSwipeableOpen={() => {
+        openBackTrainInfo(station, index);
+        swipagleRef.current.close();
+      }}
+      renderRightActions={
+        isConnected && !isConcatNear
+          ? (progress, dragX) => {
+              //openBackTrainInfo(station, index);
+              return <View style={{ flex: 1, backgroundColor: "red" }}></View>;
+            }
+          : null
+      }
     >
-      <View style={{ flexDirection: "row" }}>
-        <View
-          style={{
-            width: 35,
-            position: "relative",
-            marginHorizontal: 15,
-            flexDirection: "row",
-            height: "101%",
-          }}
-        >
-          {lineIDs.map((lineID, index) => (
-            <View
-              style={{
-                backgroundColor: lineColorList[lineID],
-                flex: 1,
-              }}
-              key={lineID}
-            >
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{
-                  color: "white",
-                  textAlign: "center",
-                  fontSize: 10,
-                  fontWeight: "bold",
-                }}
-              >
-                {lineIDs[index]}
-                {"\n"}
-                {EachIDs[index]}
-              </Text>
-              <View style={{ flex: 1 }} />
-            </View>
-          ))}
-        </View>
-        <View
-          style={{
-            padding: 8,
-            flexDirection: "row",
-            borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
-            flex: 1,
-          }}
-        >
-          <Text style={{ fontSize: 20 }}>{station}</Text>
-          <View style={{ flex: 1 }} />
-          {points && points.findIndex((d) => d == index) >= 0 ? (
-            <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
-          ) : null}
-          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
-            <Text
-              style={{
-                fontSize: 15,
-                color: "black",
-                width: 60,
-                position: "absolute",
-                right: 120,
-                textAlign: "right",
-                textDecorationLine: "line-through",
-              }}
-            >
-              {time}
-            </Text>
-          )}
-          <Text
+      <TouchableWithoutFeedback
+        onPress={() => openStationACFromEachTrainInfo(station)}
+        key={station}
+      >
+        <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+          <View
             style={{
-              fontSize: 20,
-              color: isNaN(currentTrainData?.delay)
-                ? "black"
-                : currentTrainData?.delay == 0
-                ? "black"
-                : "red",
-              width: 60,
+              width: 35,
+              position: "relative",
+              marginHorizontal: 15,
+              flexDirection: "row",
+              height: "101%",
             }}
           >
-            {timeString[0]}:{timeString[1]}
-          </Text>
-          <Text style={{ fontSize: 18, width: 50 }}>
-            {se?.replace("発", "出発").replace("着", "到着")}
-          </Text>
+            {lineIDs.map((lineID, index) => (
+              <View
+                style={{
+                  backgroundColor: lineColorList[lineID],
+                  flex: 1,
+                }}
+                key={lineID}
+              >
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{
+                    color: "white",
+                    textAlign: "center",
+                    fontSize: 10,
+                    fontWeight: "bold",
+                  }}
+                >
+                  {lineIDs[index]}
+                  {"\n"}
+                  {EachIDs[index]}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </View>
+            ))}
+          </View>
+          <View
+            style={{
+              padding: 8,
+              flexDirection: "row",
+              borderBottomWidth: 1,
+              borderBottomColor: "#f0f0f0",
+              borderRightColor: isConnected && !isConcatNear ? "red" : "white",
+              borderRightWidth: 10,
+              paddingRight: 10,
+              flex: 1,
+            }}
+          >
+            <Text style={{ fontSize: 20 }}>{station}</Text>
+            <View style={{ flex: 1 }} />
+            {points && points.findIndex((d) => d == index) >= 0 ? (
+              <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
+            ) : null}
+            {!isNaN(currentTrainData?.delay) &&
+              currentTrainData?.delay != 0 && (
+                <Text
+                  style={{
+                    fontSize: 15,
+                    color: "black",
+                    width: 60,
+                    position: "absolute",
+                    right: 120,
+                    textAlign: "right",
+                    textDecorationLine: "line-through",
+                  }}
+                >
+                  {time}
+                </Text>
+              )}
+            <Text
+              style={{
+                fontSize: 20,
+                color: isNaN(currentTrainData?.delay)
+                  ? "black"
+                  : currentTrainData?.delay == 0
+                  ? "black"
+                  : "red",
+                width: 60,
+              }}
+            >
+              {timeString[0]}:{timeString[1]}
+            </Text>
+            <Text style={{ fontSize: 18, width: 50 }}>
+              {se?.replace("発", "出発").replace("着", "到着")}
+            </Text>
+          </View>
         </View>
-      </View>
-    </TouchableWithoutFeedback>
+      </TouchableWithoutFeedback>
+    </Swipeable>
   );
 };