列車情報の分離
This commit is contained in:
harukin-OneMix4
parent
0d50326507
commit
5a7e0bcd99
@ -38,7 +38,6 @@ export const EachTrainInfo = (props) => {
|
|||||||
from,
|
from,
|
||||||
} = props.payload;
|
} = props.payload;
|
||||||
const [trainData, setTrainData] = useState([]);
|
const [trainData, setTrainData] = useState([]);
|
||||||
const [isTop, setIsTop] = useState(true);
|
|
||||||
const [currentPosition, setCurrentPosition] = useState([]);
|
const [currentPosition, setCurrentPosition] = useState([]);
|
||||||
|
|
||||||
const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
|
const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
|
||||||
@ -66,7 +65,7 @@ export const EachTrainInfo = (props) => {
|
|||||||
})
|
})
|
||||||
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
|
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
|
||||||
}, []);
|
}, []);
|
||||||
const insets = useSafeAreaInsets();
|
//bconst insets = useSafeAreaInsets();
|
||||||
const getStationData = (stationName) => {
|
const getStationData = (stationName) => {
|
||||||
const Stations = stationList.map((a) =>
|
const Stations = stationList.map((a) =>
|
||||||
a.filter((d) => d.StationName == stationName)
|
a.filter((d) => d.StationName == stationName)
|
||||||
@ -232,7 +231,6 @@ export const EachTrainInfo = (props) => {
|
|||||||
trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
|
trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsTop(true);
|
|
||||||
if (!data.trainNum) return;
|
if (!data.trainNum) return;
|
||||||
const TD = trainList[data.trainNum];
|
const TD = trainList[data.trainNum];
|
||||||
if (!TD) {
|
if (!TD) {
|
||||||
@ -261,7 +259,7 @@ export const EachTrainInfo = (props) => {
|
|||||||
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
||||||
return (
|
return (
|
||||||
<ActionSheet
|
<ActionSheet
|
||||||
gestureEnabled={isTop}
|
gestureEnabled={true}
|
||||||
CustomHeaderComponent={<></>}
|
CustomHeaderComponent={<></>}
|
||||||
ref={actionSheetRef}
|
ref={actionSheetRef}
|
||||||
drawUnderStatusBar={false}
|
drawUnderStatusBar={false}
|
||||||
@ -336,72 +334,66 @@ export const EachTrainInfo = (props) => {
|
|||||||
horizontal
|
horizontal
|
||||||
pagingEnabled
|
pagingEnabled
|
||||||
>
|
>
|
||||||
<View
|
<TrainDataView
|
||||||
|
currentTrainData={currentTrainData}
|
||||||
|
currentPosition={currentPosition}
|
||||||
|
/>
|
||||||
|
{/* <View
|
||||||
style={{
|
style={{
|
||||||
flexDirection: "row",
|
flexDirection: "column",
|
||||||
minHeight: 200,
|
|
||||||
height: heightPercentageToDP("20%"),
|
height: heightPercentageToDP("20%"),
|
||||||
|
flex: 1,
|
||||||
width: widthPercentageToDP("100%"),
|
width: widthPercentageToDP("100%"),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View
|
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||||
style={{
|
<View
|
||||||
flex: 1,
|
style={{
|
||||||
backgroundColor: "white",
|
flex: 1,
|
||||||
borderRadius: 10,
|
backgroundColor: "white",
|
||||||
padding: 10,
|
borderRadius: 10,
|
||||||
margin: 10,
|
padding: 10,
|
||||||
}}
|
margin: 10,
|
||||||
>
|
}}
|
||||||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
>
|
||||||
現在地 {currentPosition.toString()}
|
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
|
||||||
</Text>
|
<View style={{ flex: 1 }} />
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
{currentTrainData?.Pos && currentTrainData?.Pos.match("～") ? (
|
|
||||||
<>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: 28,
|
|
||||||
color: "#0099CC",
|
|
||||||
textAlign: "right",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
currentTrainData?.Pos.replace("（下り）", "")
|
|
||||||
.replace("（上り）", "")
|
|
||||||
.split("～")[0]
|
|
||||||
}
|
|
||||||
</Text>
|
|
||||||
<Text style={{ color: "#0099CC", textAlign: "right" }}>
|
|
||||||
～
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: 28,
|
|
||||||
color: "#0099CC",
|
|
||||||
textAlign: "right",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
currentTrainData?.Pos.replace("（下り）", "")
|
|
||||||
.replace("（上り）", "")
|
|
||||||
.split("～")[1]
|
|
||||||
}
|
|
||||||
</Text>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Text
|
<Text
|
||||||
style={{
|
style={{
|
||||||
fontSize: 28,
|
fontSize: 20,
|
||||||
color: "#0099CC",
|
color: "#0099CC",
|
||||||
textAlign: "right",
|
textAlign: "right",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{currentTrainData?.Pos}
|
岡山
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
</View>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flex: 3,
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 10,
|
||||||
|
margin: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
||||||
|
車両案内
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
color: "#0099CC",
|
||||||
|
textAlign: "right",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
宇多津でうずしお号と連結
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View style={{ flex: 1, flexDirection: "column" }}>
|
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
@ -412,121 +404,21 @@ export const EachTrainInfo = (props) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
||||||
{isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
|
編成(使用車両：2700系)
|
||||||
</Text>
|
</Text>
|
||||||
<View style={{ flex: 1 }} />
|
<View style={{ flex: 1 }} />
|
||||||
<Text
|
<Text
|
||||||
style={{
|
style={{
|
||||||
fontSize: 32,
|
fontSize: 20,
|
||||||
color: "#0099CC",
|
color: "#0099CC",
|
||||||
textAlign: "right",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{currentTrainData?.delay}
|
{"[<自][自>][アン自|指>][アン指|G>]"}
|
||||||
{isNaN(currentTrainData?.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",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{currentTrainData?.num}
|
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View> */}
|
||||||
{/* <View
|
|
||||||
style={{
|
|
||||||
flexDirection: "column",
|
|
||||||
height: heightPercentageToDP("20%"),
|
|
||||||
flex: 1,
|
|
||||||
width: widthPercentageToDP("100%"),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "white",
|
|
||||||
borderRadius: 10,
|
|
||||||
padding: 10,
|
|
||||||
margin: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: 20,
|
|
||||||
color: "#0099CC",
|
|
||||||
textAlign: "right",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
岡山
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flex: 3,
|
|
||||||
backgroundColor: "white",
|
|
||||||
borderRadius: 10,
|
|
||||||
padding: 10,
|
|
||||||
margin: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: 20,
|
|
||||||
color: "#0099CC",
|
|
||||||
textAlign: "right",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
宇多津でうずしお号と連結
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "white",
|
|
||||||
borderRadius: 10,
|
|
||||||
padding: 10,
|
|
||||||
margin: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
|
||||||
編成(使用車両：2700系)
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: 20,
|
|
||||||
color: "#0099CC",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{"[<自][自>][アン自|指>][アン指|G>]"}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View> */}
|
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
)}
|
)}
|
||||||
<View
|
<View
|
||||||
@ -586,14 +478,10 @@ export const EachTrainInfo = (props) => {
|
|||||||
maxHeight: heightPercentageToDP(
|
maxHeight: heightPercentageToDP(
|
||||||
from == "AllTrainDiagramView" ? "70%" : "50%"
|
from == "AllTrainDiagramView" ? "70%" : "50%"
|
||||||
),
|
),
|
||||||
}}
|
backgroundColor: "white",
|
||||||
onScroll={(e) => {
|
|
||||||
if (!Platform.OS !== "android") return;
|
|
||||||
setIsTop(e.nativeEvent.contentOffset.y < 0);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View style={{ backgroundColor: "white", alignItems: "center" }}>
|
{/* <LottieView
|
||||||
{/* <LottieView
|
|
||||||
autoPlay
|
autoPlay
|
||||||
loop
|
loop
|
||||||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||||||
@ -601,164 +489,29 @@ export const EachTrainInfo = (props) => {
|
|||||||
/>
|
/>
|
||||||
<Text>ほげほげふがふが</Text> */}
|
<Text>ほげほげふがふが</Text> */}
|
||||||
|
|
||||||
{trainData.map((i, index) => {
|
{trainData.map((i, index) => (
|
||||||
const [station, se, time] = i.split(",");
|
<StationButton
|
||||||
const Stations = stationList.map((a) =>
|
i={i}
|
||||||
a.filter((d) => d.StationName == station)
|
index={index}
|
||||||
);
|
stationList={stationList}
|
||||||
const StationNumbers =
|
points={points}
|
||||||
Stations &&
|
currentTrainData={currentTrainData}
|
||||||
Stations.reduce((newArray, e) => {
|
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
|
||||||
return newArray.concat(e);
|
/>
|
||||||
}, [])
|
))}
|
||||||
.filter((d) => d.StationNumber)
|
|
||||||
.map((d) => d.StationNumber);
|
|
||||||
|
|
||||||
const colorIDs =
|
<View style={{ flexDirection: "row" }}>
|
||||||
StationNumbers != null
|
<View
|
||||||
? StationNumbers.map((d) => {
|
style={{
|
||||||
return d.split("").filter((s) => "A" < s && s < "Z");
|
padding: 8,
|
||||||
}).reduce((newArray, e) => {
|
flexDirection: "row",
|
||||||
return newArray.concat(e);
|
borderBottomWidth: 1,
|
||||||
}, [])
|
borderBottomColor: "#f0f0f0",
|
||||||
: [];
|
flex: 1,
|
||||||
const EachIDs =
|
}}
|
||||||
StationNumbers != null
|
>
|
||||||
? StationNumbers.map((d) => {
|
<Text style={{ fontSize: 20 }}> </Text>
|
||||||
return d
|
<View style={{ flex: 1 }} />
|
||||||
.split("")
|
|
||||||
.filter((s) => "0" <= s && s <= "9")
|
|
||||||
.join("");
|
|
||||||
})
|
|
||||||
: [];
|
|
||||||
const date = new Date();
|
|
||||||
if (time) {
|
|
||||||
date.setHours(time.split(":")[0], time.split(":")[1]);
|
|
||||||
}
|
|
||||||
if (!isNaN(currentTrainData?.delay)) {
|
|
||||||
date.setMinutes(date.getMinutes() + currentTrainData?.delay);
|
|
||||||
}
|
|
||||||
const timeString = date.toTimeString().split(" ")[0].split(":");
|
|
||||||
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 }} />
|
|
||||||
{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>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
<View style={{ flexDirection: "row" }}>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
padding: 8,
|
|
||||||
flexDirection: "row",
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: "#f0f0f0",
|
|
||||||
flex: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text style={{ fontSize: 20 }}> </Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
@ -766,3 +519,224 @@ export const EachTrainInfo = (props) => {
|
|||||||
</ActionSheet>
|
</ActionSheet>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const StationButton = ({
|
||||||
|
i,
|
||||||
|
index,
|
||||||
|
stationList,
|
||||||
|
points,
|
||||||
|
currentTrainData,
|
||||||
|
openStationACFromEachTrainInfo,
|
||||||
|
}) => {
|
||||||
|
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("");
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
const date = new Date();
|
||||||
|
if (time) {
|
||||||
|
date.setHours(time.split(":")[0], time.split(":")[1]);
|
||||||
|
}
|
||||||
|
if (!isNaN(currentTrainData?.delay)) {
|
||||||
|
date.setMinutes(date.getMinutes() + currentTrainData?.delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeString = date.toTimeString().split(" ")[0].split(":");
|
||||||
|
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 }} />
|
||||||
|
{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 }) => {
|
||||||
|
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" }}>
|
||||||
|
<StateBox
|
||||||
|
title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
|
||||||
|
text={`${currentTrainData?.delay}${
|
||||||
|
isNaN(currentTrainData?.delay) ? "" : "分"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<StateBox title="列番" text={currentTrainData?.num} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const StateBox = ({ text, title }) => (
|
||||||
|
<View style={boxStyle}>
|
||||||
|
<Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text style={{ fontSize: 32, 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>
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
const boxStyle = {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 10,
|
||||||
|
margin: 10,
|
||||||
|
};
|
||||||
|
const boxTextStyle = {
|
||||||
|
fontSize: 28,
|
||||||
|
color: "#0099CC",
|
||||||
|
textAlign: "right",
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user