573 lines
19 KiB
JavaScript
573 lines
19 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||
import {
|
||
View,
|
||
Text,
|
||
TouchableOpacity,
|
||
StyleSheet,
|
||
useWindowDimensions,
|
||
BackHandler,
|
||
Linking,
|
||
LayoutAnimation,
|
||
} from "react-native";
|
||
import { SheetManager } from "react-native-actions-sheet";
|
||
import { useScrollHandlers } from "react-native-actions-sheet";
|
||
import { AS } from "../../storageControl";
|
||
import trainList from "../../assets/originData/trainList";
|
||
import { lineListPair } from "../../lib/getStationList";
|
||
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
||
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
|
||
import { getTrainType } from "../../lib/getTrainType";
|
||
import { customTrainDataDetector } from "../custom-train-data";
|
||
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
||
import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
|
||
import { EachStopList } from "./EachTrainInfo/EachStopList";
|
||
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
|
||
import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
|
||
import { LongHeader } from "./EachTrainInfo/LongHeader";
|
||
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
|
||
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
|
||
import { getStationID } from "../../lib/eachTrainInfoCoreLib/getStationData";
|
||
import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
|
||
import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
|
||
import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
|
||
import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
|
||
import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
|
||
import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
|
||
import { useTrainMenu } from "../../stateBox/useTrainMenu";
|
||
import { HeaderText } from "./EachTrainInfoCore/HeaderText";
|
||
import { useStationList } from "../../stateBox/useStationList";
|
||
import { stationIDPair } from "../../lib/getStationList2";
|
||
|
||
export const EachTrainInfoCore = ({
|
||
actionSheetRef,
|
||
data,
|
||
openStationACFromEachTrainInfo,
|
||
from,
|
||
navigate,
|
||
}) => {
|
||
// const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
|
||
const { currentTrain } = useCurrentTrain();
|
||
const { originalStationList, stationList } = useStationList();
|
||
const { setTrainInfo } = useTrainMenu();
|
||
const [currentTrainData, setCurrentTrainData] = useState();
|
||
|
||
// const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!currentTrain.length) return;
|
||
setCurrentTrainData(
|
||
checkDuplicateTrainData(
|
||
currentTrain.filter((d) => d.num == data.trainNum),
|
||
stationList
|
||
)
|
||
);
|
||
}, [currentTrain, data.trainNum]);
|
||
|
||
useEffect(() => {
|
||
const backAction = () => {
|
||
SheetManager.hide("EachTrainInfo");
|
||
return true;
|
||
};
|
||
const backHandler = BackHandler.addEventListener(
|
||
"hardwareBackPress",
|
||
backAction
|
||
);
|
||
return () => backHandler.remove();
|
||
}, []);
|
||
|
||
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");
|
||
const [currentPosition, setCurrentPosition] = useState([]);
|
||
const [trainData, setTrainData] = useState([]);
|
||
const [trainDataWidhThrough, setTrainDataWithThrough] = useState([]);
|
||
const [showThrew, setShowThrew] = useState(false);
|
||
const [haveThrough, setHaveThrough] = useState(false);
|
||
|
||
// 使用例
|
||
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;
|
||
});
|
||
useEffect(() => {
|
||
const stopStationList = trainData.map((i) => {
|
||
const [station, se, time] = i.split(",");
|
||
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);
|
||
}, [trainData]);
|
||
|
||
const points =
|
||
trainPositionSwitch == "true"
|
||
? findReversalPoints(currentPosition, stopStationIDList)
|
||
: stopStationIDList.map(() => false);
|
||
const [isJumped, setIsJumped] = useState(false);
|
||
useEffect(() => {
|
||
if (isJumped) return () => {};
|
||
if (!points) return () => {};
|
||
if (points.length == 0) return () => {};
|
||
const position = points.findIndex((d) => d == true);
|
||
let isThrew = false;
|
||
if (position == -1) return () => {};
|
||
if (trainDataWidhThrough[position].split(",")[1] == "通過") {
|
||
LayoutAnimation.configureNext({
|
||
duration: 400,
|
||
update: { type: "easeInEaseOut", springDamping: 0.6 },
|
||
});
|
||
setShowThrew(true);
|
||
isThrew = true;
|
||
}
|
||
if (position < 5) {
|
||
} // 5駅以内の場合はスクロールしない
|
||
else {
|
||
const count = position * 44 - 50;
|
||
// 0.5秒待機してからスクロール
|
||
setTimeout(
|
||
() => scrollHandlers.ref.current?.scrollTo({ y: count, animated: true }),
|
||
400
|
||
);
|
||
}
|
||
setIsJumped(true);
|
||
}, [points]);
|
||
const trainName = useMemo(() => {
|
||
if (!data.limited) return "";
|
||
const limitedArray = data.limited.split(":");
|
||
const type = getType(limitedArray[0]);
|
||
|
||
switch (true) {
|
||
case !!limitedArray[1]:
|
||
// 特急の場合は、列車名を取得
|
||
return type + migrateTrainName(limitedArray[1]);
|
||
case trainData.length == 0:
|
||
// 特急以外の場合は、列車番号を取得
|
||
return type;
|
||
default:
|
||
// 行先がある場合は、行先を取得
|
||
return (
|
||
type +
|
||
migrateTrainName(
|
||
trainData[trainData.length - 1].split(",")[0] + "行き"
|
||
)
|
||
);
|
||
}
|
||
}, [data.limited, trainData]);
|
||
|
||
const { height } = useWindowDimensions();
|
||
const { isLandscape } = useDeviceOrientationChange();
|
||
const scrollHandlers = actionSheetRef
|
||
? useScrollHandlers("scrollview-1", actionSheetRef)
|
||
: null;
|
||
const [trueTrainID, setTrueTrainID] = useState();
|
||
useEffect(() => {
|
||
if (!data.trainNum) return;
|
||
const TD = trainList[data.trainNum];
|
||
setHeadStation([]);
|
||
setTailStation([]);
|
||
if (!TD) {
|
||
const specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
|
||
setTrueTrainID(specialTrainActualID || undefined);
|
||
setTrainData([]);
|
||
return;
|
||
}
|
||
setTrainData(TD.split("#").filter((d) => d != ""));
|
||
}, [data]);
|
||
//裏列車探索
|
||
useEffect(() => {
|
||
if (!data.trainNum) return;
|
||
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);
|
||
if (trainData.length == 0) return;
|
||
if (TDArray.length == 0) return;
|
||
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([]);
|
||
if (tail) setTailStation(tail);
|
||
else setTailStation([]);
|
||
}, [trainData, data]);
|
||
|
||
useEffect(() => {
|
||
//currentTrainData.Pos = "鴨川～端岡"; //test
|
||
if (!currentTrainData) return;
|
||
if (!currentTrainData?.Pos) return;
|
||
if (currentTrainData?.Pos.match("～")) {
|
||
const pos = currentTrainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.replace("（徳島線）", "")
|
||
.replace("（高徳線）", "")
|
||
.split("～");
|
||
const direction = parseInt(currentTrainData?.Direction) || 0;
|
||
if (pos[0] == "児島" && pos[1] == "宇多津") {
|
||
setCurrentPosition(["M12", "Y09"]);
|
||
return;
|
||
} else if (pos[1] == "児島" && pos[0] == "宇多津") {
|
||
setCurrentPosition(["Y09", "M12"]);
|
||
return;
|
||
}
|
||
const currentPosID = Object.keys(originalStationList).map((key) => {
|
||
let firstStation = false;
|
||
let firstStationID = "";
|
||
let secondStation = false;
|
||
let secondStationID = "";
|
||
originalStationList[key].forEach((station) => {
|
||
if (station.Station_JP === pos[0]) {
|
||
firstStation = true;
|
||
firstStationID = station.StationNumber;
|
||
}
|
||
if (station.Station_JP === pos[1]) {
|
||
secondStation = true;
|
||
secondStationID = station.StationNumber;
|
||
}
|
||
});
|
||
if (firstStation && secondStation) {
|
||
return [firstStationID, secondStationID];
|
||
} else return false;
|
||
});
|
||
const currentPos = currentPosID.filter((d) => d != false)[0];
|
||
if (currentPos) {
|
||
if (direction == 0) setCurrentPosition(currentPos.reverse());
|
||
else setCurrentPosition(currentPos);
|
||
} else if (direction == 0) {
|
||
setCurrentPosition([
|
||
getStationID(pos[1], stationList),
|
||
getStationID(pos[0], stationList),
|
||
]);
|
||
} else {
|
||
setCurrentPosition([
|
||
getStationID(pos[0], stationList),
|
||
getStationID(pos[1], stationList),
|
||
]);
|
||
}
|
||
} else {
|
||
setCurrentPosition([getStationID(currentTrainData?.Pos, stationList)]);
|
||
}
|
||
}, [currentTrainData]);
|
||
|
||
useEffect(() => {
|
||
//列車現在地アイコン表示スイッチ
|
||
AS.getItem("trainPositionSwitch")
|
||
.then((d) => {
|
||
if (d) setTrainPositionSwitch(d);
|
||
})
|
||
.catch(() => AS.setItem("trainPositionSwitch", "true"));
|
||
}, []);
|
||
|
||
const openTrainInfo = (d) => {
|
||
const train = customTrainDataDetector(d);
|
||
let TrainNumber = "";
|
||
if (train.trainNumDistance != undefined) {
|
||
const timeInfo =
|
||
parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
|
||
TrainNumber = timeInfo + "号";
|
||
}
|
||
const payload = {
|
||
data: {
|
||
trainNum: d,
|
||
limited: `${getTrainType(train.type).data}:${
|
||
train.trainName
|
||
}${TrainNumber}`,
|
||
},
|
||
navigate,
|
||
from: from == "LED" ? "LED2" : "NearTrainDiagramView",
|
||
};
|
||
if (isLandscape) {
|
||
setTrainInfo(payload.data);
|
||
} else {
|
||
SheetManager.hide("EachTrainInfo").then(() => {
|
||
//0.1秒待機してから開く
|
||
setTimeout(() => SheetManager.show("EachTrainInfo", { payload }), 2);
|
||
});
|
||
}
|
||
};
|
||
|
||
const headerItem = {
|
||
currentTrainData,
|
||
currentPosition,
|
||
nearTrainIDList,
|
||
openTrainInfo,
|
||
navigate,
|
||
};
|
||
return (
|
||
<View
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderTopRadius: 5,
|
||
borderColor: "dark",
|
||
borderWidth: 1,
|
||
}}
|
||
>
|
||
{isLandscape || (
|
||
<View style={{ height: 26, width: "100%" }}>
|
||
<View
|
||
style={{
|
||
height: 6,
|
||
width: 45,
|
||
borderRadius: 100,
|
||
backgroundColor: "#f0f0f0",
|
||
marginVertical: 10,
|
||
alignSelf: "center",
|
||
}}
|
||
/>
|
||
</View>
|
||
)}
|
||
<HeaderText
|
||
data={data}
|
||
trainData={trainData}
|
||
showHeadStation={showHeadStation}
|
||
showTailStation={showTailStation}
|
||
headStation={headStation}
|
||
tailStation={tailStation}
|
||
navigate={navigate}
|
||
from={from}
|
||
/>
|
||
|
||
<DynamicHeaderScrollView
|
||
from={from}
|
||
styles={styles}
|
||
actionSheetRef={actionSheetRef}
|
||
scrollHandlers={scrollHandlers}
|
||
containerProps={{
|
||
style: {
|
||
maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
|
||
},
|
||
}}
|
||
shortHeader={<ShortHeader {...headerItem} />}
|
||
longHeader={<LongHeader {...headerItem} />}
|
||
topStickyContent={
|
||
<ScrollStickyContent
|
||
{...{ currentTrainData, showThrew, setShowThrew, haveThrough }}
|
||
/>
|
||
}
|
||
>
|
||
{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>
|
||
) : (
|
||
<></>
|
||
)
|
||
)}
|
||
<ShowSpecialTrain
|
||
isTrainDataNothing={trainData.length == 0}
|
||
setTrainData={setTrainData}
|
||
trainList={trainList}
|
||
trueTrainID={trueTrainID}
|
||
/>
|
||
{!trainData.length && (
|
||
<TouchableOpacity
|
||
onPress={() =>
|
||
Linking.openURL(`https://twitter.com/search?q=${data.trainNum}`)
|
||
}
|
||
style={{
|
||
padding: 10,
|
||
flexDirection: "row",
|
||
borderColor: "blue",
|
||
borderWidth: 1,
|
||
margin: 10,
|
||
borderRadius: 5,
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
|
||
Twitterで検索
|
||
</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
{trainDataWidhThrough.map((i, index) =>
|
||
i.split(",")[1] == "提" ? (
|
||
<DataFromButton i={i} />
|
||
) : (
|
||
<EachStopList
|
||
{...{
|
||
i,
|
||
index,
|
||
stationList,
|
||
points: points ? points[index] : false,
|
||
currentTrainData,
|
||
openStationACFromEachTrainInfo,
|
||
showThrew,
|
||
}}
|
||
/>
|
||
)
|
||
)}
|
||
{tailStation.length != 0 &&
|
||
tailStation.map(({ station, dia }, index) =>
|
||
showTailStation.findIndex((d) => d == index) == -1 ? (
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
const array = openBackTrainInfo(station, trainData, dia);
|
||
|
||
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
|
||
style={{
|
||
padding: 8,
|
||
flexDirection: "row",
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: "#f0f0f0",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20 }}> </Text>
|
||
<View style={{ flex: 1 }} />
|
||
</View>
|
||
</View>
|
||
</DynamicHeaderScrollView>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const styles = StyleSheet.create({
|
||
header: {
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
left: 0,
|
||
right: 0,
|
||
//paddingTop: 10,
|
||
position: "absolute",
|
||
zIndex: 1,
|
||
backgroundColor: "f0f0f0",
|
||
},
|
||
headerText: {
|
||
color: "#fff",
|
||
fontSize: 25,
|
||
fontWeight: "bold",
|
||
textAlign: "center",
|
||
},
|
||
});
|