75 lines
2.1 KiB
JavaScript
75 lines
2.1 KiB
JavaScript
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>
|
||
);
|
||
};
|