EachTrainInfoをコンポーネントファイル分割
This commit is contained in:
harukin-OneMix4
parent
b551c75061
commit
32e61a824b
@ -21,13 +21,15 @@ import {
|
||||
heightPercentageToDP,
|
||||
widthPercentageToDP,
|
||||
} from "react-native-responsive-screen";
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
||||
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
|
||||
import dayjs from "dayjs";
|
||||
import { getTrainType } from "../../lib/getTrainType";
|
||||
import { customTrainDataDetector } from "../custom-train-data";
|
||||
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
||||
import { EachStopList } from "./EachTrainInfo/EachStopList";
|
||||
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
|
||||
import { TrainDataView } from "./EachTrainInfo/TrainDataView";
|
||||
|
||||
export const EachTrainInfo = (props) => {
|
||||
if (!props.payload) return <></>;
|
||||
@ -647,7 +649,7 @@ export const EachTrainInfo = (props) => {
|
||||
i.split(",")[1] == "提" ? (
|
||||
<DataFromButton i={i} />
|
||||
) : (
|
||||
<StationButton
|
||||
<EachStopList
|
||||
i={i}
|
||||
index={index}
|
||||
stationList={stationList}
|
||||
@ -697,266 +699,3 @@ export const EachTrainInfo = (props) => {
|
||||
</ActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
const DataFromButton = ({ i }) => {
|
||||
const [station, se, time] = i.split(",");
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => Linking.openURL(time)}
|
||||
key={station}
|
||||
>
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<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: 18 }}>
|
||||
提供元
|
||||
<MaterialCommunityIcons
|
||||
name={"open-in-new"}
|
||||
color="black"
|
||||
size={20}
|
||||
/>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
|
||||
const StationButton = ({
|
||||
i,
|
||||
index,
|
||||
stationList,
|
||||
points,
|
||||
currentTrainData,
|
||||
openStationACFromEachTrainInfo,
|
||||
}) => {
|
||||
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 = dates.format("HH:mm").split(":");
|
||||
|
||||
return (
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: lineColorList[lineID],
|
||||
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 }}>{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>
|
||||
)}
|
||||
<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>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
|
||||
const TrainDataView = ({
|
||||
currentTrainData,
|
||||
currentPosition,
|
||||
nearTrainIDList,
|
||||
openTrainInfo,
|
||||
}) => {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
minHeight: 200,
|
||||
height: heightPercentageToDP("20%"),
|
||||
width: widthPercentageToDP("100%"),
|
||||
}}
|
||||
>
|
||||
<StateBox
|
||||
title={`現在地 ${currentPosition.toString()}`}
|
||||
text={
|
||||
currentTrainData?.Pos.match("～")
|
||||
? `${
|
||||
currentTrainData?.Pos.replace("（下り）", "")
|
||||
.replace("（上り）", "")
|
||||
.split("～")[0]
|
||||
}～${
|
||||
currentTrainData?.Pos.replace("（下り）", "")
|
||||
.replace("（上り）", "")
|
||||
.split("～")[1]
|
||||
}`
|
||||
: currentTrainData?.Pos
|
||||
}
|
||||
/>
|
||||
<View style={{ flex: 1, flexDirection: "column" }}>
|
||||
<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, style }) => (
|
||||
<View style={{ ...boxStyle, ...style }}>
|
||||
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
<View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
|
||||
{text?.match("～") ? (
|
||||
<>
|
||||
<Text style={boxTextStyle}>{text.split("～")[0]}</Text>
|
||||
<Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
|
||||
<Text style={boxTextStyle}>{text.split("～")[1]}</Text>
|
||||
</>
|
||||
) : (
|
||||
<Text style={boxTextStyle}>{text}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
const boxStyle = {
|
||||
flex: 1,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
};
|
||||
const boxTextStyle = {
|
||||
fontSize: 25,
|
||||
color: "#0099CC",
|
||||
textAlign: "right",
|
||||
};
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { View, Text, TouchableWithoutFeedback } from "react-native";
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import { Linking } from "react-native";
|
||||
export const DataFromButton = ({ i }) => {
|
||||
const [station, se, time] = i.split(",");
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => Linking.openURL(time)}
|
||||
key={station}
|
||||
>
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<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: 18 }}>
|
||||
提供元
|
||||
<MaterialCommunityIcons
|
||||
name={"open-in-new"}
|
||||
color="black"
|
||||
size={20}
|
||||
/>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
137
components/ActionSheetComponents/EachTrainInfo/EachStopList.js
Normal file
137
components/ActionSheetComponents/EachTrainInfo/EachStopList.js
Normal file
@ -0,0 +1,137 @@
|
||||
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,
|
||||
}) => {
|
||||
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 = dates.format("HH:mm").split(":");
|
||||
|
||||
return (
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: lineColorList[lineID],
|
||||
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 }}>{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>
|
||||
)}
|
||||
<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>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
};
|
||||
32
components/ActionSheetComponents/EachTrainInfo/StateBox.js
Normal file
32
components/ActionSheetComponents/EachTrainInfo/StateBox.js
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import { View, Text } from "react-native";
|
||||
|
||||
export const StateBox = ({ text, title, style }) => (
|
||||
<View style={{ ...boxStyle, ...style }}>
|
||||
<Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
<View style={{ fontSize: 25, color: "#0099CC", textAlign: "right" }}>
|
||||
{text?.match("～") ? (
|
||||
<>
|
||||
<Text style={boxTextStyle}>{text.split("～")[0]}</Text>
|
||||
<Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
|
||||
<Text style={boxTextStyle}>{text.split("～")[1]}</Text>
|
||||
</>
|
||||
) : (
|
||||
<Text style={boxTextStyle}>{text}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
const boxStyle = {
|
||||
flex: 1,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
};
|
||||
const boxTextStyle = {
|
||||
fontSize: 25,
|
||||
color: "#0099CC",
|
||||
textAlign: "right",
|
||||
};
|
||||
@ -0,0 +1,74 @@
|
||||
import React from "react";
|
||||
import { View, Text, TouchableOpacity } from "react-native";
|
||||
import { StateBox } from "./StateBox";
|
||||
import {
|
||||
heightPercentageToDP,
|
||||
widthPercentageToDP,
|
||||
} from "react-native-responsive-screen";
|
||||
|
||||
export const TrainDataView = ({
|
||||
currentTrainData,
|
||||
currentPosition,
|
||||
nearTrainIDList,
|
||||
openTrainInfo,
|
||||
}) => {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
minHeight: 200,
|
||||
height: heightPercentageToDP("20%"),
|
||||
width: widthPercentageToDP("100%"),
|
||||
}}
|
||||
>
|
||||
<StateBox
|
||||
title={`現在地 ${currentPosition.toString()}`}
|
||||
text={
|
||||
currentTrainData?.Pos.match("～")
|
||||
? `${
|
||||
currentTrainData?.Pos.replace("（下り）", "")
|
||||
.replace("（上り）", "")
|
||||
.split("～")[0]
|
||||
}～${
|
||||
currentTrainData?.Pos.replace("（下り）", "")
|
||||
.replace("（上り）", "")
|
||||
.split("～")[1]
|
||||
}`
|
||||
: currentTrainData?.Pos
|
||||
}
|
||||
/>
|
||||
<View style={{ flex: 1, flexDirection: "column" }}>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user