EachTrainInfoをコンポーネントファイル分割
This commit is contained in:
harukin-OneMix4
parent
b551c75061
commit
32e61a824b
@ -21,13 +21,15 @@ import {
|
|||||||
heightPercentageToDP,
|
heightPercentageToDP,
|
||||||
widthPercentageToDP,
|
widthPercentageToDP,
|
||||||
} from "react-native-responsive-screen";
|
} from "react-native-responsive-screen";
|
||||||
import lineColorList from "../../assets/originData/lineColorList";
|
|
||||||
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
||||||
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
|
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { getTrainType } from "../../lib/getTrainType";
|
import { getTrainType } from "../../lib/getTrainType";
|
||||||
import { customTrainDataDetector } from "../custom-train-data";
|
import { customTrainDataDetector } from "../custom-train-data";
|
||||||
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
||||||
|
import { EachStopList } from "./EachTrainInfo/EachStopList";
|
||||||
|
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
|
||||||
|
import { TrainDataView } from "./EachTrainInfo/TrainDataView";
|
||||||
|
|
||||||
export const EachTrainInfo = (props) => {
|
export const EachTrainInfo = (props) => {
|
||||||
if (!props.payload) return <></>;
|
if (!props.payload) return <></>;
|
||||||
@ -647,7 +649,7 @@ export const EachTrainInfo = (props) => {
|
|||||||
i.split(",")[1] == "提" ? (
|
i.split(",")[1] == "提" ? (
|
||||||
<DataFromButton i={i} />
|
<DataFromButton i={i} />
|
||||||
) : (
|
) : (
|
||||||
<StationButton
|
<EachStopList
|
||||||
i={i}
|
i={i}
|
||||||
index={index}
|
index={index}
|
||||||
stationList={stationList}
|
stationList={stationList}
|
||||||
@ -697,266 +699,3 @@ export const EachTrainInfo = (props) => {
|
|||||||
</ActionSheet>
|
</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