121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import { View, TouchableOpacity, useWindowDimensions } from "react-native";
|
||
import { StateBox } from "./StateBox";
|
||
import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
|
||
import { getStationList2 } from "../../../lib/getStationList2";
|
||
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
|
||
import { SheetManager } from "react-native-actions-sheet";
|
||
|
||
export const TrainDataView = ({
|
||
currentTrainData,
|
||
currentPosition,
|
||
nearTrainIDList,
|
||
openTrainInfo,
|
||
mode = 0,
|
||
navigate,
|
||
}) => {
|
||
const { width, height } = useWindowDimensions();
|
||
const { isLandscape } = useDeviceOrientationChange();
|
||
const { webview, getCurrentTrain } = useCurrentTrain();
|
||
const [mapsStationData, setMapsStationData] = useState(undefined);
|
||
useEffect(() => {
|
||
getStationList2().then(setMapsStationData);
|
||
}, []);
|
||
const onLine = !!currentPosition?.toString().length;
|
||
return (
|
||
<View
|
||
style={{
|
||
flexDirection: "row",
|
||
//minHeight: 200,
|
||
//height: heightPercentageToDP("20%"),
|
||
width: isLandscape ? (width / 100) * 40 : width,
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<TouchableOpacity
|
||
style={{ flex: 1, flexDirection: "row" }}
|
||
disabled={!onLine}
|
||
onPress={() => {
|
||
const test = [];
|
||
Object.keys(mapsStationData).forEach((d) => {
|
||
mapsStationData[d].forEach((x) => {
|
||
if (x.StationNumber == currentPosition[0])
|
||
test.push({ line: d, station: x });
|
||
});
|
||
if (currentPosition[0] == "M12") {
|
||
test.push({
|
||
line: "seto",
|
||
station: { Station_JP: "児島", MyStation: "0" },
|
||
});
|
||
}
|
||
});
|
||
if (!test.length) return;
|
||
webview.current?.injectJavaScript(
|
||
`MoveDisplayStation('${test[0].line}_${test[0].station.MyStation}_${test[0].station.Station_JP}');setStrings();`
|
||
);
|
||
navigate("Apps");
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
>
|
||
<StateBox
|
||
mode={mode}
|
||
title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
|
||
text={
|
||
currentTrainData?.Pos.match("～")
|
||
? `${
|
||
currentTrainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～")[0]
|
||
}～${
|
||
currentTrainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～")[1]
|
||
}`
|
||
: currentTrainData?.Pos
|
||
}
|
||
style={
|
||
onLine
|
||
? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
|
||
: {}
|
||
}
|
||
/>
|
||
</TouchableOpacity>
|
||
|
||
<View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
|
||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||
<StateBox
|
||
mode={mode}
|
||
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 mode={mode} title="列番" text={currentTrainData?.num} />
|
||
) : (
|
||
<StateBox
|
||
mode={mode}
|
||
title="増解結相手を表示▶️"
|
||
text={`${nearTrainIDList}`}
|
||
style={{
|
||
borderWidth: 1,
|
||
borderColor: "red",
|
||
borderStyle: "solid",
|
||
}}
|
||
/>
|
||
)}
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|