diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js index 84868d7..e88a619 100644 --- a/components/ActionSheetComponents/EachTrainInfo.js +++ b/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 ( } ref={actionSheetRef} drawUnderStatusBar={false} @@ -466,6 +455,9 @@ export const EachTrainInfo = (props) => { {from == "AllTrainDiagramView" || ( setActionSheetHorizonalScroll(true)} + //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)} + //onScrollBeginDrag={() => console.log("onScrollBeginDrag")} style={{ flexDirection: "row", //width: widthPercentageToDP("200%"), @@ -478,6 +470,8 @@ export const EachTrainInfo = (props) => { {/* { backgroundColor: "white", }} > + {headStation && !isConcatNear && ( + openBackTrainInfo(headStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の始発駅」を表示 + + + )} {/* { /> ほげほげふがふが */} - {trainData.map((i, index) => (i.split(",")[1] == "提" ? : - d.split(",")[0])} - openBackTrainInfo={openBackTrainInfo} - isConcatNear={isConcatNear} - /> - ))} + {trainData.map((i, index) => + i.split(",")[1] == "提" ? ( + + ) : ( + + ) + )} + {tailStation && !isConcatNear && ( + openBackTrainInfo(tailStation)} + style={{ + padding: 10, + flexDirection: "row", + borderColor: "blue", + borderWidth: 1, + margin: 10, + borderRadius: 5, + alignItems: "center", + }} + > + + 「本当の終着駅」を表示 + + + )} { ); }; -const DataFromButton = ({i}) => { +const DataFromButton = ({ i }) => { const [station, se, time] = i.split(","); return ( { {station} - 提供元 + 提供元 + - ); -} +}; 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 ( - openStationACFromEachTrainInfo(station)} key={station} - onSwipeableOpen={() => { - openBackTrainInfo(station, index); - swipagleRef.current.close(); - }} - renderRightActions={ - isConnected && !isConcatNear - ? (progress, dragX) => { - //openBackTrainInfo(station, index); - return ; - } - : null - } > - openStationACFromEachTrainInfo(station)} - key={station} - > - - - {lineIDs.map((lineID, index) => ( - + + {lineIDs.map((lineID, index) => ( + + + - - - {lineIDs[index]} - {"\n"} - {EachIDs[index]} - - - - ))} - - - {station} - - {points && points.findIndex((d) => d == index) >= 0 ? ( - 🚊 - ) : null} - {!isNaN(currentTrainData?.delay) && - currentTrainData?.delay != 0 && ( - - {time} - - )} + {lineIDs[index]} + {"\n"} + {EachIDs[index]} + + + + ))} + + + {station} + + {points && points.findIndex((d) => d == index) >= 0 ? ( + 🚊 + ) : null} + {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && ( - {timeString[0]}:{timeString[1]} + {time} - - {se?.replace("発", "出発").replace("着", "到着")} - - + )} + + {timeString[0]}:{timeString[1]} + + + {se?.replace("発", "出発").replace("着", "到着")} + - - + + ); }; -const TrainDataView = ({ currentTrainData, currentPosition }) => { +const TrainDataView = ({ + currentTrainData, + currentPosition, + nearTrainIDList, + openTrainInfo, +}) => { return ( { } /> - - + + + + { + if (nearTrainIDList.length == 0) return; + openTrainInfo(nearTrainIDList[0]); + }} + > + {nearTrainIDList.length == 0 ? ( + + ) : ( + + )} + ); }; -const StateBox = ({ text, title }) => ( - - {title} +const StateBox = ({ text, title, style }) => ( + + {title} - + {text?.match("~") ? ( <> {text.split("~")[0]} @@ -919,7 +957,7 @@ const boxStyle = { margin: 10, }; const boxTextStyle = { - fontSize: 28, + fontSize: 25, color: "#0099CC", textAlign: "right", }; diff --git a/stateBox/useBusAndTrainData.js b/stateBox/useBusAndTrainData.js index 3c8311f..cbfaf86 100644 --- a/stateBox/useBusAndTrainData.js +++ b/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 ( { trainPairData, setTrainPairData, initializeTrainPairList, + getInfluencedTrainData, }} > {children}