jrshikoku/components/ActionSheetComponents/EachTrainInfoCore.js

454 lines
14 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { useEffect, useState, useRef } from "react";
import {
View,
LayoutAnimation,
Text,
TouchableOpacity,
Platform,
StyleSheet,
useWindowDimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ActionSheet, {
SheetManager,
useScrollHandlers,
} from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import { heightPercentageToDP } from "react-native-responsive-screen";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
import { getTrainType } from "../../lib/getTrainType";
import { customTrainDataDetector } from "../custom-train-data";
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { EachStopList } from "./EachTrainInfo/EachStopList";
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
import { LongHeader } from "./EachTrainInfo/LongHeader";
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
import { getStationData } from "../../lib/eachTrainInfoCoreLib/getStationData";
import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
export const EachTrainInfoCore = ({
actionSheetRef,
data,
navigate,
originalStationList,
openStationACFromEachTrainInfo,
from,
setTrainInfo,
}) => {
// const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
const { currentTrain } = useCurrentTrain();
const [currentTrainData, setCurrentTrainData] = useState();
// const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
useEffect(() => {
console.log(currentTrain.length);
if (!currentTrain.length) return;
setCurrentTrainData(
checkDuplicateTrainData(
currentTrain.filter((d) => d.num == data.trainNum)
)
);
}, [currentTrain, data.trainNum]);
//bconst insets = useSafeAreaInsets();
const [headStation, setHeadStation] = useState();
const [tailStation, setTailStation] = useState();
const [isConcatNear, setIsConcatNear] = useState(false);
const [showNearTrain, setShowNearTrain] = useState([]);
const [nearTrainIDList, setNearTrainIDList] = useState([]);
const { getInfluencedTrainData } = useBusAndTrainData();
const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
const [currentPosition, setCurrentPosition] = useState([]);
const [trainData, setTrainData] = useState([]);
const scrollHandlers = actionSheetRef
? useScrollHandlers("scrollview-1", actionSheetRef)
: null;
const stationList =
originalStationList &&
lineList.map((d) =>
originalStationList[d].map((a) => ({
StationNumber: a.StationNumber,
StationName: a.Station_JP,
}))
);
// 使用例
const points =
trainPositionSwitch == "true"
? findReversalPoints(currentPosition, stopStationIDList)
: [];
const stopStationIDList = trainData.map((i, index) => {
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);
return StationNumbers[0];
});
const { height, width } = useWindowDimensions();
const [isLandscape, setIsLandscape] = useState(false);
const [trueTrainID, setTrueTrainID] = useState();
useEffect(() => {
if (!data.trainNum) return;
const TD = trainList[data.trainNum];
setIsConcatNear(false);
setHeadStation();
setTailStation();
if (!TD) {
const specialTrainActualID = searchSpecialTrain(data.trainNum, trainList);
setTrueTrainID(specialTrainActualID || undefined);
setTrainData([]);
return;
}
setTrainData(TD.split("#").filter((d) => d != ""));
}, [data]);
//裏列車探索
useEffect(() => {
if (!data.trainNum) return;
const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
setNearTrainIDList(returnArray);
setShowNearTrain(TDArray);
if (trainData.length == 0) return;
if (TDArray.length == 0) return;
let head;
let tail;
TDArray.forEach((d) => {
const [station, se, time] = d.split(",");
if (station == trainData[0].split(",")[0]) {
head = trainData[0].split(",")[0];
}
if (station == trainData[trainData.length - 1].split(",")[0]) {
tail = trainData[trainData.length - 1].split(",")[0];
}
});
if (head) setHeadStation(head);
else setHeadStation();
if (tail) setTailStation(tail);
else setTailStation();
}, [trainData, data]);
useEffect(() => {
//currentTrainData.Pos = "鴨川~端岡"; //test
if (!currentTrainData) return;
if (!currentTrainData?.Pos) return;
if (currentTrainData?.Pos.match("")) {
const pos = currentTrainData?.Pos.replace("(下り)", "")
.replace("(上り)", "")
.split("");
setCurrentPosition([
getStationData(pos[0], stationList),
getStationData(pos[1], stationList),
]);
} else {
setCurrentPosition([getStationData(currentTrainData?.Pos, stationList)]);
}
}, [currentTrainData]);
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [width, height]);
const replaceSpecialTrainDetail = (trainNum) => {
let TD = trainList[trainNum];
if (!TD) return;
setTrainData(TD.split("#").filter((d) => d != ""));
};
useEffect(() => {
//列車現在地アイコン表示スイッチ
AS.getItem("trainPositionSwitch")
.then((d) => {
if (d) setTrainPositionSwitch(d);
})
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
}, []);
const openTrainInfo = (d) => {
const train = customTrainDataDetector(d);
let TrainNumber = "";
if (train.trainNumDistance != undefined) {
const timeInfo =
parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
TrainNumber = timeInfo + "号";
}
const payload = {
data: {
trainNum: d,
limited: `${getTrainType(train.type).data}:${
train.trainName
}${TrainNumber}`,
},
navigate,
originalStationList,
from: "AllTrainDiagramView",
};
if (setTrainInfo) {
setTrainInfo(payload.data);
} else {
SheetManager.hide("EachTrainInfo").then(() => {
//0.1秒待機してから開く
setTimeout(() => {
SheetManager.show("EachTrainInfo", { payload });
}, 1);
});
}
};
return (
<View
style={{
backgroundColor: "#0099CC",
borderTopRadius: 5,
borderColor: "dark",
borderWidth: 1,
}}
>
{isLandscape || (
<View style={{ height: 26, width: "100%" }}>
<View
style={{
height: 6,
width: 45,
borderRadius: 100,
backgroundColor: "#f0f0f0",
marginVertical: 10,
alignSelf: "center",
}}
/>
</View>
)}
<View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
{data.limited
? getType(data.limited.split(":")[0]) +
migrateTrainName(
data.limited.split(":")[1] ||
(trainData.length > 0
? trainData[trainData.length - 1].split(",")[0] + "行き"
: " ")
)
: ""}
</Text>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
{data.trainNum}
{isConcatNear ? ` + ${nearTrainIDList}` : ""}
</Text>
{data.limited != undefined &&
getType(data.limited.split(":")[0]) &&
!data.limited.split(":")[1].match("サンポート") && (
<Ionicons
name="subway"
color="white"
size={30}
style={{ margin: 5 }}
onPress={() => {
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
navigate("trainbase", {
info: "train.html?tn=" + data.trainNum,
from,
});
SheetManager.hide("EachTrainInfo");
}}
/>
)}
</View>
<DynamicHeaderScrollView
styles={styles}
scrollViewProps={scrollHandlers}
containerProps={{
style: {
maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
},
}}
Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
shortHeader={
from == "AllTrainDiagramView" ? (
<></>
) : (
<ShortHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
longHeader={
from == "AllTrainDiagramView" ? (
<></>
) : (
<LongHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
topStickyContent={
<ScrollStickyContent currentTrainData={currentTrainData} />
}
>
{headStation && !isConcatNear && (
<TouchableOpacity
onPress={() => {
const array = openBackTrainInfo(
headStation,
trainData,
showNearTrain
);
if (!array) return;
setTrainData(array);
setIsConcatNear(true);
}}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
本当の始発駅を表示
</Text>
</TouchableOpacity>
)}
{/* <LottieView
autoPlay
loop
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
source={require("../../assets/51690-loading-diamonds.json")}
/>
<Text>ほげほげふがふが</Text> */}
{trainData.length == 0 && trueTrainID && (
<TouchableOpacity
onPress={() => replaceSpecialTrainDetail(trueTrainID)}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
本来の列車情報を表示
</Text>
</TouchableOpacity>
)}
{trainData.map((i, index) =>
i.split(",")[1] == "提" ? (
<DataFromButton i={i} />
) : (
<EachStopList
i={i}
index={index}
stationList={stationList}
points={points}
currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
/>
)
)}
{tailStation && !isConcatNear && (
<TouchableOpacity
onPress={() => {
const array = openBackTrainInfo(
tailStation,
trainData,
showNearTrain
);
if (!array) return;
setTrainData(array);
setIsConcatNear(true);
}}
style={{
padding: 10,
flexDirection: "row",
borderColor: "blue",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
>
<Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
本当の終着駅を表示
</Text>
</TouchableOpacity>
)}
<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>
</DynamicHeaderScrollView>
</View>
);
};
const styles = StyleSheet.create({
header: {
justifyContent: "center",
alignItems: "center",
left: 0,
right: 0,
//paddingTop: 10,
position: "absolute",
zIndex: 1,
backgroundColor: "f0f0f0",
},
headerText: {
color: "#fff",
fontSize: 25,
fontWeight: "bold",
textAlign: "center",
},
});