158 lines
4.6 KiB
JavaScript
158 lines
4.6 KiB
JavaScript
import React from "react";
|
|
import { View, Text, TouchableWithoutFeedback } from "react-native";
|
|
import dayjs from "dayjs";
|
|
import lineColorList from "../../../assets/originData/lineColorList";
|
|
|
|
export const EachStopList = ({
|
|
i,
|
|
index,
|
|
stationList,
|
|
points,
|
|
currentTrainData,
|
|
openStationACFromEachTrainInfo,
|
|
showThrew,
|
|
}) => {
|
|
if (!showThrew && i.split(",")[1] == "通過") return null;
|
|
const [station, se, time] = i.split(","); // 阿波池田,発,6:21
|
|
const Stations = stationList
|
|
.map((a) => a.filter((d) => d.StationName == station))
|
|
.reduce((newArray, e) => newArray.concat(e), []);
|
|
/*Array [
|
|
Object {
|
|
"StationName": "佐古",
|
|
"StationNumber": "T01",
|
|
},
|
|
Object {
|
|
"StationName": "佐古",
|
|
"StationNumber": "B01",
|
|
},
|
|
] */
|
|
const StationNumbers =
|
|
Stations &&
|
|
Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
|
|
// Array [ "T01", "B01",]
|
|
const lineIDs = [];
|
|
const EachIDs = [];
|
|
StationNumbers.forEach((d) => {
|
|
const textArray = d.split("");
|
|
lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
|
|
EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
|
|
});
|
|
// Array [ "T", "B",]
|
|
// Array [ "01", "01",]
|
|
|
|
const dates = dayjs()
|
|
.set("hour", parseInt(time.split(":")[0]))
|
|
.set("minute", parseInt(time.split(":")[1]))
|
|
.add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
|
|
const timeString = se == "通過" ? "" : dates.format("HH:mm").split(":");
|
|
const onClickStateText = (string) => {
|
|
if (string != "通過") return;
|
|
alert("この駅は通過駅です");
|
|
};
|
|
return (
|
|
<TouchableWithoutFeedback
|
|
onPress={() =>
|
|
openStationACFromEachTrainInfo &&
|
|
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
|
|
style={{
|
|
backgroundColor: `${lineColorList[lineID]}${
|
|
se == "通過" ? "80" : ""
|
|
}`,
|
|
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, color: `#000${se == "通過" ? "5" : ""}` }}
|
|
>
|
|
{station}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
<View style={{ position: "relative", width: 0 }}>
|
|
{points ? (
|
|
<Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
|
|
🚊
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
|
|
{!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,
|
|
}}
|
|
onPress={() => onClickStateText(se)}
|
|
>
|
|
{se == "通過" ? "レ" : `${timeString[0]}:${timeString[1]}`}
|
|
</Text>
|
|
<Text style={{ fontSize: 18, width: 50 }}>
|
|
{se?.replace("発", "出発").replace("着", "到着")}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
};
|