Merge commit 'cbcb0dc9c2fec766f563559a7d9303fb8d402e9a' into develop

components/ActionSheetComponents/EachTrainInfo.js

@@ -7,7 +7,6 @@ import {
   Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  TouchableHighlight,
   Platform,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
@@ -15,9 +14,7 @@ import ActionSheet, {
   SheetManager,
   useScrollHandlers,
 } from "react-native-actions-sheet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AS } from "../../storageControl";
-import LottieView from "lottie-react-native";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
 import {
@@ -31,7 +28,6 @@ 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 <></>;
@@ -44,123 +40,110 @@ export const EachTrainInfo = (props) => {
   } = props.payload;
   const [trainData, setTrainData] = useState([]);
   const [currentPosition, setCurrentPosition] = useState([]);
-
   const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
 
   const { currentTrain } = useCurrentTrain();
-  const { initializeTrainPairList } = useBusAndTrainData();
+  const { getInfluencedTrainData } = useBusAndTrainData();
 
   const [currentTrainData, setCurrentTrainData] = useState([]);
   const [nearTrainIDList, setNearTrainIDList] = useState([]);
   const [showNearTrain, setShowNearTrain] = useState([]);
   const [isConcatNear, setIsConcatNear] = useState(false);
+  const [tailStation, setTailStation] = useState();
+  const [headStation, setHeadStation] = useState();
+  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
 
   //裏列車探索
   useEffect(() => {
-    const trainPairList = initializeTrainPairList();
-
-    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)
-    ) {
-      if (trainList[data.trainNum.substring(1)]) {
-        returnArray.push(data.trainNum.substring(1));
-      }
-    }
-    if (new RegExp(/^[1-9]\d\d[DM]$/).test(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);
-    }
+    const [returnArray, TDArray] = getInfluencedTrainData(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); //trainDataは現在の列車の停車駅リスト
-    console.log(showNearTrain); //showNearTrainは裏列車の停車駅リスト
-    const mainTrainStationPosition = trainData.findIndex(
-      (d) => d.split(",")[0] == stationInfo
-    );
-    const relationMain =
-      mainTrainStationPosition == 0
-        ? "head"
-        : mainTrainStationPosition == trainData.length - 1
-        ? "tail"
-        : "middle";
-    console.log(relationMain);
+  useEffect(() => {
+    if (trainData.length == 0) return;
+    if (showNearTrain.length == 0) return;
+    showNearTrain.forEach((d) => {
+      const [station, se, time] = d.split(",");
 
-    const subTrainStationPosition = showNearTrain.findIndex(
-      (d) => d.split(",")[0] == stationInfo
-    );
-    const relationSub =
-      subTrainStationPosition == 0
-        ? "head"
-        : subTrainStationPosition == showNearTrain.length - 1
-        ? "tail"
-        : "middle";
-    console.log(relationSub);
-    switch (relationMain) {
-      case "head":
-        if (relationSub == "head") {
-          break;
-        } else if (relationSub == "tail") {
-          const migrationTrainData = [
-            ...showNearTrain.slice(0, subTrainStationPosition),
-            ...trainData,
-          ];
-          setTrainData(migrationTrainData);
-        } else if (relationSub == "middle") {
-          const migrationTrainData = [
-            ...showNearTrain.slice(0, subTrainStationPosition),
-            ...trainData,
-          ];
-          setTrainData(migrationTrainData);
-        }
-        break;
-      case "tail":
-        if (relationSub == "head") {
-          const migrationTrainData = [
-            ...trainData.slice(0, mainTrainStationPosition),
-            ...showNearTrain,
-          ];
-          setTrainData(migrationTrainData);
-        } else if (relationSub == "tail") {
-          break;
-        } else if (relationSub == "middle") {
-          const migrationTrainData = [
-            ...trainData.slice(0, mainTrainStationPosition),
-            ...showNearTrain.slice(subTrainStationPosition),
-          ];
-          setTrainData(migrationTrainData);
-        }
-        break;
-      case "middle":
-        if (relationSub == "head") {
-          const migrationTrainData = [
-            ...trainData.slice(0, mainTrainStationPosition),
-            ...showNearTrain,
-          ];
-          setTrainData(migrationTrainData);
-        } else if (relationSub == "tail") {
-          const migrationTrainData = [
-            ...showNearTrain.slice(0, subTrainStationPosition),
-            ...trainData.slice(mainTrainStationPosition),
-          ];
-          setTrainData(migrationTrainData);
-        }
-        break;
-    }
+      console.log(trainData); //trainDataは現在の列車の停車駅リスト
+      console.log(station); //showNearTrainは裏列車の停車駅リスト
+      console.log(trainData[0]);
+      if (station == trainData[0].split(",")[0])
+        setHeadStation(trainData[0].split(",")[0]);
+      if (station == trainData[trainData.length - 1].split(",")[0])
+        setTailStation(trainData[trainData.length - 1].split(",")[0]);
+    });
+  }, [trainData, showNearTrain]);
+
+  const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
+    const migrationArray = (stationInfo) => {
+      const mainTrainStationPosition = trainData.findIndex(
+        (d) => d.split(",")[0] == stationInfo
+      );
+
+      const relationMain = (() => {
+        if (mainTrainStationPosition == 0) return "head";
+        if (mainTrainStationPosition == trainData.length - 1) return "tail";
+        return "middle";
+      })();
+
+      const subTrainStationPosition = showNearTrain.findIndex(
+        (d) => d.split(",")[0] == stationInfo
+      );
+      const relationSub = (() => {
+        if (subTrainStationPosition == 0) return "head";
+        if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
+        return "middle";
+      })();
+
+      switch (relationMain) {
+        case "head":
+          if (relationSub == "head") {
+            return;
+          } else if (relationSub == "tail") {
+            return [
+              ...showNearTrain.slice(0, subTrainStationPosition),
+              ...trainData,
+            ];
+          } else if (relationSub == "middle") {
+            return [
+              ...showNearTrain.slice(0, subTrainStationPosition),
+              ...trainData,
+            ];
+          } else return;
+        case "tail":
+          if (relationSub == "head") {
+            return [
+              ...trainData.slice(0, mainTrainStationPosition),
+              ...showNearTrain,
+            ];
+          } else if (relationSub == "tail") {
+            return;
+          } else if (relationSub == "middle") {
+            return [
+              ...trainData.slice(0, mainTrainStationPosition),
+              ...showNearTrain.slice(subTrainStationPosition),
+            ];
+          } else return;
+        case "middle":
+          if (relationSub == "head") {
+            return [
+              ...trainData.slice(0, mainTrainStationPosition),
+              ...showNearTrain,
+            ];
+          } else if (relationSub == "tail") {
+            return [
+              ...showNearTrain.slice(0, subTrainStationPosition),
+              ...trainData.slice(mainTrainStationPosition),
+            ];
+          } else return;
+      }
+    };
+    const array = migrationArray(stationInfo);
+    if (!array) return;
+    setTrainData(array);
     setIsConcatNear(true);
   };
 
@@ -183,7 +166,12 @@ export const EachTrainInfo = (props) => {
       originalStationList,
       from: "AllTrainDiagramView",
     };
-    //SheetManager.show("EachTrainInfo", { payload });
+    SheetManager.hide("EachTrainInfo").then(() => {
+      //0.1秒待機してから開く
+      setTimeout(() => {
+        SheetManager.show("EachTrainInfo", { payload });
+      }, 1);
+    });
   };
   useEffect(() => {
     setCurrentTrainData(
@@ -399,6 +387,7 @@ export const EachTrainInfo = (props) => {
   return (
     <ActionSheet
       gestureEnabled={true}
+      //gestureEnabled={!actionSheetHorizonalScroll}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
@@ -466,6 +455,9 @@ export const EachTrainInfo = (props) => {
         </View>
         {from == "AllTrainDiagramView" || (
           <ScrollView
+            //onTouchStart={() => setActionSheetHorizonalScroll(true)}
+            //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+            //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
             style={{
               flexDirection: "row",
               //width: widthPercentageToDP("200%"),
@@ -478,6 +470,8 @@ export const EachTrainInfo = (props) => {
             <TrainDataView
               currentTrainData={currentTrainData}
               currentPosition={currentPosition}
+              nearTrainIDList={nearTrainIDList}
+              openTrainInfo={openTrainInfo}
             />
             {/* <View
               style={{
@@ -622,6 +616,26 @@ export const EachTrainInfo = (props) => {
             backgroundColor: "white",
           }}
         >
+          {headStation && !isConcatNear && (
+            <TouchableOpacity
+              onPress={() => openBackTrainInfo(headStation)}
+              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
@@ -630,19 +644,40 @@ export const EachTrainInfo = (props) => {
               />
               <Text>ほげほげふがふが</Text> */}
 
-          {trainData.map((i, index) => (i.split(",")[1] == "提" ? <DataFromButton i={i} /> :
-            <StationButton
-              i={i}
-              index={index}
-              stationList={stationList}
-              points={points}
-              currentTrainData={currentTrainData}
-              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-              headAndTail={showNearTrain.map((d) => d.split(",")[0])}
-              openBackTrainInfo={openBackTrainInfo}
-              isConcatNear={isConcatNear}
-            />
-          ))}
+          {trainData.map((i, index) =>
+            i.split(",")[1] == "提" ? (
+              <DataFromButton i={i} />
+            ) : (
+              <StationButton
+                i={i}
+                index={index}
+                stationList={stationList}
+                points={points}
+                currentTrainData={currentTrainData}
+                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+              />
+            )
+          )}
+          {tailStation && !isConcatNear && (
+            <TouchableOpacity
+              onPress={() => openBackTrainInfo(tailStation)}
+              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
@@ -664,7 +699,7 @@ export const EachTrainInfo = (props) => {
   );
 };
 
-const DataFromButton  = ({i}) => {
+const DataFromButton = ({ i }) => {
   const [station, se, time] = i.split(",");
   return (
     <TouchableWithoutFeedback
@@ -684,14 +719,18 @@ const DataFromButton  = ({i}) => {
           <Text style={{ fontSize: 20 }}>{station}</Text>
           <View style={{ flex: 1 }} />
           <Text style={{ fontSize: 18 }}>
-            提供元<MaterialCommunityIcons name={"open-in-new"} color="black" size={20} />
+            提供元
+            <MaterialCommunityIcons
+              name={"open-in-new"}
+              color="black"
+              size={20}
+            />
           </Text>
-          
         </View>
       </View>
     </TouchableWithoutFeedback>
   );
-}
+};
 
 const StationButton = ({
   i,
@@ -700,9 +739,6 @@ const StationButton = ({
   points,
   currentTrainData,
   openStationACFromEachTrainInfo,
-  headAndTail,
-  openBackTrainInfo,
-  isConcatNear,
 }) => {
   const [station, se, time] = i.split(","); // 阿波池田,発,6:21
   const Stations = stationList
@@ -738,124 +774,103 @@ 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 (
-    <Swipeable
-      ref={swipagleRef}
+    <TouchableWithoutFeedback
+      onPress={() => openStationACFromEachTrainInfo(station)}
       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
-      }
     >
-      <TouchableWithoutFeedback
-        onPress={() => openStationACFromEachTrainInfo(station)}
-        key={station}
-      >
-        <View style={{ flexDirection: "row", backgroundColor: "white" }}>
-          <View
-            style={{
-              width: 35,
-              position: "relative",
-              marginHorizontal: 15,
-              flexDirection: "row",
-              height: "101%",
-            }}
-          >
-            {lineIDs.map((lineID, index) => (
-              <View
+      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+        <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={{
-                  backgroundColor: lineColorList[lineID],
-                  flex: 1,
+                  color: "white",
+                  textAlign: "center",
+                  fontSize: 10,
+                  fontWeight: "bold",
                 }}
-                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>
-              )}
+                {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: 20,
-                color: isNaN(currentTrainData?.delay)
-                  ? "black"
-                  : currentTrainData?.delay == 0
-                  ? "black"
-                  : "red",
+                fontSize: 15,
+                color: "black",
                 width: 60,
+                position: "absolute",
+                right: 120,
+                textAlign: "right",
+                textDecorationLine: "line-through",
               }}
             >
-              {timeString[0]}:{timeString[1]}
+              {time}
             </Text>
-            <Text style={{ fontSize: 18, width: 50 }}>
-              {se?.replace("発", "出発").replace("着", "到着")}
-            </Text>
-          </View>
+          )}
+          <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>
-      </TouchableWithoutFeedback>
-    </Swipeable>
+      </View>
+    </TouchableWithoutFeedback>
   );
 };
 
-const TrainDataView = ({ currentTrainData, currentPosition }) => {
+const TrainDataView = ({
+  currentTrainData,
+  currentPosition,
+  nearTrainIDList,
+  openTrainInfo,
+}) => {
   return (
     <View
       style={{
@@ -882,23 +897,46 @@ const TrainDataView = ({ currentTrainData, currentPosition }) => {
         }
       />
       <View style={{ flex: 1, flexDirection: "column" }}>
-        <StateBox
-          title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
-          text={`${currentTrainData?.delay}${
-            isNaN(currentTrainData?.delay) ? "" : "分"
-          }`}
-        />
-        <StateBox title="列番" text={currentTrainData?.num} />
+        <View style={{ flex: 1, flexDirection: "row" }}>
+          <StateBox
+            title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
+            text={`${currentTrainData?.delay}${
+              isNaN(currentTrainData?.delay) ? "" : "分"
+            }`}
+          />
+        </View>
+        <TouchableOpacity
+          style={{ flex: 1, flexDirection: "row" }}
+          disabled={nearTrainIDList.length == 0}
+          onPress={() => {
+            if (nearTrainIDList.length == 0) return;
+            openTrainInfo(nearTrainIDList[0]);
+          }}
+        >
+          {nearTrainIDList.length == 0 ? (
+            <StateBox title="列番" text={currentTrainData?.num} />
+          ) : (
+            <StateBox
+              title="増解結相手を表示▶️"
+              text={`${nearTrainIDList}`}
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                borderStyle: "solid",
+              }}
+            />
+          )}
+        </TouchableOpacity>
       </View>
     </View>
   );
 };
 
-const StateBox = ({ text, title }) => (
-  <View style={boxStyle}>
-    <Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
+const StateBox = ({ text, title, style }) => (
+  <View style={{ ...boxStyle, ...style }}>
+    <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
     <View style={{ flex: 1 }} />
-    <View style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
+    <View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
       {text?.match("～") ? (
         <>
           <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
@@ -919,7 +957,7 @@ const boxStyle = {
   margin: 10,
 };
 const boxTextStyle = {
-  fontSize: 28,
+  fontSize: 25,
   color: "#0099CC",
   textAlign: "right",
 };

stateBox/useBusAndTrainData.js

@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useState } from "react";
+import trainList from "../assets/originData/trainList";
 const initialState = {
   busAndTrainData: [],
   setBusAndTrainData: () => {},
   trainPairData: [],
   setTrainPairData: () => {},
   initializeTrainPairList: () => {},
+  getInfluencedTrainData: () => {},
 };
 
 const BusAndTrainDataContext = createContext(initialState);
@@ -23,6 +25,34 @@ export const BusAndTrainDataProvider = ({ children }) => {
     });
     return trainPairList;
   };
+  const getInfluencedTrainData = (trainNum) => {
+    const trainPairList = initializeTrainPairList();
+
+    const returnArray = [];
+    if (!trainNum) return;
+    if (trainPairList[trainNum]) {
+      returnArray.push(Object.keys(trainPairList[trainNum])[0]);
+    }
+    if (
+      // 列番が4xxDまたは5xxDの場合はxxDの列番を検索
+      new RegExp(/^4[1-9]\d\d[DM]$/).test(trainNum) ||
+      new RegExp(/^5[1-7]\d\d[DM]$/).test(trainNum)
+    ) {
+      if (trainList[trainNum.substring(1)]) {
+        returnArray.push(trainNum.substring(1));
+      }
+    }
+    if (new RegExp(/^[1-9]\d\d[DM]$/).test(trainNum)) {
+      // 列番がxxDの場合は4xxDと5xxDの列番を検索
+      if (trainList["4" + trainNum]) returnArray.push("4" + trainNum);
+      if (trainList["5" + trainNum]) returnArray.push("5" + trainNum);
+    }
+    if (!returnArray[0]) return [[], []];
+    const TD = trainList[returnArray[0]];
+    if (!TD) return [[], []];
+    const TDArray = TD.split("#").filter((d) => d != "");
+    return [returnArray, TDArray];
+  };
   return (
     <BusAndTrainDataContext.Provider
       value={{
@@ -31,6 +61,7 @@ export const BusAndTrainDataProvider = ({ children }) => {
         trainPairData,
         setTrainPairData,
         initializeTrainPairList,
+        getInfluencedTrainData,
       }}
     >
       {children}