463 lines
15 KiB
JavaScript
463 lines
15 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import {
|
||
View,
|
||
LayoutAnimation,
|
||
ScrollView,
|
||
Linking,
|
||
Text,
|
||
TouchableOpacity,
|
||
TouchableWithoutFeedback,
|
||
TouchableHighlight,
|
||
Platform,
|
||
} from "react-native";
|
||
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||
import ActionSheet from "react-native-actions-sheet";
|
||
import LottieView from "lottie-react-native";
|
||
import trainList from "../../assets/originData/trainList";
|
||
import { lineList } from "../../lib/getStationList";
|
||
import { heightPercentageToDP } from "react-native-responsive-screen";
|
||
import lineColorList from "../../assets/originData/lineColorList";
|
||
|
||
export const EachTrainInfo = ({
|
||
setRef,
|
||
data,
|
||
navigate,
|
||
originalStationList,
|
||
openStationACFromEachTrainInfo,
|
||
from,
|
||
}) => {
|
||
const [trainData, setTrainData] = useState([]);
|
||
const [isTop, setIsTop] = useState(true);
|
||
const [currentPosition, setCurrentPosition] = useState([]);
|
||
|
||
const getStationData = (stationName) => {
|
||
const Stations = stationList.map((a) =>
|
||
a.filter((d) => d.StationName == stationName)
|
||
);
|
||
const Station =
|
||
Stations &&
|
||
Stations.reduce((newArray, e) => {
|
||
return newArray.concat(e);
|
||
}, []);
|
||
if (!Station[0]) return [];
|
||
return Station.map((d) => d.StationNumber)[0];
|
||
};
|
||
useEffect(() => {
|
||
//data.trainData.Pos = "鴨川～端岡"; //test
|
||
if (!data.trainData?.Pos) return;
|
||
if (data.trainData?.Pos.match("～")) {
|
||
const pos = data.trainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～");
|
||
setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
|
||
} else {
|
||
setCurrentPosition([getStationData(data.trainData?.Pos)]);
|
||
}
|
||
}, [data.trainData]);
|
||
|
||
const stationList =
|
||
originalStationList &&
|
||
lineList.map((d) =>
|
||
originalStationList[d].map((a) => ({
|
||
StationNumber: a.StationNumber,
|
||
StationName: a.Station_JP,
|
||
}))
|
||
);
|
||
const stopStationIDList = trainData.map((i, index) => {
|
||
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);
|
||
}, [])
|
||
.filter((d) => d.StationNumber)
|
||
.map((d) => d.StationNumber);
|
||
return StationNumbers[0];
|
||
});
|
||
function findReversalPoints(array) {
|
||
let reversalPoints = [];
|
||
|
||
for (let i = 0; i < stopStationIDList.length; i++) {
|
||
if (array.length == 1) {
|
||
console.log(stopStationIDList[i], array[0]);
|
||
if (stopStationIDList[i] == array[0]) {
|
||
reversalPoints.push(i);
|
||
} else if (
|
||
stopStationIDList[i] > array[0] &&
|
||
stopStationIDList[i + 1] < array[0]
|
||
) {
|
||
reversalPoints.push(i + 1);
|
||
}
|
||
} else {
|
||
if (
|
||
stopStationIDList[i] == array[0] &&
|
||
stopStationIDList[i + 1] == array[1]
|
||
) {
|
||
reversalPoints.push(i + 1);
|
||
} else if (
|
||
stopStationIDList[i] == array[1] &&
|
||
stopStationIDList[i + 1] == array[0]
|
||
) {
|
||
reversalPoints.push(i + 1);
|
||
} else if (
|
||
array[0] < stopStationIDList[i] &&
|
||
stopStationIDList[i] < array[1]
|
||
) {
|
||
reversalPoints.push(i);
|
||
} else if (
|
||
array[1] < stopStationIDList[i] &&
|
||
stopStationIDList[i] < array[0]
|
||
) {
|
||
reversalPoints.push(i);
|
||
} else if (
|
||
stopStationIDList[i + 1] < array[0] &&
|
||
stopStationIDList[i + 1] < array[1] &&
|
||
stopStationIDList[i] > array[0] &&
|
||
stopStationIDList[i] > array[1]
|
||
) {
|
||
reversalPoints.push(i + 1);
|
||
} else if (
|
||
stopStationIDList[i + 1] > array[0] &&
|
||
stopStationIDList[i + 1] > array[1] &&
|
||
stopStationIDList[i] < array[0] &&
|
||
stopStationIDList[i] < array[1]
|
||
) {
|
||
reversalPoints.push(i + 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
return reversalPoints;
|
||
}
|
||
|
||
// 使用例
|
||
const points = findReversalPoints(currentPosition);
|
||
console.log(currentPosition, points);
|
||
console.log(currentPosition.length, points.length);
|
||
|
||
useEffect(() => {
|
||
console.log(data);
|
||
setIsTop(true);
|
||
if (!data.trainNum) return;
|
||
const TD = trainList[data.trainNum];
|
||
if (!TD) {
|
||
setTrainData([]);
|
||
return;
|
||
}
|
||
setTrainData(TD.split("#"));
|
||
}, [data]);
|
||
const getType = (string) => {
|
||
switch (string) {
|
||
case "express":
|
||
return "特急";
|
||
case "rapid":
|
||
return "快速";
|
||
default:
|
||
return "";
|
||
}
|
||
};
|
||
|
||
const migrateTrainName = (string) => {
|
||
return string
|
||
.replace("マリン", "マリンライナー")
|
||
.replace("ライナーライナー", "ライナー");
|
||
};
|
||
|
||
return (
|
||
<ActionSheet
|
||
ref={setRef}
|
||
gestureEnabled={isTop}
|
||
CustomHeaderComponent={<></>}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderRadius: 5,
|
||
borderColor: "dark",
|
||
borderWidth: 1,
|
||
}}
|
||
>
|
||
<View style={{ height: 26, width: "100%" }}>
|
||
<View
|
||
style={{
|
||
height: 6,
|
||
width: 45,
|
||
borderRadius: 100,
|
||
backgroundColor: "#f0f0f0",
|
||
marginVertical: 10,
|
||
alignSelf: "center",
|
||
}}
|
||
/>
|
||
</View>
|
||
<View
|
||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||
>
|
||
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
|
||
{data.limited
|
||
? getType(data.limited.split(":")[0]) +
|
||
migrateTrainName(data.limited.split(":")[1] || "普通")
|
||
: ""}
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
|
||
{data.trainNum}
|
||
</Text>
|
||
{data.limited != undefined &&
|
||
getType(data.limited.split(":")[0]) &&
|
||
!data.limited.split(":")[1].match("サンポート") && (
|
||
<Ionicons
|
||
name="subway"
|
||
color="white"
|
||
size={30}
|
||
style={{ margin: 5 }}
|
||
onPress={() => {
|
||
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
|
||
|
||
navigate("trainbase", {
|
||
info: "train.html?tn=" + data.trainNum,
|
||
from,
|
||
});
|
||
setRef.current?.hide();
|
||
}}
|
||
/>
|
||
)}
|
||
</View>
|
||
<View
|
||
style={{ flexDirection: "row", height: heightPercentageToDP("20%") }}
|
||
>
|
||
<View
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
||
現在地 {currentPosition.toString()}
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
{data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
|
||
<>
|
||
<Text
|
||
style={{
|
||
fontSize: 28,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
}}
|
||
>
|
||
{
|
||
data.trainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～")[0]
|
||
}
|
||
</Text>
|
||
<Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
|
||
<Text
|
||
style={{
|
||
fontSize: 28,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
}}
|
||
>
|
||
{
|
||
data.trainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～")[1]
|
||
}
|
||
</Text>
|
||
</>
|
||
) : (
|
||
<Text
|
||
style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
|
||
>
|
||
{data.trainData?.Pos}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
<View style={{ flex: 1, flexDirection: "column" }}>
|
||
<View
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
||
{isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 32,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
}}
|
||
>
|
||
{data.trainData?.delay}
|
||
{isNaN(data.trainData?.delay) ? "" : "分"}
|
||
</Text>
|
||
</View>
|
||
<View
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
|
||
<Text
|
||
style={{
|
||
fontSize: 32,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
}}
|
||
>
|
||
{data.trainData?.num}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<ScrollView
|
||
style={{ maxHeight: heightPercentageToDP("55%") }}
|
||
nestedScrollEnabled
|
||
onScroll={(e) => {
|
||
if (!Platform.OS !== "android") return;
|
||
setIsTop(e.nativeEvent.contentOffset.y < 0);
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
padding: 10,
|
||
backgroundColor: "white",
|
||
borderBottomLeftRadius: 5,
|
||
borderBottomRightRadius: 5,
|
||
}}
|
||
>
|
||
<View style={{ alignItems: "center" }}>
|
||
{/* <LottieView
|
||
autoPlay
|
||
loop
|
||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||
source={require("../../assets/51690-loading-diamonds.json")}
|
||
/>
|
||
<Text>ほげほげふがふが</Text> */}
|
||
{trainData.map((i, index) => {
|
||
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);
|
||
}, [])
|
||
.filter((d) => d.StationNumber)
|
||
.map((d) => d.StationNumber);
|
||
|
||
const colorIDs =
|
||
StationNumbers != null
|
||
? StationNumbers.map((d) => {
|
||
return d.split("").filter((s) => "A" < s && s < "Z");
|
||
}).reduce((newArray, e) => {
|
||
return newArray.concat(e);
|
||
}, [])
|
||
: [];
|
||
const EachIDs =
|
||
StationNumbers != null
|
||
? StationNumbers.map((d) => {
|
||
return d
|
||
.split("")
|
||
.filter((s) => "0" <= s && s <= "9")
|
||
.join("");
|
||
})
|
||
: [];
|
||
return (
|
||
<TouchableWithoutFeedback
|
||
onPress={() => openStationACFromEachTrainInfo(station)}
|
||
key={station}
|
||
>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<View
|
||
style={{
|
||
width: 35,
|
||
position: "relative",
|
||
marginHorizontal: 15,
|
||
flexDirection: "row",
|
||
height: "101%",
|
||
}}
|
||
>
|
||
{colorIDs.map((color, index) => (
|
||
<View
|
||
style={{
|
||
backgroundColor: lineColorList[color],
|
||
flex: 1,
|
||
}}
|
||
key={color}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
color: "white",
|
||
textAlign: "center",
|
||
fontSize: 10,
|
||
fontWeight: "bold",
|
||
}}
|
||
>
|
||
{colorIDs[index]}
|
||
</Text>
|
||
<Text
|
||
style={{
|
||
color: "white",
|
||
textAlign: "center",
|
||
fontSize: 10,
|
||
fontWeight: "bold",
|
||
}}
|
||
>
|
||
{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 }} />
|
||
<Text style={{ fontSize: 20 }}>
|
||
{/* {StationNumbers.length != 0 &&
|
||
(StationNumbers.includes(currentPosition[0])
|
||
? "にゃーん"
|
||
: "ほげ")}
|
||
{currentPosition} */}
|
||
{points.includes(index) ? "🚉" : ""}
|
||
{time} {se}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</TouchableWithoutFeedback>
|
||
);
|
||
})}
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</ActionSheet>
|
||
);
|
||
};
|