ファイル分割
This commit is contained in:
harukin-OneMix4
parent
12cd53640d
commit
f8bd37c452
@ -29,7 +29,7 @@ import { LongHeader } from "./EachTrainInfo/LongHeader";
|
|||||||
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
|
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
|
||||||
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
|
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
|
||||||
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
|
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
|
||||||
|
import { EachTrainInfoCore } from "./EachTrainInfoCore";
|
||||||
export const EachTrainInfo = (props) => {
|
export const EachTrainInfo = (props) => {
|
||||||
if (!props.payload) return <></>;
|
if (!props.payload) return <></>;
|
||||||
|
|
||||||
@ -49,657 +49,3 @@ export const EachTrainInfo = (props) => {
|
|||||||
</ActionSheet>
|
</ActionSheet>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
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",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const EachTrainInfoCore = ({
|
|
||||||
actionSheetRef,
|
|
||||||
data,
|
|
||||||
navigate,
|
|
||||||
originalStationList,
|
|
||||||
openStationACFromEachTrainInfo,
|
|
||||||
from,
|
|
||||||
}) => {
|
|
||||||
// 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]);
|
|
||||||
|
|
||||||
//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 stationList =
|
|
||||||
originalStationList &&
|
|
||||||
lineList.map((d) =>
|
|
||||||
originalStationList[d].map((a) => ({
|
|
||||||
StationNumber: a.StationNumber,
|
|
||||||
StationName: a.Station_JP,
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
|
|
||||||
const getStationData = (stationName) => {
|
|
||||||
const Stations = stationList.map((a) =>
|
|
||||||
a.filter((d) => d.StationName == stationName)
|
|
||||||
);
|
|
||||||
const Station =
|
|
||||||
Stations &&
|
|
||||||
Stations.reduce((newArray, e) => {
|
|
||||||
return newArray.concat(e);
|
|
||||||
}, []);
|
|
||||||
if (!Station[0]) return [];
|
|
||||||
return Station.map((d) => d.StationNumber)[0];
|
|
||||||
};
|
|
||||||
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];
|
|
||||||
});
|
|
||||||
function findReversalPoints(array) {
|
|
||||||
try {
|
|
||||||
// arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
|
|
||||||
// stopStationIDListは停車駅の駅IDの配列
|
|
||||||
if (!stopStationIDList.length) return [];
|
|
||||||
// arrayが二次元配列だったら早期リターン
|
|
||||||
if (!array instanceof Array) return [];
|
|
||||||
if (!array.length) return [];
|
|
||||||
if (array[0] instanceof Array) return [];
|
|
||||||
const arrayNumber = array.map((d) => ({
|
|
||||||
line: d
|
|
||||||
.split("")
|
|
||||||
.filter((s) => "A" < s && s < "Z")
|
|
||||||
.join(""),
|
|
||||||
ID: d
|
|
||||||
.split("")
|
|
||||||
.filter((s) => "0" <= s && s <= "9")
|
|
||||||
.join(""),
|
|
||||||
}));
|
|
||||||
const stopStationIDListNumber = stopStationIDList.map((d) => {
|
|
||||||
if (!d) return { line: [], ID: [] };
|
|
||||||
return {
|
|
||||||
line: d
|
|
||||||
.split("")
|
|
||||||
.filter((s) => "A" < s && s < "Z")
|
|
||||||
.join(""),
|
|
||||||
ID: d
|
|
||||||
.split("")
|
|
||||||
.filter((s) => "0" <= s && s <= "9")
|
|
||||||
.join(""),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
// 完全一致
|
|
||||||
if (array.length == 1) {
|
|
||||||
const index = stopStationIDList.indexOf(array[0]);
|
|
||||||
if (index != -1) return [index];
|
|
||||||
// 通過駅の場合
|
|
||||||
for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
|
|
||||||
if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
|
|
||||||
if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
|
|
||||||
return [i + 1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
|
|
||||||
if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
|
|
||||||
return [i + 1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 駅間の場合
|
|
||||||
if (array.length == 2) {
|
|
||||||
const index1 = stopStationIDList.indexOf(array[0]);
|
|
||||||
const index2 = stopStationIDList.indexOf(array[1]);
|
|
||||||
if (index1 != -1 && index2 != -1) {
|
|
||||||
// 駅間で通過駅も無い場合
|
|
||||||
if (index1 < index2) {
|
|
||||||
if (index1 + 1 == index2) {
|
|
||||||
return [index2];
|
|
||||||
} else {
|
|
||||||
const returnArray = [];
|
|
||||||
for (let i = index1 + 1; i <= index2; i++) {
|
|
||||||
returnArray.push(i);
|
|
||||||
}
|
|
||||||
return returnArray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (index1 > index2) {
|
|
||||||
if (index2 + 1 == index1) return [index1];
|
|
||||||
else {
|
|
||||||
const returnArray = [];
|
|
||||||
for (let i = index2 + 1; i <= index1; i++) {
|
|
||||||
returnArray.push(i);
|
|
||||||
}
|
|
||||||
return returnArray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const getNearStationID = (stationID) => {
|
|
||||||
for (let i = 0; i <= stopStationIDListNumber.length; i++) {
|
|
||||||
if (stopStationIDListNumber[i].ID < stationID) {
|
|
||||||
if (stopStationIDListNumber[i + 1].ID > stationID) {
|
|
||||||
return i + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (stopStationIDListNumber[i].ID > stationID) {
|
|
||||||
if (stopStationIDListNumber[i + 1].ID < stationID) {
|
|
||||||
return i + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let newIndex1 = index1;
|
|
||||||
let newIndex2 = index2;
|
|
||||||
if (index1 == -1) {
|
|
||||||
newIndex1 = getNearStationID(arrayNumber[0].ID);
|
|
||||||
}
|
|
||||||
if (index2 == -1) {
|
|
||||||
newIndex2 = getNearStationID(arrayNumber[1].ID);
|
|
||||||
}
|
|
||||||
if (newIndex1 && newIndex2) {
|
|
||||||
return [newIndex1, newIndex2];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 通過駅の場合
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
useEffect(() => {
|
|
||||||
if (trainData.length == 0) return;
|
|
||||||
if (showNearTrain.length == 0) return;
|
|
||||||
showNearTrain.forEach((d) => {
|
|
||||||
const [station, se, time] = d.split(",");
|
|
||||||
|
|
||||||
if (station == trainData[0].split(",")[0])
|
|
||||||
setHeadStation(trainData[0].split(",")[0]);
|
|
||||||
if (station == trainData[trainData.length - 1].split(",")[0])
|
|
||||||
setTailStation(trainData[trainData.length - 1].split(",")[0]);
|
|
||||||
});
|
|
||||||
}, [trainData, showNearTrain]);
|
|
||||||
//裏列車探索
|
|
||||||
useEffect(() => {
|
|
||||||
if (!data.trainNum) return;
|
|
||||||
const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
|
|
||||||
setNearTrainIDList(returnArray);
|
|
||||||
setShowNearTrain(TDArray);
|
|
||||||
}, [data]);
|
|
||||||
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
|
||||||
const migrateTrainName = (string) => {
|
|
||||||
return string
|
|
||||||
.replace("マリン", "マリンライナー")
|
|
||||||
.replace("ライナーライナー", "ライナー");
|
|
||||||
};
|
|
||||||
const getType = (string) => {
|
|
||||||
switch (string) {
|
|
||||||
case "express":
|
|
||||||
return "特急";
|
|
||||||
case "rapid":
|
|
||||||
return "快速";
|
|
||||||
default:
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 使用例
|
|
||||||
const points =
|
|
||||||
trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
|
|
||||||
const { height, width } = useWindowDimensions();
|
|
||||||
const [isLandscape, setIsLandscape] = useState(false);
|
|
||||||
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]), getStationData(pos[1])]);
|
|
||||||
} else {
|
|
||||||
setCurrentPosition([getStationData(currentTrainData?.Pos)]);
|
|
||||||
}
|
|
||||||
}, [currentTrainData]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (height / width > 1.5) {
|
|
||||||
setIsLandscape(false);
|
|
||||||
}
|
|
||||||
if (height / width < 1.5) {
|
|
||||||
setIsLandscape(true);
|
|
||||||
}
|
|
||||||
}, [width, height]);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!data.trainNum) return;
|
|
||||||
const TD = trainList[data.trainNum];
|
|
||||||
if (!TD) {
|
|
||||||
setTrainData([]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setTrainData(TD.split("#").filter((d) => d != ""));
|
|
||||||
}, [data]);
|
|
||||||
useEffect(() => {
|
|
||||||
//列車現在地アイコン表示スイッチ
|
|
||||||
AS.getItem("trainPositionSwitch")
|
|
||||||
.then((d) => {
|
|
||||||
if (d) {
|
|
||||||
setTrainPositionSwitch(d);
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
|
|
||||||
const migrationArray = (stationInfo) => {
|
|
||||||
const mainTrainStationPosition = trainData.findIndex(
|
|
||||||
(d) => d.split(",")[0] == stationInfo
|
|
||||||
);
|
|
||||||
|
|
||||||
const relationMain = (() => {
|
|
||||||
if (mainTrainStationPosition == 0) return "head";
|
|
||||||
if (mainTrainStationPosition == trainData.length - 1) return "tail";
|
|
||||||
return "middle";
|
|
||||||
})();
|
|
||||||
|
|
||||||
const subTrainStationPosition = showNearTrain.findIndex(
|
|
||||||
(d) => d.split(",")[0] == stationInfo
|
|
||||||
);
|
|
||||||
const relationSub = (() => {
|
|
||||||
if (subTrainStationPosition == 0) return "head";
|
|
||||||
if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
|
|
||||||
return "middle";
|
|
||||||
})();
|
|
||||||
|
|
||||||
switch (relationMain) {
|
|
||||||
case "head":
|
|
||||||
if (relationSub == "head") {
|
|
||||||
return;
|
|
||||||
} else if (relationSub == "tail") {
|
|
||||||
return [
|
|
||||||
...showNearTrain.slice(0, subTrainStationPosition),
|
|
||||||
...trainData,
|
|
||||||
];
|
|
||||||
} else if (relationSub == "middle") {
|
|
||||||
return [
|
|
||||||
...showNearTrain.slice(0, subTrainStationPosition),
|
|
||||||
...trainData,
|
|
||||||
];
|
|
||||||
} else return;
|
|
||||||
case "tail":
|
|
||||||
if (relationSub == "head") {
|
|
||||||
return [
|
|
||||||
...trainData.slice(0, mainTrainStationPosition),
|
|
||||||
...showNearTrain,
|
|
||||||
];
|
|
||||||
} else if (relationSub == "tail") {
|
|
||||||
return;
|
|
||||||
} else if (relationSub == "middle") {
|
|
||||||
return [
|
|
||||||
...trainData.slice(0, mainTrainStationPosition),
|
|
||||||
...showNearTrain.slice(subTrainStationPosition),
|
|
||||||
];
|
|
||||||
} else return;
|
|
||||||
case "middle":
|
|
||||||
if (relationSub == "head") {
|
|
||||||
return [
|
|
||||||
...trainData.slice(0, mainTrainStationPosition),
|
|
||||||
...showNearTrain,
|
|
||||||
];
|
|
||||||
} else if (relationSub == "tail") {
|
|
||||||
return [
|
|
||||||
...showNearTrain.slice(0, subTrainStationPosition),
|
|
||||||
...trainData.slice(mainTrainStationPosition),
|
|
||||||
];
|
|
||||||
} else return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const array = migrationArray(stationInfo);
|
|
||||||
if (!array) return;
|
|
||||||
setTrainData(array);
|
|
||||||
setIsConcatNear(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
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",
|
|
||||||
};
|
|
||||||
SheetManager.hide("EachTrainInfo").then(() => {
|
|
||||||
//0.1秒待機してから開く
|
|
||||||
setTimeout(() => {
|
|
||||||
SheetManager.show("EachTrainInfo", { payload });
|
|
||||||
}, 1);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#0099CC",
|
|
||||||
borderTopRadius: 5,
|
|
||||||
borderColor: "dark",
|
|
||||||
borderWidth: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
{isLandscape ? (
|
|
||||||
<LandscapeTrainInfo
|
|
||||||
scrollHandlers={scrollHandlers}
|
|
||||||
leftContent={
|
|
||||||
from == "AllTrainDiagramView" ? (
|
|
||||||
<></>
|
|
||||||
) : (
|
|
||||||
<LongHeader
|
|
||||||
currentTrainData={currentTrainData}
|
|
||||||
currentPosition={currentPosition}
|
|
||||||
nearTrainIDList={nearTrainIDList}
|
|
||||||
openTrainInfo={openTrainInfo}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
topStickyContent={
|
|
||||||
<ScrollStickyContent currentTrainData={currentTrainData} />
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{headStation && !isConcatNear && (
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => openBackTrainInfo(headStation)}
|
|
||||||
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.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={() => openBackTrainInfo(tailStation)}
|
|
||||||
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>
|
|
||||||
</LandscapeTrainInfo>
|
|
||||||
) : (
|
|
||||||
<DynamicHeaderScrollView
|
|
||||||
styles={styles}
|
|
||||||
containerProps={{
|
|
||||||
style: { maxHeight: heightPercentageToDP("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={() => openBackTrainInfo(headStation)}
|
|
||||||
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.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={() => openBackTrainInfo(tailStation)}
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
686
components/ActionSheetComponents/EachTrainInfoCore.js
Normal file
686
components/ActionSheetComponents/EachTrainInfoCore.js
Normal file
@ -0,0 +1,686 @@
|
|||||||
|
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";
|
||||||
|
export const EachTrainInfoCore = ({
|
||||||
|
actionSheetRef,
|
||||||
|
data,
|
||||||
|
navigate,
|
||||||
|
originalStationList,
|
||||||
|
openStationACFromEachTrainInfo,
|
||||||
|
from,
|
||||||
|
}) => {
|
||||||
|
// 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]);
|
||||||
|
|
||||||
|
//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 stationList =
|
||||||
|
originalStationList &&
|
||||||
|
lineList.map((d) =>
|
||||||
|
originalStationList[d].map((a) => ({
|
||||||
|
StationNumber: a.StationNumber,
|
||||||
|
StationName: a.Station_JP,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
const getStationData = (stationName) => {
|
||||||
|
const Stations = stationList.map((a) =>
|
||||||
|
a.filter((d) => d.StationName == stationName)
|
||||||
|
);
|
||||||
|
const Station =
|
||||||
|
Stations &&
|
||||||
|
Stations.reduce((newArray, e) => {
|
||||||
|
return newArray.concat(e);
|
||||||
|
}, []);
|
||||||
|
if (!Station[0]) return [];
|
||||||
|
return Station.map((d) => d.StationNumber)[0];
|
||||||
|
};
|
||||||
|
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];
|
||||||
|
});
|
||||||
|
function findReversalPoints(array) {
|
||||||
|
try {
|
||||||
|
// arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
|
||||||
|
// stopStationIDListは停車駅の駅IDの配列
|
||||||
|
if (!stopStationIDList.length) return [];
|
||||||
|
// arrayが二次元配列だったら早期リターン
|
||||||
|
if (!array instanceof Array) return [];
|
||||||
|
if (!array.length) return [];
|
||||||
|
if (array[0] instanceof Array) return [];
|
||||||
|
const arrayNumber = array.map((d) => ({
|
||||||
|
line: d
|
||||||
|
.split("")
|
||||||
|
.filter((s) => "A" < s && s < "Z")
|
||||||
|
.join(""),
|
||||||
|
ID: d
|
||||||
|
.split("")
|
||||||
|
.filter((s) => "0" <= s && s <= "9")
|
||||||
|
.join(""),
|
||||||
|
}));
|
||||||
|
const stopStationIDListNumber = stopStationIDList.map((d) => {
|
||||||
|
if (!d) return { line: [], ID: [] };
|
||||||
|
return {
|
||||||
|
line: d
|
||||||
|
.split("")
|
||||||
|
.filter((s) => "A" < s && s < "Z")
|
||||||
|
.join(""),
|
||||||
|
ID: d
|
||||||
|
.split("")
|
||||||
|
.filter((s) => "0" <= s && s <= "9")
|
||||||
|
.join(""),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
// 完全一致
|
||||||
|
if (array.length == 1) {
|
||||||
|
const index = stopStationIDList.indexOf(array[0]);
|
||||||
|
if (index != -1) return [index];
|
||||||
|
// 通過駅の場合
|
||||||
|
for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
|
||||||
|
if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
|
||||||
|
if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
|
||||||
|
return [i + 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
|
||||||
|
if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
|
||||||
|
return [i + 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 駅間の場合
|
||||||
|
if (array.length == 2) {
|
||||||
|
const index1 = stopStationIDList.indexOf(array[0]);
|
||||||
|
const index2 = stopStationIDList.indexOf(array[1]);
|
||||||
|
if (index1 != -1 && index2 != -1) {
|
||||||
|
// 駅間で通過駅も無い場合
|
||||||
|
if (index1 < index2) {
|
||||||
|
if (index1 + 1 == index2) {
|
||||||
|
return [index2];
|
||||||
|
} else {
|
||||||
|
const returnArray = [];
|
||||||
|
for (let i = index1 + 1; i <= index2; i++) {
|
||||||
|
returnArray.push(i);
|
||||||
|
}
|
||||||
|
return returnArray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (index1 > index2) {
|
||||||
|
if (index2 + 1 == index1) return [index1];
|
||||||
|
else {
|
||||||
|
const returnArray = [];
|
||||||
|
for (let i = index2 + 1; i <= index1; i++) {
|
||||||
|
returnArray.push(i);
|
||||||
|
}
|
||||||
|
return returnArray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const getNearStationID = (stationID) => {
|
||||||
|
for (let i = 0; i <= stopStationIDListNumber.length; i++) {
|
||||||
|
if (stopStationIDListNumber[i].ID < stationID) {
|
||||||
|
if (stopStationIDListNumber[i + 1].ID > stationID) {
|
||||||
|
return i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (stopStationIDListNumber[i].ID > stationID) {
|
||||||
|
if (stopStationIDListNumber[i + 1].ID < stationID) {
|
||||||
|
return i + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let newIndex1 = index1;
|
||||||
|
let newIndex2 = index2;
|
||||||
|
if (index1 == -1) {
|
||||||
|
newIndex1 = getNearStationID(arrayNumber[0].ID);
|
||||||
|
}
|
||||||
|
if (index2 == -1) {
|
||||||
|
newIndex2 = getNearStationID(arrayNumber[1].ID);
|
||||||
|
}
|
||||||
|
if (newIndex1 && newIndex2) {
|
||||||
|
return [newIndex1, newIndex2];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通過駅の場合
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if (trainData.length == 0) return;
|
||||||
|
if (showNearTrain.length == 0) return;
|
||||||
|
showNearTrain.forEach((d) => {
|
||||||
|
const [station, se, time] = d.split(",");
|
||||||
|
|
||||||
|
if (station == trainData[0].split(",")[0])
|
||||||
|
setHeadStation(trainData[0].split(",")[0]);
|
||||||
|
if (station == trainData[trainData.length - 1].split(",")[0])
|
||||||
|
setTailStation(trainData[trainData.length - 1].split(",")[0]);
|
||||||
|
});
|
||||||
|
}, [trainData, showNearTrain]);
|
||||||
|
//裏列車探索
|
||||||
|
useEffect(() => {
|
||||||
|
if (!data.trainNum) return;
|
||||||
|
const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
|
||||||
|
setNearTrainIDList(returnArray);
|
||||||
|
setShowNearTrain(TDArray);
|
||||||
|
}, [data]);
|
||||||
|
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
||||||
|
const migrateTrainName = (string) => {
|
||||||
|
return string
|
||||||
|
.replace("マリン", "マリンライナー")
|
||||||
|
.replace("ライナーライナー", "ライナー");
|
||||||
|
};
|
||||||
|
const getType = (string) => {
|
||||||
|
switch (string) {
|
||||||
|
case "express":
|
||||||
|
return "特急";
|
||||||
|
case "rapid":
|
||||||
|
return "快速";
|
||||||
|
default:
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用例
|
||||||
|
const points =
|
||||||
|
trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
|
||||||
|
const { height, width } = useWindowDimensions();
|
||||||
|
const [isLandscape, setIsLandscape] = useState(false);
|
||||||
|
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]), getStationData(pos[1])]);
|
||||||
|
} else {
|
||||||
|
setCurrentPosition([getStationData(currentTrainData?.Pos)]);
|
||||||
|
}
|
||||||
|
}, [currentTrainData]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (height / width > 1.5) {
|
||||||
|
setIsLandscape(false);
|
||||||
|
}
|
||||||
|
if (height / width < 1.5) {
|
||||||
|
setIsLandscape(true);
|
||||||
|
}
|
||||||
|
}, [width, height]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!data.trainNum) return;
|
||||||
|
const TD = trainList[data.trainNum];
|
||||||
|
if (!TD) {
|
||||||
|
setTrainData([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setTrainData(TD.split("#").filter((d) => d != ""));
|
||||||
|
}, [data]);
|
||||||
|
useEffect(() => {
|
||||||
|
//列車現在地アイコン表示スイッチ
|
||||||
|
AS.getItem("trainPositionSwitch")
|
||||||
|
.then((d) => {
|
||||||
|
if (d) {
|
||||||
|
setTrainPositionSwitch(d);
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
|
||||||
|
const migrationArray = (stationInfo) => {
|
||||||
|
const mainTrainStationPosition = trainData.findIndex(
|
||||||
|
(d) => d.split(",")[0] == stationInfo
|
||||||
|
);
|
||||||
|
|
||||||
|
const relationMain = (() => {
|
||||||
|
if (mainTrainStationPosition == 0) return "head";
|
||||||
|
if (mainTrainStationPosition == trainData.length - 1) return "tail";
|
||||||
|
return "middle";
|
||||||
|
})();
|
||||||
|
|
||||||
|
const subTrainStationPosition = showNearTrain.findIndex(
|
||||||
|
(d) => d.split(",")[0] == stationInfo
|
||||||
|
);
|
||||||
|
const relationSub = (() => {
|
||||||
|
if (subTrainStationPosition == 0) return "head";
|
||||||
|
if (subTrainStationPosition == showNearTrain.length - 1) return "tail";
|
||||||
|
return "middle";
|
||||||
|
})();
|
||||||
|
|
||||||
|
switch (relationMain) {
|
||||||
|
case "head":
|
||||||
|
if (relationSub == "head") {
|
||||||
|
return;
|
||||||
|
} else if (relationSub == "tail") {
|
||||||
|
return [
|
||||||
|
...showNearTrain.slice(0, subTrainStationPosition),
|
||||||
|
...trainData,
|
||||||
|
];
|
||||||
|
} else if (relationSub == "middle") {
|
||||||
|
return [
|
||||||
|
...showNearTrain.slice(0, subTrainStationPosition),
|
||||||
|
...trainData,
|
||||||
|
];
|
||||||
|
} else return;
|
||||||
|
case "tail":
|
||||||
|
if (relationSub == "head") {
|
||||||
|
return [
|
||||||
|
...trainData.slice(0, mainTrainStationPosition),
|
||||||
|
...showNearTrain,
|
||||||
|
];
|
||||||
|
} else if (relationSub == "tail") {
|
||||||
|
return;
|
||||||
|
} else if (relationSub == "middle") {
|
||||||
|
return [
|
||||||
|
...trainData.slice(0, mainTrainStationPosition),
|
||||||
|
...showNearTrain.slice(subTrainStationPosition),
|
||||||
|
];
|
||||||
|
} else return;
|
||||||
|
case "middle":
|
||||||
|
if (relationSub == "head") {
|
||||||
|
return [
|
||||||
|
...trainData.slice(0, mainTrainStationPosition),
|
||||||
|
...showNearTrain,
|
||||||
|
];
|
||||||
|
} else if (relationSub == "tail") {
|
||||||
|
return [
|
||||||
|
...showNearTrain.slice(0, subTrainStationPosition),
|
||||||
|
...trainData.slice(mainTrainStationPosition),
|
||||||
|
];
|
||||||
|
} else return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const array = migrationArray(stationInfo);
|
||||||
|
if (!array) return;
|
||||||
|
setTrainData(array);
|
||||||
|
setIsConcatNear(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
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",
|
||||||
|
};
|
||||||
|
SheetManager.hide("EachTrainInfo").then(() => {
|
||||||
|
//0.1秒待機してから開く
|
||||||
|
setTimeout(() => {
|
||||||
|
SheetManager.show("EachTrainInfo", { payload });
|
||||||
|
}, 1);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#0099CC",
|
||||||
|
borderTopRadius: 5,
|
||||||
|
borderColor: "dark",
|
||||||
|
borderWidth: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
{isLandscape ? (
|
||||||
|
<LandscapeTrainInfo
|
||||||
|
scrollHandlers={scrollHandlers}
|
||||||
|
leftContent={
|
||||||
|
from == "AllTrainDiagramView" ? (
|
||||||
|
<></>
|
||||||
|
) : (
|
||||||
|
<LongHeader
|
||||||
|
currentTrainData={currentTrainData}
|
||||||
|
currentPosition={currentPosition}
|
||||||
|
nearTrainIDList={nearTrainIDList}
|
||||||
|
openTrainInfo={openTrainInfo}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
topStickyContent={
|
||||||
|
<ScrollStickyContent currentTrainData={currentTrainData} />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{headStation && !isConcatNear && (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => openBackTrainInfo(headStation)}
|
||||||
|
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.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={() => openBackTrainInfo(tailStation)}
|
||||||
|
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>
|
||||||
|
</LandscapeTrainInfo>
|
||||||
|
) : (
|
||||||
|
<DynamicHeaderScrollView
|
||||||
|
styles={styles}
|
||||||
|
containerProps={{
|
||||||
|
style: { maxHeight: heightPercentageToDP("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={() => openBackTrainInfo(headStation)}
|
||||||
|
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.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={() => openBackTrainInfo(tailStation)}
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user