harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

列車情報の分離

Browse Source
This commit is contained in:
harukin-OneMix4 2024-01-15 02:52:52 +09:00
parent 0d50326507
commit 5a7e0bcd99
1 changed files with 299 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
components/ActionSheetComponents/EachTrainInfo.js
View File

@ -38,7 +38,6 @@ export const EachTrainInfo = (props) => {
from,
} = props.payload;
const [trainData, setTrainData] = useState([]);
const [isTop, setIsTop] = useState(true);
const [currentPosition, setCurrentPosition] = useState([]);
const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
@ -66,7 +65,7 @@ export const EachTrainInfo = (props) => {
})
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
}, []);
const insets = useSafeAreaInsets();
//bconst insets = useSafeAreaInsets();
const getStationData = (stationName) => {
const Stations = stationList.map((a) =>
a.filter((d) => d.StationName == stationName)
@ -232,7 +231,6 @@ export const EachTrainInfo = (props) => {
trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
useEffect(() => {
setIsTop(true);
if (!data.trainNum) return;
const TD = trainList[data.trainNum];
if (!TD) {
@ -261,7 +259,7 @@ export const EachTrainInfo = (props) => {
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
return (
<ActionSheet
gestureEnabled={isTop}
gestureEnabled={true}
CustomHeaderComponent={<></>}
ref={actionSheetRef}
drawUnderStatusBar={false}
@ -336,118 +334,10 @@ export const EachTrainInfo = (props) => {
horizontal
pagingEnabled
>
<View
style={{
flexDirection: "row",
minHeight: 200,
height: heightPercentageToDP("20%"),
width: widthPercentageToDP("100%"),
}}
>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
現在地 {currentPosition.toString()}
</Text>
<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
style={{
fontSize: 28,
color: "#0099CC",
textAlign: "right",
}}
>
{currentTrainData?.Pos}
</Text>
)}
</View>
<View style={{ flex: 1, flexDirection: "column" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
{isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 32,
color: "#0099CC",
textAlign: "right",
}}
>
{currentTrainData?.delay}
{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>
</View>
</View>
</View>
<TrainDataView
currentTrainData={currentTrainData}
currentPosition={currentPosition}
/>
{/* <View
style={{
flexDirection: "column",
@ -488,7 +378,9 @@ export const EachTrainInfo = (props) => {
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>車両案内</Text>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
車両案内
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
@ -586,13 +478,9 @@ export const EachTrainInfo = (props) => {
maxHeight: heightPercentageToDP(
from == "AllTrainDiagramView" ? "70%" : "50%"
),
}}
onScroll={(e) => {
if (!Platform.OS !== "android") return;
setIsTop(e.nativeEvent.contentOffset.y < 0);
backgroundColor: "white",
}}
>
<View style={{ backgroundColor: "white", alignItems: "center" }}>
{/* <LottieView
autoPlay
loop
@ -601,7 +489,45 @@ export const EachTrainInfo = (props) => {
/>
<Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) => {
{trainData.map((i, index) => (
<StationButton
i={i}
index={index}
stationList={stationList}
points={points}
currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
/>
))}
<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>
</ScrollView>
</View>
</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)
@ -638,6 +564,7 @@ export const EachTrainInfo = (props) => {
if (!isNaN(currentTrainData?.delay)) {
date.setMinutes(date.getMinutes() + currentTrainData?.delay);
}
const timeString = date.toTimeString().split(" ")[0].split(":");
return (
<TouchableWithoutFeedback
@ -708,8 +635,7 @@ export const EachTrainInfo = (props) => {
🚊
</Text>
) : null}
{!isNaN(currentTrainData?.delay) &&
currentTrainData?.delay != 0 && (
{!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
<Text
style={{
fontSize: 15,
@ -744,25 +670,73 @@ export const EachTrainInfo = (props) => {
</View>
</TouchableWithoutFeedback>
);
})}
};
<View style={{ flexDirection: "row" }}>
const TrainDataView = ({ currentTrainData, currentPosition }) => {
return (
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
minHeight: 200,
height: heightPercentageToDP("20%"),
width: widthPercentageToDP("100%"),
}}
>
<Text style={{ fontSize: 20 }}> </Text>
<View style={{ flex: 1 }} />
<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>
</View>
</ScrollView>
</View>
</ActionSheet>
);
};
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",
};